dev3000 0.0.0 → 0.0.3

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

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server';
+import { ConfigApiResponse } from '../../types';
+
+export async function GET(): Promise<NextResponse> {
+  const response: ConfigApiResponse = {
+    version: process.env.DEV_PLAYWRIGHT_VERSION || '0.0.0'
+  };
+  
+  return NextResponse.json(response);
+}

package/mcp-server/app/api/logs/head/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest } from 'next/server';
+import { readFileSync, existsSync } from 'fs';
+import { LogsApiResponse, LogsApiError } from '../../../types';
+
+export async function GET(request: NextRequest): Promise<Response> {
+  try {
+    const { searchParams } = new URL(request.url);
+    const lines = parseInt(searchParams.get('lines') || '50');
+    const logPath = searchParams.get('logPath') || process.env.LOG_FILE_PATH || './ai-dev-tools/consolidated.log';
+    
+    if (!existsSync(logPath)) {
+      const errorResponse: LogsApiError = { error: 'Log file not found' };
+      return Response.json(errorResponse, { status: 404 });
+    }
+    
+    const logContent = readFileSync(logPath, 'utf-8');
+    const allLines = logContent.split('\n').filter(line => line.trim());
+    const headLines = allLines.slice(0, lines);
+    
+    const response: LogsApiResponse = {
+      logs: headLines.join('\n'),
+      total: allLines.length
+    };
+    
+    return Response.json(response);
+  } catch (error) {
+    const errorResponse: LogsApiError = {
+      error: error instanceof Error ? error.message : 'Unknown error'
+    };
+    return Response.json(errorResponse, { status: 500 });
+  }
+}

package/mcp-server/app/api/logs/stream/route.ts

@@ -0,0 +1,61 @@
+import { NextRequest } from 'next/server';
+import { existsSync, watchFile, readFileSync } from 'fs';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const logPath = searchParams.get('logPath') || process.env.LOG_FILE_PATH || './ai-dev-tools/consolidated.log';
+  
+  if (!existsSync(logPath)) {
+    return new Response('Log file not found', { status: 404 });
+  }
+
+  const encoder = new TextEncoder();
+  let lastSize = 0;
+
+  const stream = new ReadableStream({
+    start(controller) {
+      // Send initial content
+      try {
+        const content = readFileSync(logPath, 'utf-8');
+        const lines = content.split('\n').filter(line => line.trim());
+        lastSize = content.length;
+        
+        // Send initial lines
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ lines })}\n\n`));
+      } catch (error) {
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ error: 'Failed to read log' })}\n\n`));
+      }
+
+      // Watch for file changes
+      const watcher = watchFile(logPath, { interval: 1000 }, () => {
+        try {
+          const content = readFileSync(logPath, 'utf-8');
+          if (content.length > lastSize) {
+            const newContent = content.slice(lastSize);
+            const newLines = newContent.split('\n').filter(line => line.trim());
+            if (newLines.length > 0) {
+              controller.enqueue(encoder.encode(`data: ${JSON.stringify({ newLines })}\n\n`));
+            }
+            lastSize = content.length;
+          }
+        } catch (error) {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ error: 'Failed to read log updates' })}\n\n`));
+        }
+      });
+
+      // Cleanup on close
+      request.signal.addEventListener('abort', () => {
+        watcher.unref();
+        controller.close();
+      });
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+}

package/mcp-server/app/api/logs/tail/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest } from 'next/server';
+import { readFileSync, existsSync } from 'fs';
+import { LogsApiResponse, LogsApiError } from '../../../types';
+
+export async function GET(request: NextRequest): Promise<Response> {
+  try {
+    const { searchParams } = new URL(request.url);
+    const lines = parseInt(searchParams.get('lines') || '50');
+    const logPath = searchParams.get('logPath') || process.env.LOG_FILE_PATH || './ai-dev-tools/consolidated.log';
+    
+    if (!existsSync(logPath)) {
+      const errorResponse: LogsApiError = { error: 'Log file not found' };
+      return Response.json(errorResponse, { status: 404 });
+    }
+    
+    const logContent = readFileSync(logPath, 'utf-8');
+    const allLines = logContent.split('\n').filter(line => line.trim());
+    const tailLines = allLines.slice(-lines);
+    
+    const response: LogsApiResponse = {
+      logs: tailLines.join('\n'),
+      total: allLines.length
+    };
+    
+    return Response.json(response);
+  } catch (error) {
+    const errorResponse: LogsApiError = {
+      error: error instanceof Error ? error.message : 'Unknown error'
+    };
+    return Response.json(errorResponse, { status: 500 });
+  }
+}

package/mcp-server/app/api/mcp/[transport]/route.ts

@@ -0,0 +1,188 @@
+import { createMcpHandler } from "mcp-handler";
+import { z } from "zod";
+import { readFileSync, existsSync } from "fs";
+import { join } from "path";
+
+const handler = createMcpHandler((server) => {
+    // Tool to read consolidated logs
+    server.tool(
+      "read_consolidated_logs",
+      "Read the consolidated development logs (server + browser)",
+      {
+        lines: z.number().optional().describe("Number of recent lines to read (default: 50)"),
+        filter: z.string().optional().describe("Filter logs by text content"),
+        logPath: z.string().optional().describe("Path to log file (default: ./ai-dev-tools/consolidated.log)"),
+      },
+      async ({ lines = 50, filter, logPath = "./ai-dev-tools/consolidated.log" }) => {
+        try {
+          if (!existsSync(logPath)) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `No log file found at ${logPath}. Make sure the dev environment is running.`
+                }
+              ]
+            };
+          }
+          
+          const logContent = readFileSync(logPath, "utf-8");
+          let logLines = logContent.split("\n").filter(line => line.trim());
+          
+          // Apply filter if provided
+          if (filter) {
+            logLines = logLines.filter(line => 
+              line.toLowerCase().includes(filter.toLowerCase())
+            );
+          }
+          
+          // Get recent lines
+          const recentLines = logLines.slice(-lines);
+          
+          return {
+            content: [
+              {
+                type: "text",
+                text: recentLines.length > 0 
+                  ? recentLines.join("\n")
+                  : "No matching log entries found."
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text", 
+                text: `Error reading logs: ${error instanceof Error ? error.message : String(error)}`
+              }
+            ]
+          };
+        }
+      }
+    );
+
+    // Tool to search logs
+    server.tool(
+      "search_logs",
+      "Search through consolidated logs with regex patterns",
+      {
+        pattern: z.string().describe("Regex pattern to search for"),
+        context: z.number().optional().describe("Number of lines of context around matches (default: 2)"),
+        logPath: z.string().optional().describe("Path to log file (default: ./ai-dev-tools/consolidated.log)"),
+      },
+      async ({ pattern, context = 2, logPath = "./ai-dev-tools/consolidated.log" }) => {
+        try {
+          if (!existsSync(logPath)) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `No log file found at ${logPath}.`
+                }
+              ]
+            };
+          }
+          
+          const logContent = readFileSync(logPath, "utf-8");
+          const logLines = logContent.split("\n");
+          
+          const regex = new RegExp(pattern, "gi");
+          const matches: string[] = [];
+          
+          logLines.forEach((line, index) => {
+            if (regex.test(line)) {
+              const start = Math.max(0, index - context);
+              const end = Math.min(logLines.length, index + context + 1);
+              const contextLines = logLines.slice(start, end);
+              
+              matches.push(`Match at line ${index + 1}:\n${contextLines.join("\n")}\n---`);
+            }
+          });
+          
+          return {
+            content: [
+              {
+                type: "text",
+                text: matches.length > 0 
+                  ? matches.join("\n\n")
+                  : "No matches found for the given pattern."
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Error searching logs: ${error instanceof Error ? error.message : String(error)}`
+              }
+            ]
+          };
+        }
+      }
+    );
+
+    // Tool to get browser errors
+    server.tool(
+      "get_browser_errors",
+      "Get recent browser errors and page errors from logs",
+      {
+        hours: z.number().optional().describe("Hours to look back (default: 1)"),
+        logPath: z.string().optional().describe("Path to log file (default: ./ai-dev-tools/consolidated.log)"),
+      },
+      async ({ hours = 1, logPath = "./ai-dev-tools/consolidated.log" }) => {
+        try {
+          if (!existsSync(logPath)) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `No log file found at ${logPath}.`
+                }
+              ]
+            };
+          }
+          
+          const logContent = readFileSync(logPath, "utf-8");
+          const logLines = logContent.split("\n");
+          
+          const cutoffTime = new Date(Date.now() - hours * 60 * 60 * 1000);
+          const errorLines = logLines.filter(line => {
+            if (!line.includes("[BROWSER]")) return false;
+            if (!(line.includes("ERROR") || line.includes("CONSOLE ERROR") || line.includes("PAGE ERROR"))) return false;
+            
+            // Extract timestamp
+            const timestampMatch = line.match(/\[(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)\]/);
+            if (timestampMatch) {
+              const logTime = new Date(timestampMatch[1]);
+              return logTime > cutoffTime;
+            }
+            return true; // Include if we can't parse timestamp
+          });
+          
+          return {
+            content: [
+              {
+                type: "text",
+                text: errorLines.length > 0 
+                  ? errorLines.join("\n")
+                  : "No browser errors found in the specified time period."
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Error getting browser errors: ${error instanceof Error ? error.message : String(error)}`
+              }
+            ]
+          };
+        }
+      }
+    );
+});
+
+export { handler as GET, handler as POST };

package/mcp-server/app/layout.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function RootLayout({
+  children,
+}: any) {
+  return (
+    <html lang="en">
+      <head>
+        <title>🎭 Dev Playwright</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

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

@@ -0,0 +1,292 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { LogEntry, LogsApiResponse, ConfigApiResponse } from '../../types';
+
+function parseLogLine(line: string): LogEntry | null {
+  const match = line.match(/\[([^\]]+)\] \[([^\]]+)\] (.+)/);
+  if (!match) return null;
+  
+  const [, timestamp, source, message] = match;
+  const screenshot = message.match(/\[SCREENSHOT\] (.+)/)?.[1];
+  
+  return {
+    timestamp,
+    source,
+    message,
+    screenshot,
+    original: line
+  };
+}
+
+function LogEntryComponent({ entry }: { entry: LogEntry }) {
+  return (
+    <div className="border-l-4 border-gray-200 pl-4 py-2">
+      <div className="flex items-center gap-2 text-xs text-gray-500">
+        <span className="font-mono">
+          {new Date(entry.timestamp).toLocaleTimeString()}
+        </span>
+        <span className={`px-2 py-1 rounded text-xs font-medium ${
+          entry.source === 'SERVER' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'
+        }`}>
+          {entry.source}
+        </span>
+      </div>
+      <div className="mt-1 font-mono text-sm whitespace-pre-wrap">
+        {entry.message}
+      </div>
+      {entry.screenshot && (
+        <div className="mt-2">
+          <img 
+            src={entry.screenshot} 
+            alt="Screenshot" 
+            className="max-w-full h-auto border rounded shadow-sm"
+            style={{ maxHeight: '400px' }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface LogsClientProps {
+  version: string;
+}
+
+export default function LogsClient({ version }: LogsClientProps) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [mode, setMode] = useState<'head' | 'tail'>('tail');
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [isLoadingNew, setIsLoadingNew] = useState(false);
+  const [lastLogCount, setLastLogCount] = useState(0);
+  const [lastFetched, setLastFetched] = useState<Date | null>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const pollForNewLogs = async () => {
+    if (mode !== 'tail' || !isAtBottom) return;
+    
+    try {
+      const response = await fetch('/api/logs/tail?lines=1000');
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      
+      const data: LogsApiResponse = await response.json();
+      
+      if (!data.logs) {
+        console.warn('No logs data in response');
+        return;
+      }
+      
+      const entries = data.logs
+        .split('\n')
+        .filter((line: string) => line.trim())
+        .map(parseLogLine)
+        .filter((entry: LogEntry | null): entry is LogEntry => entry !== null);
+      
+      if (entries.length > lastLogCount) {
+        setIsLoadingNew(true);
+        setLastFetched(new Date());
+        setTimeout(() => {
+          setLogs(entries);
+          setLastLogCount(entries.length);
+          setIsLoadingNew(false);
+          // Auto-scroll to bottom for new content
+          setTimeout(() => {
+            bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+          }, 50);
+        }, 250);
+      }
+    } catch (error) {
+      console.error('Error polling logs:', error);
+      // Don't spam console on network errors during polling
+    }
+  };
+
+  // Start/stop polling based on mode and scroll position
+  useEffect(() => {
+    if (mode === 'tail' && isAtBottom) {
+      pollIntervalRef.current = setInterval(pollForNewLogs, 2000); // Poll every 2 seconds
+      return () => {
+        if (pollIntervalRef.current) {
+          clearInterval(pollIntervalRef.current);
+        }
+      };
+    } else {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+    }
+  }, [mode, isAtBottom, lastLogCount]);
+
+  const loadInitialLogs = async () => {
+    try {
+      const response = await fetch(`/api/logs/${mode}?lines=1000`);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      
+      const data: LogsApiResponse = await response.json();
+      
+      if (!data.logs) {
+        console.warn('No logs data in response');
+        setLogs([]);
+        return;
+      }
+      
+      const entries = data.logs
+        .split('\n')
+        .filter((line: string) => line.trim())
+        .map(parseLogLine)
+        .filter((entry: LogEntry | null): entry is LogEntry => entry !== null);
+      
+      setLogs(entries);
+      setLastLogCount(entries.length);
+      setLastFetched(new Date());
+      
+      // Auto-scroll to bottom for tail mode
+      if (mode === 'tail') {
+        setTimeout(() => {
+          bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+          setIsAtBottom(true);
+        }, 100);
+      }
+    } catch (error) {
+      console.error('Error loading logs:', error);
+      setLogs([]);
+    }
+  };
+
+  useEffect(() => {
+    loadInitialLogs();
+  }, [mode]);
+
+  useEffect(() => {
+    return () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+    };
+  }, []);
+
+  const handleScroll = () => {
+    if (containerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+      const atBottom = scrollTop + clientHeight >= scrollHeight - 10;
+      setIsAtBottom(atBottom);
+    }
+  };
+
+  const filteredLogs = useMemo(() => {
+    return logs;
+  }, [logs]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="bg-white shadow-sm border-b sticky top-0 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-4">
+              <h1 className="text-2xl font-bold text-gray-900">🎯 dev3000</h1>
+              <span className="text-xs text-gray-400 ml-2">(v{version})</span>
+              <span className="text-sm text-gray-500">{logs.length} entries</span>
+            </div>
+            
+            <div className="flex items-center gap-4 text-sm">
+              {/* Mode Toggle */}
+              <div className="flex items-center bg-gray-100 rounded-md p-1">
+                <button
+                  onClick={() => {
+                    setMode('head');
+                    // Scroll to top when switching to head mode
+                    containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+                  }}
+                  className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+                    mode === 'head' 
+                      ? 'bg-white text-gray-900 shadow-sm' 
+                      : 'text-gray-600 hover:text-gray-900'
+                  }`}
+                >
+                  📄 Head
+                </button>
+                <button
+                  onClick={() => setMode('tail')}
+                  className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+                    mode === 'tail' 
+                      ? 'bg-white text-gray-900 shadow-sm' 
+                      : 'text-gray-600 hover:text-gray-900'
+                  }`}
+                >
+                  📺 Tail
+                </button>
+              </div>
+              
+              {/* Live indicator */}
+              <div 
+                className={`flex items-center gap-1 text-green-600 ${
+                  mode === 'tail' && isAtBottom ? 'visible' : 'invisible'
+                }`}
+              >
+                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                <span className="text-xs">Live</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div 
+        ref={containerRef}
+        className="max-w-7xl mx-auto px-4 py-6 pb-14 max-h-screen overflow-y-auto"
+        onScroll={handleScroll}
+      >
+        {filteredLogs.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="text-gray-400 text-lg">📝 No logs yet</div>
+            <div className="text-gray-500 text-sm mt-2">
+              Logs will appear here as your development server runs
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {filteredLogs.map((entry, index) => (
+              <LogEntryComponent key={index} entry={entry} />
+            ))}
+            <div ref={bottomRef} />
+          </div>
+        )}
+      </div>
+      
+      {/* Footer with status and scroll indicator - full width like header */}
+      <div className="py-2 border-t border-gray-200 bg-gray-50 fixed bottom-0 left-0 right-0">
+        <div className="max-w-7xl mx-auto px-4 flex items-center justify-between">
+          <div className="flex items-center">
+            {isLoadingNew && (
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 border border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
+                <span className="text-xs text-gray-500">Loading...</span>
+              </div>
+            )}
+            {!isLoadingNew && isAtBottom && lastFetched && (
+              <span className="text-xs text-gray-400 font-mono">
+                Last updated {lastFetched.toLocaleTimeString()}
+              </span>
+            )}
+          </div>
+          
+          {/* Scroll to bottom button - positioned on the right */}
+          {mode === 'tail' && !isAtBottom && !isLoadingNew && (
+            <button
+              onClick={() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' })}
+              className="flex items-center gap-1 px-2 py-0.5 bg-blue-600 text-white rounded text-xs hover:bg-blue-700"
+            >
+              ↓ Live updates
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+import LogsClient from './LogsClient';
+
+export default function LogsPage() {
+  const version = process.env.DEV_PLAYWRIGHT_VERSION || '0.0.0';
+  
+  return <LogsClient version={version} />;
+}

package/mcp-server/app/page.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <a 
+        href="https://github.com/vercel-labs/dev3000"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed top-4 right-4 text-gray-600 hover:text-gray-900 transition-colors"
+        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"/>
+        </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>
+        
+        <div className="space-y-4">
+          <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 
+            href="/api/mcp/http"
+            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>
+  );
+}