dev3000 0.0.49 → 0.0.51

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

@@ -1,41 +1,38 @@
-import LogsClient from './LogsClient';
-import { redirect } from 'next/navigation';
-import { readFileSync, existsSync, readdirSync, statSync } from 'fs';
-import { join, dirname, basename } from 'path';
-import { parseLogEntries } from './utils';
+import { existsSync, readdirSync, readFileSync, statSync } from "fs"
+import { redirect } from "next/navigation"
+import { basename, dirname, join } from "path"
+import LogsClient from "./LogsClient"
+import { parseLogEntries } from "./utils"
 
 interface PageProps {
-  searchParams: Promise<{ file?: string; mode?: 'head' | 'tail' }>;
+  searchParams: Promise<{ file?: string; mode?: "head" | "tail" }>
 }
 
 async function getLogFiles() {
   try {
-    const currentLogPath = process.env.LOG_FILE_PATH || '/tmp/dev3000.log';
-    
+    const currentLogPath = process.env.LOG_FILE_PATH || "/tmp/dev3000.log"
+
     if (!existsSync(currentLogPath)) {
-      return { files: [], currentFile: '', projectName: 'unknown' };
+      return { files: [], currentFile: "", projectName: "unknown" }
     }
 
-    const logDir = dirname(currentLogPath);
-    const currentLogName = basename(currentLogPath);
-    
+    const logDir = dirname(currentLogPath)
+    const currentLogName = basename(currentLogPath)
+
     // Extract project name from current log filename
-    const projectMatch = currentLogName.match(/^dev3000-(.+?)-\d{4}-\d{2}-\d{2}T/);
-    const projectName = projectMatch ? projectMatch[1] : 'unknown';
-    
-    const dirContents = readdirSync(logDir);
+    const projectMatch = currentLogName.match(/^dev3000-(.+?)-\d{4}-\d{2}-\d{2}T/)
+    const projectName = projectMatch ? projectMatch[1] : "unknown"
+
+    const dirContents = readdirSync(logDir)
     const logFiles = dirContents
-      .filter(file => 
-        file.startsWith(`dev3000-${projectName}-`) && 
-        file.endsWith('.log')
-      )
-      .map(file => {
-        const filePath = join(logDir, file);
-        const stats = statSync(filePath);
-        
-        const timestampMatch = file.match(/(\d{4}-\d{2}-\d{2}T[\d-]+Z)/);
-        const timestamp = timestampMatch ? timestampMatch[1].replace(/-/g, ':') : '';
-        
+      .filter((file) => file.startsWith(`dev3000-${projectName}-`) && file.endsWith(".log"))
+      .map((file) => {
+        const filePath = join(logDir, file)
+        const stats = statSync(filePath)
+
+        const timestampMatch = file.match(/(\d{4}-\d{2}-\d{2}T[\d-]+Z)/)
+        const timestamp = timestampMatch ? timestampMatch[1].replace(/-/g, ":") : ""
+
         return {
           name: file,
           path: filePath,
@@ -43,83 +40,85 @@ async function getLogFiles() {
           size: stats.size,
           mtime: stats.mtime,
           isCurrent: file === currentLogName
-        };
+        }
       })
-      .sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
-    
+      .sort((a, b) => b.mtime.getTime() - a.mtime.getTime())
+
     return {
       files: logFiles,
       currentFile: currentLogPath,
       projectName
-    };
-  } catch (error) {
-    return { files: [], currentFile: '', projectName: 'unknown' };
+    }
+  } catch (_error) {
+    return { files: [], currentFile: "", projectName: "unknown" }
   }
 }
 
-async function getLogData(logPath: string, mode: 'head' | 'tail' = 'tail', lines: number = 100) {
+async function getLogData(logPath: string, mode: "head" | "tail" = "tail", lines: number = 100) {
   try {
     if (!existsSync(logPath)) {
-      return { logs: '', total: 0 };
+      return { logs: "", total: 0 }
     }
-    
-    const logContent = readFileSync(logPath, 'utf-8');
-    const allLines = logContent.split('\n').filter(line => line.trim());
-    
-    const selectedLines = mode === 'head' 
-      ? allLines.slice(0, lines)
-      : allLines.slice(-lines);
-    
+
+    const logContent = readFileSync(logPath, "utf-8")
+    const allLines = logContent.split("\n").filter((line) => line.trim())
+
+    const selectedLines = mode === "head" ? allLines.slice(0, lines) : allLines.slice(-lines)
+
     return {
-      logs: selectedLines.join('\n'),
+      logs: selectedLines.join("\n"),
       total: allLines.length
-    };
-  } catch (error) {
-    return { logs: '', total: 0 };
+    }
+  } catch (_error) {
+    return { logs: "", total: 0 }
   }
 }
 
 export default async function LogsPage({ searchParams }: PageProps) {
-  const version = process.env.DEV3000_VERSION || '0.0.0';
-  
+  const version = process.env.DEV3000_VERSION || "0.0.0"
+
   // Await searchParams (Next.js 15 requirement)
-  const params = await searchParams;
-  
+  const params = await searchParams
+
   // Get available log files
-  const { files, currentFile } = await getLogFiles();
-  
-  // If no file specified and we have files, redirect to latest
+  const { files, currentFile } = await getLogFiles()
+
+  // If no file specified and we have files, redirect to latest with tail mode
   if (!params.file && files.length > 0) {
-    const latestFile = files[0].name;
-    redirect(`/logs?file=${encodeURIComponent(latestFile)}`);
+    const latestFile = files[0].name
+    redirect(`/logs?file=${encodeURIComponent(latestFile)}&mode=tail`)
   }
-  
+
   // If no file specified and no files available, render with empty data
   if (!params.file) {
     return (
-      <LogsClient 
+      <LogsClient
         version={version}
         initialData={{
           logs: [],
           logFiles: [],
-          currentLogFile: '',
-          mode: 'tail'
+          currentLogFile: "",
+          mode: "tail"
         }}
       />
-    );
+    )
   }
-  
+
   // Find the selected log file
-  const selectedFile = files.find(f => f.name === params.file);
-  const logPath = selectedFile?.path || currentFile;
-  const mode = (params.mode as 'head' | 'tail') || 'tail';
-  
+  const selectedFile = files.find((f) => f.name === params.file)
+  const logPath = selectedFile?.path || currentFile
+
+  // Always default to 'tail' mode for initial loads
+  const _isCurrentFile = selectedFile?.isCurrent !== false
+  const defaultMode = "tail" // Always start in tail mode
+  const mode = (params.mode as "head" | "tail") || defaultMode
+
   // Get initial log data server-side
-  const logData = await getLogData(logPath, mode);
-  const parsedLogs = parseLogEntries(logData.logs);
-  
+  const logData = await getLogData(logPath, mode)
+  const parsedLogs = parseLogEntries(logData.logs)
+
   return (
-    <LogsClient 
+    <LogsClient
       version={version}
       initialData={{
         logs: parsedLogs,
@@ -128,5 +127,5 @@ export default async function LogsPage({ searchParams }: PageProps) {
         mode
       }}
     />
-  );
-}
+  )
+}

package/mcp-server/app/logs/utils.ts

@@ -1,46 +1,117 @@
-import { LogEntry } from '@/types';
+import type { LogEntry } from "@/types"
+
+/**
+ * Cleans up console log messages that contain CSS formatting directives
+ * Example: "%c[Vercel Web Analytics]%c Debug mode... color: rgb(120, 120, 120) color: inherit"
+ * Becomes: "[Vercel Web Analytics] Debug mode..."
+ */
+function cleanConsoleFormatting(message: string): string {
+  // Pattern to match console log entries with CSS formatting
+  const consoleLogPattern = /^\[CONSOLE LOG\] (.+)$/
+  const match = message.match(consoleLogPattern)
+
+  if (!match) {
+    return message
+  }
+
+  const consoleMessage = match[1]
+
+  // Check if this message has %c CSS formatting directives
+  if (!consoleMessage.includes("%c")) {
+    return message // No formatting to clean
+  }
+
+  // Remove CSS formatting directives step by step
+  let cleaned = consoleMessage
+
+  // Remove %c markers
+  cleaned = cleaned.replace(/%c/g, "")
+
+  // Remove trailing CSS color declarations - look for CSS patterns before JSON or at end of string
+  // Match CSS color declarations that appear after %c removal
+  cleaned = cleaned.replace(/\s+color:\s*[^{}\n]*?(?=\s*[{[]|$)/g, "")
+
+  // Clean up any extra whitespace
+  cleaned = cleaned.replace(/\s+/g, " ").trim()
+
+  return `[CONSOLE LOG] ${cleaned}`
+}
 
 export function parseLogEntries(logContent: string): LogEntry[] {
-  // Split by timestamp pattern - each timestamp starts a new log entry
-  const timestampPattern = /\[(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)\] \[([^\]]+)\] /;
-  
-  const entries: LogEntry[] = [];
-  const lines = logContent.split('\n');
-  let currentEntry: LogEntry | null = null;
-  
+  // Enhanced pattern to handle both formats:
+  // Format 1 (CDP): [timestamp] [SOURCE] message
+  // Format 2 (Extension): [timestamp] [TAB-id] [SOURCE] [event] message
+  const timestampPattern = /\[(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)\] \[([^\]]+)\] /
+
+  const entries: LogEntry[] = []
+  const lines = logContent.split("\n")
+  let currentEntry: LogEntry | null = null
+
   for (const line of lines) {
-    if (!line.trim()) continue;
-    
-    const match = line.match(timestampPattern);
+    if (!line.trim()) continue
+
+    const match = line.match(timestampPattern)
     if (match) {
       // Save previous entry if exists
       if (currentEntry) {
-        entries.push(currentEntry);
+        entries.push(currentEntry)
+      }
+
+      const [fullMatch, timestamp, firstBracket] = match
+      const remainingLine = line.substring(fullMatch.length)
+
+      // Check if this is a Chrome extension format with tab identifier
+      const isTabIdentifier = /^TAB-\d+\.\d+$/.test(firstBracket)
+      let source = firstBracket
+      let message = remainingLine
+      let tabIdentifier: string | undefined
+      let userAgent: string | undefined
+
+      if (isTabIdentifier) {
+        // Chrome extension format: [TAB-id] [SOURCE] [event] message
+        tabIdentifier = firstBracket
+
+        // Look for the next bracketed section which should be the actual source
+        const sourceMatch = remainingLine.match(/^\[([^\]]+)\] /)
+        if (sourceMatch) {
+          source = sourceMatch[1] // This should be "BROWSER"
+          message = remainingLine.substring(sourceMatch[0].length)
+
+          // Extract user agent from INFO entries if present
+          if (message.includes("User-Agent:")) {
+            const uaMatch = message.match(/User-Agent: ([^,\n]+)/)
+            if (uaMatch) {
+              userAgent = uaMatch[1]
+            }
+          }
+        }
       }
-      
-      // Start new entry
-      const [fullMatch, timestamp, source] = match;
-      const message = line.substring(fullMatch.length);
-      const screenshot = message.match(/\[SCREENSHOT\] (.+)/)?.[1];
-      
+
+      const screenshot = message.match(/\[SCREENSHOT\] (.+)/)?.[1]
+
+      // Clean up CSS formatting directives in console log messages
+      const cleanedMessage = cleanConsoleFormatting(message)
+
       currentEntry = {
         timestamp,
         source,
-        message,
+        message: cleanedMessage,
         screenshot,
-        original: line
-      };
+        original: line,
+        tabIdentifier,
+        userAgent
+      }
     } else if (currentEntry) {
       // Append to current entry's message
-      currentEntry.message += '\n' + line;
-      currentEntry.original += '\n' + line;
+      currentEntry.message += `\n${line}`
+      currentEntry.original += `\n${line}`
     }
   }
-  
+
   // Don't forget the last entry
   if (currentEntry) {
-    entries.push(currentEntry);
+    entries.push(currentEntry)
   }
-  
-  return entries;
-}
+
+  return entries
+}

package/mcp-server/app/page.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 export default function HomePage() {
   return (
     <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-      <a 
+      <a
         href="https://github.com/vercel-labs/dev3000"
         target="_blank"
         rel="noopener noreferrer"
@@ -11,35 +9,33 @@ export default function HomePage() {
         title="View on GitHub"
       >
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
+          <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
         </svg>
       </a>
       <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
-        <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">
-          🎯 dev3000
-        </h1>
-        
+        <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">🎯 dev3000</h1>
+
         <div className="space-y-4">
-          <a 
+          <a
             href="/logs"
             className="block w-full bg-blue-500 text-white text-center py-3 px-4 rounded hover:bg-blue-600 transition-colors"
           >
             📊 View Development Logs
           </a>
-          
-          <a 
+
+          <a
             href="/api/mcp/mcp"
             className="block w-full bg-green-500 text-white text-center py-3 px-4 rounded hover:bg-green-600 transition-colors"
           >
             🤖 MCP Endpoint
           </a>
         </div>
-        
+
         <div className="mt-6 text-sm text-gray-600 text-center">
           <p>Real-time development monitoring with visual context</p>
           <p className="mt-2">Server logs + Browser events + Screenshots</p>
         </div>
       </div>
     </div>
-  );
-}
+  )
+}