dev3000 0.0.49 → 0.0.51

package/mcp-server/app/replay/ReplayClient.tsx

@@ -1,122 +1,124 @@
-'use client';
+"use client"
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from "react"
 
 interface InteractionEvent {
-  timestamp: string;
-  type: 'CLICK' | 'TAP' | 'SCROLL' | 'KEY';
-  x?: number;
-  y?: number;
-  target?: string;
-  direction?: string;
-  distance?: number;
-  key?: string;
+  timestamp: string
+  type: "CLICK" | "TAP" | "SCROLL" | "KEY"
+  x?: number
+  y?: number
+  target?: string
+  direction?: string
+  distance?: number
+  key?: string
 }
 
 interface NavigationEvent {
-  timestamp: string;
-  url: string;
+  timestamp: string
+  url: string
 }
 
 interface ScreenshotEvent {
-  timestamp: string;
-  url: string;
-  event: string;
+  timestamp: string
+  url: string
+  event: string
 }
 
 interface ReplayData {
-  interactions: InteractionEvent[];
-  navigations: NavigationEvent[];
-  screenshots: ScreenshotEvent[];
-  startTime: string;
-  endTime: string;
-  duration: number;
+  interactions: InteractionEvent[]
+  navigations: NavigationEvent[]
+  screenshots: ScreenshotEvent[]
+  startTime: string
+  endTime: string
+  duration: number
 }
 
 export default function ReplayClient() {
-  const [replayData, setReplayData] = useState<ReplayData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [selectedTimeRange, setSelectedTimeRange] = useState<{
-    start: string;
-    end: string;
-  } | null>(null);
-  const [playbackSpeed, setPlaybackSpeed] = useState(1);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentEventIndex, setCurrentEventIndex] = useState(0);
+  const [replayData, setReplayData] = useState<ReplayData | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [selectedTimeRange, _setSelectedTimeRange] = useState<{
+    start: string
+    end: string
+  } | null>(null)
+  const [playbackSpeed, setPlaybackSpeed] = useState(1)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentEventIndex, setCurrentEventIndex] = useState(0)
 
   const loadReplayData = async () => {
-    setLoading(true);
+    setLoading(true)
     try {
-      const params = new URLSearchParams({ action: 'parse' });
+      const params = new URLSearchParams({ action: "parse" })
       if (selectedTimeRange) {
-        params.set('startTime', selectedTimeRange.start);
-        params.set('endTime', selectedTimeRange.end);
+        params.set("startTime", selectedTimeRange.start)
+        params.set("endTime", selectedTimeRange.end)
       }
-      
-      const response = await fetch(`/api/replay?${params}`);
-      const data = await response.json();
-      
+
+      const response = await fetch(`/api/replay?${params}`)
+      const data = await response.json()
+
       if (response.ok) {
-        setReplayData(data);
+        setReplayData(data)
       } else {
-        console.error('Failed to load replay data:', data.error);
+        console.error("Failed to load replay data:", data.error)
       }
     } catch (error) {
-      console.error('Error loading replay data:', error);
+      console.error("Error loading replay data:", error)
     }
-    setLoading(false);
-  };
+    setLoading(false)
+  }
 
   useEffect(() => {
-    loadReplayData();
-  }, [selectedTimeRange]);
+    loadReplayData()
+  }, [loadReplayData])
 
-  const allEvents = replayData ? [
-    ...replayData.interactions.map(i => ({ ...i, eventType: 'interaction' as const })),
-    ...replayData.navigations.map(n => ({ ...n, eventType: 'navigation' as const }))
-  ].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()) : [];
+  const allEvents = replayData
+    ? [
+        ...replayData.interactions.map((i) => ({ ...i, eventType: "interaction" as const })),
+        ...replayData.navigations.map((n) => ({ ...n, eventType: "navigation" as const }))
+      ].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+    : []
 
   const formatTimestamp = (timestamp: string) => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
+    return new Date(timestamp).toLocaleTimeString()
+  }
 
   const formatDuration = (ms: number) => {
-    const seconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(seconds / 60);
-    return `${minutes}m ${seconds % 60}s`;
-  };
+    const seconds = Math.floor(ms / 1000)
+    const minutes = Math.floor(seconds / 60)
+    return `${minutes}m ${seconds % 60}s`
+  }
 
   const startReplay = async () => {
-    if (!replayData) return;
-    
-    setIsPlaying(true);
-    setCurrentEventIndex(0);
-    
+    if (!replayData) return
+
+    setIsPlaying(true)
+    setCurrentEventIndex(0)
+
     // This is a simplified preview - in a full implementation,
     // this would actually control a browser session
     for (let i = 0; i < allEvents.length; i++) {
-      if (!isPlaying) break;
-      
-      setCurrentEventIndex(i);
-      
-      const event = allEvents[i];
-      const nextEvent = allEvents[i + 1];
-      
+      if (!isPlaying) break
+
+      setCurrentEventIndex(i)
+
+      const event = allEvents[i]
+      const nextEvent = allEvents[i + 1]
+
       if (nextEvent) {
-        const currentTime = new Date(event.timestamp).getTime();
-        const nextTime = new Date(nextEvent.timestamp).getTime();
-        const delay = (nextTime - currentTime) / playbackSpeed;
-        
-        await new Promise(resolve => setTimeout(resolve, Math.min(delay, 5000))); // Cap at 5s
+        const currentTime = new Date(event.timestamp).getTime()
+        const nextTime = new Date(nextEvent.timestamp).getTime()
+        const delay = (nextTime - currentTime) / playbackSpeed
+
+        await new Promise((resolve) => setTimeout(resolve, Math.min(delay, 5000))) // Cap at 5s
       }
     }
-    
-    setIsPlaying(false);
-  };
+
+    setIsPlaying(false)
+  }
 
   const stopReplay = () => {
-    setIsPlaying(false);
-  };
+    setIsPlaying(false)
+  }
 
   if (loading) {
     return (
@@ -126,7 +128,7 @@ export default function ReplayClient() {
           <div className="text-gray-500 text-sm mt-4">Loading replay data...</div>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -145,10 +147,10 @@ export default function ReplayClient() {
                 </div>
               )}
             </div>
-            
+
             <div className="flex items-center gap-2">
-              <select 
-                value={playbackSpeed} 
+              <select
+                value={playbackSpeed}
                 onChange={(e) => setPlaybackSpeed(Number(e.target.value))}
                 className="px-3 py-1 border border-gray-300 rounded text-sm"
               >
@@ -158,7 +160,7 @@ export default function ReplayClient() {
                 <option value={4}>4x</option>
                 <option value={8}>8x</option>
               </select>
-              
+
               {!isPlaying ? (
                 <button
                   onClick={startReplay}
@@ -168,10 +170,7 @@ export default function ReplayClient() {
                   ▶ Play
                 </button>
               ) : (
-                <button
-                  onClick={stopReplay}
-                  className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-                >
+                <button onClick={stopReplay} className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                   ⏹ Stop
                 </button>
               )}
@@ -184,9 +183,7 @@ export default function ReplayClient() {
         {!replayData ? (
           <div className="text-center py-12">
             <div className="text-gray-400 text-lg">No replay data available</div>
-            <div className="text-gray-500 text-sm mt-2">
-              Start using your app to generate interaction data
-            </div>
+            <div className="text-gray-500 text-sm mt-2">Start using your app to generate interaction data</div>
           </div>
         ) : (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -197,27 +194,27 @@ export default function ReplayClient() {
               </div>
               <div className="max-h-96 overflow-y-auto">
                 {allEvents.map((event, index) => (
-                  <div 
+                  <div
                     key={index}
                     className={`px-4 py-2 border-b last:border-b-0 ${
-                      index === currentEventIndex ? 'bg-blue-50 border-blue-200' : ''
+                      index === currentEventIndex ? "bg-blue-50 border-blue-200" : ""
                     }`}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
-                        <span className="text-xs font-mono text-gray-500">
-                          {formatTimestamp(event.timestamp)}
-                        </span>
-                        <span className={`px-2 py-1 rounded text-xs font-medium ${
-                          event.eventType === 'navigation' 
-                            ? 'bg-purple-100 text-purple-800'
-                            : event.type === 'CLICK' 
-                            ? 'bg-green-100 text-green-800'
-                            : event.type === 'SCROLL'
-                            ? 'bg-yellow-100 text-yellow-800'
-                            : 'bg-gray-100 text-gray-800'
-                        }`}>
-                          {event.eventType === 'navigation' ? 'NAV' : event.type}
+                        <span className="text-xs font-mono text-gray-500">{formatTimestamp(event.timestamp)}</span>
+                        <span
+                          className={`px-2 py-1 rounded text-xs font-medium ${
+                            event.eventType === "navigation"
+                              ? "bg-purple-100 text-purple-800"
+                              : event.type === "CLICK"
+                                ? "bg-green-100 text-green-800"
+                                : event.type === "SCROLL"
+                                  ? "bg-yellow-100 text-yellow-800"
+                                  : "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {event.eventType === "navigation" ? "NAV" : event.type}
                         </span>
                       </div>
                       {isPlaying && index === currentEventIndex && (
@@ -225,14 +222,20 @@ export default function ReplayClient() {
                       )}
                     </div>
                     <div className="mt-1 text-sm text-gray-700">
-                      {event.eventType === 'navigation' ? (
+                      {event.eventType === "navigation" ? (
                         <span>→ {event.url}</span>
-                      ) : event.type === 'CLICK' || event.type === 'TAP' ? (
-                        <span>({event.x}, {event.y}) on {event.target}</span>
-                      ) : event.type === 'SCROLL' ? (
-                        <span>{event.direction} {event.distance}px to ({event.x}, {event.y})</span>
-                      ) : event.type === 'KEY' ? (
-                        <span>"{event.key}" in {event.target}</span>
+                      ) : event.type === "CLICK" || event.type === "TAP" ? (
+                        <span>
+                          ({event.x}, {event.y}) on {event.target}
+                        </span>
+                      ) : event.type === "SCROLL" ? (
+                        <span>
+                          {event.direction} {event.distance}px to ({event.x}, {event.y})
+                        </span>
+                      ) : event.type === "KEY" ? (
+                        <span>
+                          "{event.key}" in {event.target}
+                        </span>
                       ) : (
                         <span>{JSON.stringify(event)}</span>
                       )}
@@ -251,16 +254,14 @@ export default function ReplayClient() {
                 {replayData.screenshots.map((screenshot, index) => (
                   <div key={index} className="px-4 py-2 border-b last:border-b-0">
                     <div className="flex items-center justify-between mb-2">
-                      <span className="text-xs font-mono text-gray-500">
-                        {formatTimestamp(screenshot.timestamp)}
-                      </span>
+                      <span className="text-xs font-mono text-gray-500">{formatTimestamp(screenshot.timestamp)}</span>
                       <span className="text-xs text-gray-600">{screenshot.event}</span>
                     </div>
-                    <img 
-                      src={screenshot.url} 
+                    <img
+                      src={screenshot.url}
                       alt={`Screenshot: ${screenshot.event}`}
                       className="w-full rounded border"
-                      style={{ maxHeight: '200px', objectFit: 'contain' }}
+                      style={{ maxHeight: "200px", objectFit: "contain" }}
                     />
                   </div>
                 ))}
@@ -270,5 +271,5 @@ export default function ReplayClient() {
         )}
       </div>
     </div>
-  );
-}
+  )
+}

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

@@ -1,5 +1,5 @@
-import ReplayClient from './ReplayClient';
+import ReplayClient from "./ReplayClient"
 
 export default function ReplayPage() {
-  return <ReplayClient />;
-}
+  return <ReplayClient />
+}

package/mcp-server/next.config.ts

@@ -1,6 +1,8 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  experimental: { reactCompiler: true },
   output: "standalone",
   devIndicators: false,
   turbopack: {

package/mcp-server/package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
-    "start": "next start"
+    "start": "next start",
+    "typegen": "next typegen",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "mcp-handler": "^1.0.2",
@@ -20,6 +22,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/ws": "^8.5.12",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "typescript": "^5.0.0"
   }
-}
+}

package/mcp-server/pnpm-lock.yaml

@@ -10,10 +10,10 @@ importers:
     dependencies:
       mcp-handler:
         specifier: ^1.0.2
-        version: 1.0.2(@modelcontextprotocol/sdk@1.17.5)(next@15.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 1.0.2(@modelcontextprotocol/sdk@1.17.5)(next@15.5.2(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       next:
         specifier: ^15.5.1-canary.13
-        version: 15.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 15.5.2(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: ^18.0.0
         version: 18.3.1
@@ -39,12 +39,27 @@ importers:
       '@types/ws':
         specifier: ^8.5.12
         version: 8.18.1
+      babel-plugin-react-compiler:
+        specifier: 19.1.0-rc.3
+        version: 19.1.0-rc.3
       typescript:
         specifier: ^5.0.0
         version: 5.9.2
 
 packages:
 
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.4':
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
+
   '@emnapi/runtime@1.5.0':
     resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
 
@@ -281,6 +296,9 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
+  babel-plugin-react-compiler@19.1.0-rc.3:
+    resolution: {integrity: sha512-mjRn69WuTz4adL0bXGx8Rsyk1086zFJeKmes6aK0xPuK3aaXmDJdLHqwKKMrpm6KAI1MCoUK72d2VeqQbu8YIA==}
+
   body-parser@2.2.0:
     resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
     engines: {node: '>=18'}
@@ -780,6 +798,15 @@ packages:
 
 snapshots:
 
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/types@7.28.4':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
   '@emnapi/runtime@1.5.0':
     dependencies:
       tslib: 2.8.1
@@ -975,6 +1002,10 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  babel-plugin-react-compiler@19.1.0-rc.3:
+    dependencies:
+      '@babel/types': 7.28.4
+
   body-parser@2.2.0:
     dependencies:
       bytes: 3.1.2
@@ -1209,14 +1240,14 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mcp-handler@1.0.2(@modelcontextprotocol/sdk@1.17.5)(next@15.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  mcp-handler@1.0.2(@modelcontextprotocol/sdk@1.17.5)(next@15.5.2(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       '@modelcontextprotocol/sdk': 1.17.5
       chalk: 5.6.0
       commander: 11.1.0
       redis: 4.7.1
     optionalDependencies:
-      next: 15.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 15.5.2(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
   media-typer@1.1.0: {}
 
@@ -1234,7 +1265,7 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  next@15.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@15.5.2(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 15.5.2
       '@swc/helpers': 0.5.15
@@ -1252,6 +1283,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 15.5.2
       '@next/swc-win32-arm64-msvc': 15.5.2
       '@next/swc-win32-x64-msvc': 15.5.2
+      babel-plugin-react-compiler: 19.1.0-rc.3
       sharp: 0.34.3
     transitivePeerDependencies:
       - '@babel/core'

package/mcp-server/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "es6"
-    ],
+    "lib": ["dom", "dom.iterable", "es6"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,19 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "target": "ES2018"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev3000",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "AI-powered development tools with browser monitoring and MCP server integration",
   "type": "module",
   "main": "dist/index.js",
@@ -18,6 +18,19 @@
     "mcp-server/next-env.d.ts",
     "README.md"
   ],
+  "scripts": {
+    "build": "tsc && mkdir -p dist/src && cp src/loading.html dist/src/",
+    "dev": "tsc --watch",
+    "format": "biome format --write .",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "test": "vitest run",
+    "test-postinstall": "tsx scripts/test-postinstall.ts",
+    "prepare": "husky",
+    "postinstall": "echo 'Starting postinstall...' && cd mcp-server && echo 'Installing mcp-server dependencies...' && timeout 30s pnpm install --no-frozen-lockfile --ignore-scripts && echo 'Postinstall completed successfully!' || echo 'Postinstall failed or timed out, but continuing...'",
+    "release": "./scripts/release.sh",
+    "canary": "./scripts/canary.sh"
+  },
   "keywords": [
     "nextjs",
     "ai",
@@ -56,15 +69,5 @@
     "url": "git+https://github.com/vercel-labs/dev3000.git"
   },
   "author": "Lindsey Simon <lindsey@vercel.com>",
-  "license": "MIT",
-  "scripts": {
-    "build": "tsc && mkdir -p dist/src && cp src/loading.html dist/src/",
-    "dev": "tsc --watch",
-    "format": "biome format --write .",
-    "test": "vitest run",
-    "test-postinstall": "tsx scripts/test-postinstall.ts",
-    "postinstall": "echo 'Starting postinstall...' && cd mcp-server && echo 'Installing mcp-server dependencies...' && timeout 30s pnpm install --no-frozen-lockfile --ignore-scripts && echo 'Postinstall completed successfully!' || echo 'Postinstall failed or timed out, but continuing...'",
-    "release": "./scripts/release.sh",
-    "test-canary": "./scripts/test-canary.sh"
-  }
-}
+  "license": "MIT"
+}