@chinchillaenterprises/mcp-dev-logger 2.3.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,585 +1,225 @@
1
- # MCP Dev Logger v2.3.2
1
+ # MCP Dev Logger v3.0.0
2
2
 
3
- A Model Context Protocol (MCP) server for capturing and streaming development server output with browser console logging, enhanced organization, and automatic cleanup. Perfect for monitoring `npm run dev`, `yarn dev`, `pnpm dev`, or any other development server commands across all frameworks (Next.js, Vite, Create React App, etc.).
3
+ **Simplified Amplify Gen2 Sandbox Logger**
4
4
 
5
- ## 🎉 New in v2.3.2
5
+ A streamlined Model Context Protocol (MCP) server that does one thing well: runs `npx ampx sandbox --stream-function-logs` and captures output to `resources/sandbox.log`.
6
6
 
7
- - **Fixed React Hydration Errors**: Test browser banner now uses shadow DOM and waits for React hydration to complete
8
- - **Hydration-Safe Banner**: Banner injection no longer interferes with Next.js/React hydration process
9
- - **Improved Stability**: Better detection of React readiness before DOM modifications
10
- - **Shadow DOM Isolation**: Test browser banner completely isolated from application DOM
7
+ ## 🎯 What Changed in v3.0.0
11
8
 
12
- ## Previous Features (v2.3.1)
9
+ **MAJOR SIMPLIFICATION**: Removed all complex features to focus on the single use case that matters.
13
10
 
14
- - **Enhanced Error Capture**: Now captures JavaScript errors that don't trigger console.error, including:
15
- - React hydration errors
16
- - Unhandled promise rejections
17
- - Page-level JavaScript errors
18
- - Network request failures (4xx/5xx responses)
19
- - **Visual Error Alerts**: Red banner notification when JavaScript errors occur
20
- - **Better Error Context**: Full stack traces for all JavaScript errors
11
+ **What's Gone:**
12
+ - Browser console capture (Playwright)
13
+ - Multi-process management
14
+ - ❌ Date-based log organization
15
+ - Process IDs and state persistence
16
+ - Custom commands and parameters
17
+ - Frontend/backend/custom process types
18
+ - ❌ All the complexity you never needed
21
19
 
22
- ## Previous Features (v2.3.0)
20
+ **What Remains:**
21
+ - ✅ Single hardcoded command: `npx ampx sandbox --stream-function-logs`
22
+ - ✅ Single log file: `resources/sandbox/sandbox.log` (overwrites each time)
23
+ - ✅ Simple start/stop/tail interface
24
+ - ✅ Smart multi-project detection (kills existing sandbox for THIS project only)
23
25
 
24
- - **One-Click Student Workflow**: New `dev_start_frontend_with_browser` tool that starts server AND launches browser automatically
25
- - **Smart Port Detection**: Automatically detects which port your dev server is using
26
- - **Server Ready Detection**: Waits for server to be fully ready before launching browser
27
- - **Simplified Teaching**: Reduces student setup from 3 commands to just 1
26
+ ## Why This Exists
28
27
 
29
- ## Previous Features (v2.2.0)
28
+ After two months of usage, the pattern was clear:
29
+ - Only ever used for Amplify sandbox streaming logs
30
+ - Never looked at old logs
31
+ - All the organization features were unused overhead
30
32
 
31
- - **Browser Console Capture**: Capture browser console.log, console.error, and other console outputs alongside server logs
32
- - **Unified Log Stream**: See both server-side and client-side logs in one place
33
- - **Student-Friendly Browser**: TEST BROWSER with visual indicators for teaching
33
+ So we stripped it down to the essentials.
34
34
 
35
- ## Previous Features (v2.1.0)
35
+ ## Smart Multi-Project Support
36
36
 
37
- - **Organized Log Structure**: Logs are now organized by process type (frontend/backend/amplify/custom)
38
- - **Automatic Cleanup**: Keeps only the last 3 days of logs to prevent disk space issues
39
- - **Improved File Naming**: Cleaner log file names without redundant prefixes
37
+ The tool intelligently handles multiple projects with running sandboxes:
40
38
 
41
- ## Features
39
+ **How it works:**
40
+ 1. Checks if a sandbox is already running in the current project directory
41
+ 2. If found, **kills it** and starts fresh (prevents stuck sandboxes)
42
+ 3. Only affects the sandbox for THIS project - other projects' sandboxes are untouched
42
43
 
43
- - **Universal Dev Server Logging**: Works with any development server command
44
- - **Browser Console Capture**: Capture console.log, console.error, console.warn from the browser
45
- - **Multi-Process Support**: Run multiple dev servers simultaneously (frontend + backend)
46
- - **Real-time Log Streaming**: Capture build errors, TypeScript errors, hot reload events
47
- - **Organized Log Storage**: Structured as `logs/YYYY-MM-DD/processType/logfile.log`
48
- - **Automatic Log Cleanup**: Removes logs older than 3 days automatically
49
- - **Smart Process Management**: Start, stop, and restart individual dev servers by ID
50
- - **Log Filtering**: Search through logs with grep patterns
51
- - **Framework Agnostic**: One tool for all development servers
52
- - **Auto-Generated Process IDs**: Intelligent process ID generation based on command and output file
53
- - **Process State Persistence**: Maintains process state across server restarts (where possible)
54
- - **Signal Handling**: Proper cleanup with SIGTERM for graceful shutdowns
55
- - **Unified Server + Browser Logs**: See both frontend and backend logs in one stream
44
+ **Why kill instead of reuse?**
45
+ - Sandboxes can get stuck after running a long time
46
+ - File change detection might stop working
47
+ - Fresh start ensures clean deployment state
56
48
 
57
49
  ## Installation
58
50
 
59
- ### From NPM (Recommended)
60
51
  ```bash
61
52
  claude mcp add dev-logger -s user -- npx @chinchillaenterprises/mcp-dev-logger
62
53
  ```
63
54
 
64
- ### For Development/Testing
65
- ```bash
66
- # Clone and build locally
67
- git clone <repository-url>
68
- cd mcp-dev-logger
69
- npm install
70
- npm run build
71
-
72
- # Add to Claude Code (local development)
73
- claude mcp add dev-logger-local -s user -- node $(pwd)/dist/index.js
74
- ```
75
-
76
55
  ## Tools Provided
77
56
 
78
- **Important Note:** When using these tools through Claude Code's MCP integration, the tool names will be prefixed with `mcp__dev-logger__`. For example:
79
- - `dev_start_log_streaming` becomes `mcp__dev-logger__dev_start_log_streaming`
80
- - `dev_tail_logs` becomes `mcp__dev-logger__dev_tail_logs`
81
- - And so on for all tools
82
-
83
- This prefix pattern applies to all MCP servers and helps Claude distinguish between different servers' tools.
57
+ ### 1. `dev_start_sandbox`
58
+ Start Amplify Gen2 sandbox with streaming function logs. No parameters needed.
84
59
 
85
- ### 1. dev_start_log_streaming
86
- Start a development server and stream its output to a log file. **Supports multiple concurrent processes.**
60
+ **What it does:**
61
+ - Checks if a sandbox is already running in THIS project directory
62
+ - If found, kills it first (prevents stuck sandboxes)
63
+ - Starts `npx ampx sandbox --stream-function-logs`
64
+ - Clears/overwrites `resources/sandbox/sandbox.log`
65
+ - Streams all output (stdout + stderr) to the log file
66
+ - Adds timestamps to every log line
87
67
 
88
- **Parameters:**
89
- - `command` (optional): Dev command to run (default: "npm run dev")
90
- - `outputFile` (optional): File to write logs to (default: "dev-server-logs.txt")
91
- - `processId` (optional): Custom process ID (auto-generated if not provided)
92
- - `cwd` (optional): Working directory
93
- - `env` (optional): Environment variables to pass
68
+ **Multi-project safe:** Only kills/affects sandboxes running in the current directory
94
69
 
95
- **Example:**
96
- ```json
97
- {
98
- "command": "npm run dev",
99
- "outputFile": "frontend-logs.txt",
100
- "cwd": "/path/to/project",
101
- "env": {
102
- "PORT": "3001",
103
- "NODE_ENV": "development"
104
- }
105
- }
70
+ **Usage:**
71
+ ```typescript
72
+ dev_start_sandbox()
106
73
  ```
107
74
 
108
- ### 2. dev_list_processes
109
- List all running development processes with their status and details.
110
-
111
- **No parameters required.**
112
-
113
- ### 3. dev_stop_log_streaming
114
- Stop development server(s) and logging.
115
-
116
- **Parameters:**
117
- - `processId` (optional): Process ID to stop (if not provided, stops all processes)
118
-
119
- ### 4. dev_restart_log_streaming
120
- Restart a specific development server (useful when it crashes or hangs).
121
-
122
- **Parameters:**
123
- - `processId` (required): Process ID to restart
124
- - `clearLogs` (optional): Whether to clear the log file on restart (default: false)
125
-
126
- ### 5. dev_get_status
127
- Check if development server(s) are running and get their status.
128
-
129
- **Parameters:**
130
- - `processId` (optional): Process ID to get status for (if not provided, shows all processes)
131
-
132
75
  **Returns:**
133
- - Running status
134
- - Process ID(s)
135
- - PID(s)
136
- - Uptime
137
- - Current command(s)
138
- - Log file location(s)
139
-
140
- ### 6. dev_tail_logs
141
- Get the last N lines from the log file.
142
-
143
- **Parameters:**
144
- - `processId` (optional): Process ID to tail logs from (smart fallback for single process)
145
- - `lines` (optional): Number of lines to return (default: 50)
146
- - `filter` (optional): Grep pattern to filter logs
147
-
148
- **Example:**
149
76
  ```json
150
77
  {
151
- "processId": "npm-frontend",
152
- "lines": 100,
153
- "filter": "ERROR"
78
+ "success": true,
79
+ "message": "Amplify sandbox started. Logs are being written to /path/to/project/resources/sandbox/sandbox.log",
80
+ "logFile": "/path/to/project/resources/sandbox/sandbox.log"
154
81
  }
155
82
  ```
156
83
 
157
- ### 7. dev_clear_logs
158
- Clear the log file.
159
-
160
- **Parameters:**
161
- - `processId` (optional): Process ID to clear logs for (smart fallback for single process)
162
- - `backup` (optional): Whether to backup logs before clearing (default: false)
163
-
164
- ### 8. dev_launch_test_browser
165
- Launch a TEST BROWSER for students to interact with. All console logs from this browser are captured automatically. Students should use THIS browser (not their regular browser) to test their app.
166
-
167
- **Parameters:**
168
- - `processId` (optional): Process ID to attach browser console to
169
- - `browserUrl` (optional): URL to open in test browser (default: http://localhost:3000)
170
- - `teachingMode` (optional): Enable teaching mode with DevTools open and slower actions (default: true)
171
- - `viewport` (optional): Browser window size (default: { width: 1280, height: 800 })
172
- - `highlightErrors` (optional): Add visual indicator when console errors occur (default: true)
173
-
174
- **Key Features:**
175
- - 🪟 Always visible browser window (not headless)
176
- - 🔍 DevTools automatically open in teaching mode
177
- - 🐌 Slower actions for easier teaching/learning
178
- - ⚡ Red flash on console errors
179
- - 📝 Green banner showing "TEST BROWSER" status
180
- - 🎯 All console logs captured to the same log file as server logs
181
-
182
- **Example:**
84
+ Or if it killed an existing sandbox:
183
85
  ```json
184
86
  {
185
- "processId": "npm-frontend",
186
- "browserUrl": "http://localhost:3000",
187
- "teachingMode": true,
188
- "highlightErrors": true
87
+ "success": true,
88
+ "message": "Killed existing sandbox (PID: 12345) and started fresh. Logs are being written to /path/to/project/resources/sandbox/sandbox.log",
89
+ "logFile": "/path/to/project/resources/sandbox/sandbox.log",
90
+ "killedPid": 12345
189
91
  }
190
92
  ```
191
93
 
192
- ### 9. dev_stop_browser_console
193
- Stop browser console capture for a specific process.
94
+ ### 2. `dev_stop_sandbox`
95
+ Stop the running Amplify sandbox process. No parameters needed.
194
96
 
195
- **Parameters:**
196
- - `processId` (optional): Process ID to stop browser console capture for
197
-
198
- ### 10. dev_start_frontend_with_browser 🚀 NEW in v2.3.0!
199
- **ONE-CLICK STUDENT WORKFLOW**: Start frontend server AND automatically launch test browser when ready. Perfect for teaching environments - reduces setup from 3 commands to 1!
97
+ **Usage:**
98
+ ```typescript
99
+ dev_stop_sandbox()
100
+ ```
200
101
 
201
- **Parameters:**
202
- - `command` (optional): Dev command to run (default: "npm run dev")
203
- - `port` (optional): Port to wait for (default: auto-detect from output)
204
- - `waitTimeout` (optional): Max time to wait for server in ms (default: 30000)
205
- - `browserDelay` (optional): Delay after server ready in ms (default: 1000)
206
- - `teachingMode` (optional): Enable teaching features (default: true)
207
- - `processId` (optional): Custom process ID (default: "frontend-with-browser")
208
- - `env` (optional): Environment variables
209
- - `cwd` (optional): Working directory
210
-
211
- **Key Features:**
212
- - 🎯 Automatically detects when server is ready
213
- - 🪟 Launches test browser with DevTools open
214
- - 📝 Captures both server AND browser console logs
215
- - ⚡ Red flash on browser errors
216
- - 🧪 Green "TEST BROWSER" banner
217
- - ⏱️ Single command instead of multiple steps
218
-
219
- **Example:**
102
+ **Returns:**
220
103
  ```json
221
104
  {
222
- "command": "npm run dev",
223
- "teachingMode": true,
224
- "processId": "student-project"
105
+ "success": true,
106
+ "message": "Amplify sandbox stopped successfully."
225
107
  }
226
108
  ```
227
109
 
228
- **Success Output:**
229
- ```
230
- ✅ Starting development server...
231
- ✅ Server ready on http://localhost:3000
232
- ✅ Launching test browser...
233
-
234
- 🎯 TEST BROWSER LAUNCHED!
110
+ ### 3. `dev_tail_sandbox_logs`
111
+ Get the last N lines from the sandbox log file.
235
112
 
236
- 👉 Use the browser window that just opened (with green banner)
237
- 📝 All console logs are being saved
238
- 🔍 DevTools is open for debugging
239
- ⚠️ Errors will flash red on screen
240
-
241
- Happy debugging! 🚀
242
- ```
243
-
244
- ## Usage Examples
113
+ **Parameters:**
114
+ - `lines` (optional): Number of lines to return (default: 50)
245
115
 
246
- ### Multi-Process Development (v2.0.0)
116
+ **Usage:**
247
117
  ```typescript
248
- // Start frontend and backend simultaneously
249
- dev_start_log_streaming({
250
- "command": "npm run dev",
251
- "outputFile": "frontend.log",
252
- "processId": "frontend"
253
- })
254
-
255
- dev_start_log_streaming({
256
- "command": "npx ampx sandbox --stream-function-logs",
257
- "outputFile": "backend.log",
258
- "processId": "backend"
259
- })
260
-
261
- // List all running processes
262
- dev_list_processes()
118
+ // Get last 50 lines (default)
119
+ dev_tail_sandbox_logs()
263
120
 
264
- // Stop just the frontend
265
- dev_stop_log_streaming({ "processId": "frontend" })
266
-
267
- // Restart backend with clean logs
268
- dev_restart_log_streaming({
269
- "processId": "backend",
270
- "clearLogs": true
271
- })
121
+ // Get last 100 lines
122
+ dev_tail_sandbox_logs({ "lines": 100 })
272
123
  ```
273
124
 
274
- ### Start Next.js Development Server
275
- ```typescript
276
- // Start Next.js dev server
125
+ **Returns:**
126
+ ```json
277
127
  {
278
- "command": "npm run dev",
279
- "outputFile": "nextjs-dev.log"
128
+ "success": true,
129
+ "logs": "[2025-10-02T12:34:56.789Z] Starting Amplify sandbox: npx ampx sandbox --stream-function-logs\n[2025-10-02T12:34:57.890Z] Amplify Gen 2 sandbox starting...\n..."
280
130
  }
281
131
  ```
282
132
 
283
- ### Monitor Vite Dev Server
284
- ```typescript
285
- // Start Vite with custom port
286
- {
287
- "command": "vite --port 3001",
288
- "outputFile": "vite-dev.log",
289
- "env": {
290
- "NODE_ENV": "development"
291
- }
292
- }
293
- ```
133
+ ## Typical Workflow
294
134
 
295
- ### Check for TypeScript Errors
296
135
  ```typescript
297
- // Tail logs filtering for TypeScript errors
298
- {
299
- "lines": 200,
300
- "filter": "TS\\d+"
301
- }
302
- ```
136
+ // 1. Start the sandbox
137
+ dev_start_sandbox()
303
138
 
304
- ### Debug Build Errors
305
- ```typescript
306
- // Get recent errors from build process
307
- {
308
- "lines": 100,
309
- "filter": "ERROR|FAILED|error"
310
- }
311
- ```
139
+ // 2. Work on your code...
140
+ // Sandbox is running and streaming logs to resources/sandbox/sandbox.log
312
141
 
313
- ## Log Organization (v2.1.0+)
142
+ // 3. Check recent logs when something goes wrong
143
+ dev_tail_sandbox_logs({ "lines": 100 })
314
144
 
315
- Logs are organized in a structured directory hierarchy:
316
-
317
- ```
318
- logs/
319
- ├── 2025-07-10/ # Date folder (YYYY-MM-DD)
320
- │ ├── frontend/ # Process type folder
321
- │ │ ├── nextjs-14-32-15.log
322
- │ │ └── vite-16-45-22.log
323
- │ ├── backend/
324
- │ │ ├── express-14-33-01.log
325
- │ │ └── api-15-22-11.log
326
- │ └── amplify/
327
- │ └── sandbox-14-35-22.log
328
- └── 2025-07-09/ # Older logs (auto-removed after 3 days)
329
- └── ...
145
+ // 4. Stop when done
146
+ dev_stop_sandbox()
330
147
  ```
331
148
 
332
- ## Log Format
333
-
334
- Logs are written with timestamps, process IDs, and error markers. Browser console logs are prefixed with [BROWSER]:
149
+ ## AI Assistant Usage
335
150
 
336
- ```
337
- [2024-01-15T10:30:45.123Z] Starting: npm run dev (Process ID: npm-frontend)
338
- [2024-01-15T10:30:46.456Z] [npm-frontend] > my-app@1.0.0 dev
339
- [2024-01-15T10:30:46.457Z] [npm-frontend] > next dev
340
- [2024-01-15T10:30:47.123Z] [npm-frontend] Next.js 14.0.0
341
- [2024-01-15T10:30:47.124Z] [npm-frontend] - Local: http://localhost:3000
342
- [2024-01-15T10:30:48.789Z] [npm-frontend] [ERROR] Error: Cannot find module './components/Header'
343
- [2024-01-15T10:30:49.123Z] [npm-frontend] [BROWSER] Console capture started for http://localhost:3000
344
- [2024-01-15T10:30:49.456Z] [npm-frontend] [BROWSER] [LOG] React DevTools detected
345
- [2024-01-15T10:30:49.789Z] [npm-frontend] [BROWSER] [WARN] React: Each child should have a unique key prop
346
- [2024-01-15T10:30:50.123Z] [npm-frontend] [BROWSER] [ERROR] Failed to fetch /api/user: 404 Not Found
347
- [2024-01-15T10:30:50.456Z] [npm-frontend] [BROWSER] [LOG] { user: null, loading: false }
348
-
349
- [2024-01-15T10:30:50.123Z] Starting: npx ampx sandbox --stream-function-logs (Process ID: npx-backend)
350
- [2024-01-15T10:30:51.456Z] [npx-backend] [INFO] Amplify sandbox starting...
351
- [2024-01-15T10:30:52.123Z] [npx-backend] Process exited with code 0 and signal null
352
- ```
151
+ When you tell Claude Code to "use dev logger", it will:
152
+ 1. Call `dev_start_sandbox()` to start streaming (kills existing sandbox if found)
153
+ 2. Logs are captured automatically to `resources/sandbox/sandbox.log`
154
+ 3. Claude can call `dev_tail_sandbox_logs()` to check for errors
155
+ 4. Calls `dev_stop_sandbox()` when you're done
353
156
 
354
- ### Process ID Generation
355
- The server automatically generates intelligent process IDs based on the command and output file:
356
- - Command: `npm run dev` + Output: `frontend.log` → Process ID: `npm-frontend`
357
- - Command: `npx ampx sandbox --stream-function-logs` + Output: `backend.log` → Process ID: `npx-backend`
358
- - Duplicate IDs are automatically suffixed with `-1`, `-2`, etc.
359
-
360
- ## Common Use Cases
157
+ ## Log Format
361
158
 
362
- ### 1. Debugging Build Failures
363
- ```bash
364
- # Start dev server
365
- dev_start_log_streaming
159
+ Logs are timestamped and include error markers:
366
160
 
367
- # When build fails, check recent errors
368
- dev_tail_logs { "filter": "ERROR", "lines": 100 }
369
161
  ```
370
-
371
- ### 2. Monitoring TypeScript Compilation
372
- ```bash
373
- # Start with TypeScript focus
374
- dev_start_log_streaming { "command": "npm run dev", "outputFile": "ts-errors.log" }
375
-
376
- # Check for TS errors
377
- dev_tail_logs { "filter": "TS\\d+|typescript", "lines": 50 }
162
+ [2025-10-02T12:34:56.789Z] Starting Amplify sandbox: npx ampx sandbox --stream-function-logs
163
+ [2025-10-02T12:34:57.890Z] Amplify Gen 2 sandbox starting...
164
+ [2025-10-02T12:34:58.123Z] [INFO] Deploying stack...
165
+ [2025-10-02T12:35:00.456Z] [ERROR] Failed to deploy: Invalid configuration
166
+ [2025-10-02T12:35:01.789Z] Amplify sandbox exited with code 1 and signal null
378
167
  ```
379
168
 
380
- ### 3. Port Conflicts
381
- ```bash
382
- # Start on different port
383
- dev_start_log_streaming {
384
- "command": "npm run dev",
385
- "env": { "PORT": "3001" }
386
- }
387
- ```
169
+ ## Requirements
388
170
 
389
- ### 4. Clean Restart After Crash
390
- ```bash
391
- # Restart and clear old logs
392
- dev_restart_log_streaming { "clearLogs": true }
393
- ```
171
+ - Node.js 18+
172
+ - AWS Amplify Gen2 project
173
+ - A `resources/` folder in your repo (created automatically if missing)
394
174
 
395
- ### 5. Amplify Development Workflow
396
- ```bash
397
- # Start Amplify backend logging
398
- dev_start_log_streaming {
399
- "command": "npx ampx sandbox --stream-function-logs",
400
- "outputFile": "backend-logs.txt",
401
- "processId": "amplify-backend"
402
- }
175
+ ## Migration from v2.x
403
176
 
404
- # Monitor Lambda function logs
405
- dev_tail_logs { "processId": "amplify-backend", "filter": "ERROR|WARN", "lines": 100 }
406
- ```
177
+ If you were using the old version:
407
178
 
408
- ### 6. Student Testing Workflow (v2.2.0)
179
+ **Before (v2.x):**
409
180
  ```typescript
410
- // Step 1: Start the student's dev server
411
181
  dev_start_log_streaming({
412
- "command": "npm run dev",
413
- "processId": "student-app"
414
- })
415
-
416
- // Step 2: Launch the TEST BROWSER for the student
417
- dev_launch_test_browser({
418
- "processId": "student-app",
419
- "browserUrl": "http://localhost:3000",
420
- "teachingMode": true // DevTools open, slower actions
421
- })
422
-
423
- // Step 3: Tell student: "Use the TEST BROWSER window that just opened!"
424
- // They click buttons, fill forms, trigger errors - ALL console logs are captured
425
-
426
- // Step 4: When student says "I clicked submit and nothing happened"
427
- dev_tail_logs({
428
- "processId": "student-app",
429
- "filter": "\\[BROWSER\\].*\\[ERROR\\]",
430
- "lines": 20
431
- })
432
- // Shows: [BROWSER] [ERROR] Cannot read property 'name' of undefined
433
-
434
- // Step 5: Show all browser activity
435
- dev_tail_logs({
436
- "processId": "student-app",
437
- "filter": "\\[BROWSER\\]",
438
- "lines": 50
182
+ "command": "npx ampx sandbox --stream-function-logs",
183
+ "outputFile": "backend-logs.txt",
184
+ "processId": "amplify-backend",
185
+ "structuredLogging": true,
186
+ "sessionDate": "2025-10-02"
439
187
  })
440
-
441
- // Step 6: When done testing
442
- dev_stop_browser_console({ "processId": "student-app" })
443
188
  ```
444
189
 
445
- **What Students See:**
446
- - A browser window opens with "🧪 TEST BROWSER" banner
447
- - DevTools is already open to the Console tab
448
- - When errors occur, the browser flashes red
449
- - All their console.log() statements are captured
450
- - They can debug using the actual browser they're testing in
451
-
452
- ### Tips for Instructors/TAs:
453
- 1. **Always emphasize**: Students must use the TEST BROWSER, not their regular browser
454
- 2. **Common mistake**: Students open localhost:3000 in their regular Chrome - no logs captured!
455
- 3. **Quick check**: Look for [BROWSER] prefix in logs to confirm they're using test browser
456
- 4. **Teaching moment**: Show how server errors appear without [BROWSER] prefix
457
- 5. **Debugging together**: The red flash makes it easy to spot when errors occur
458
-
459
- ### 7. Simplified One-Click Workflow (v2.3.0) 🎯
460
- The new `dev_start_frontend_with_browser` combines steps 1 and 2 above into a single command:
461
-
190
+ **Now (v3.0):**
462
191
  ```typescript
463
- // BEFORE (v2.2.0): Two separate commands
464
- dev_start_log_streaming({ "command": "npm run dev", "processId": "student-app" })
465
- // Wait for server to start...
466
- dev_launch_test_browser({ "processId": "student-app" })
467
-
468
- // NOW (v2.3.0): Single command does everything!
469
- dev_start_frontend_with_browser({
470
- "command": "npm run dev",
471
- "processId": "student-project",
472
- "teachingMode": true
473
- })
474
- // Server starts, waits for ready, then browser launches automatically!
192
+ dev_start_sandbox()
475
193
  ```
476
194
 
477
- **Benefits for Students:**
478
- - 🚀 One command instead of two
479
- - ⏱️ No need to wait and guess when server is ready
480
- - 🎯 Browser launches at the perfect time
481
- - 📝 All logs in one place from the start
482
- - 🔧 Less chance for mistakes
483
-
484
- **Common Student Scenarios:**
485
-
486
- ```typescript
487
- // Scenario 1: React app on default port
488
- dev_start_frontend_with_browser()
489
- // That's it! Uses all smart defaults
490
-
491
- // Scenario 2: Vite app with custom command
492
- dev_start_frontend_with_browser({
493
- "command": "npm run dev -- --host",
494
- "processId": "vite-project"
495
- })
496
-
497
- // Scenario 3: Next.js on different port
498
- dev_start_frontend_with_browser({
499
- "command": "npm run dev",
500
- "port": 3001, // If auto-detect fails
501
- "env": { "PORT": "3001" }
502
- })
503
-
504
- // Scenario 4: Quick demo mode (no DevTools)
505
- dev_start_frontend_with_browser({
506
- "teachingMode": false // Faster, no DevTools
507
- })
508
- ```
195
+ That's it. No parameters, no configuration, just works.
509
196
 
510
197
  ## Troubleshooting
511
198
 
512
- ### Dev Server Not Starting
513
- 1. Check the log file for error messages
514
- 2. Verify the command works when run directly in terminal
515
- 3. Check working directory is correct
516
- 4. Ensure all dependencies are installed
517
-
518
- ### Logs Not Appearing
519
- 1. Check the output file path is writable
520
- 2. Some frameworks buffer output - logs may appear in chunks
521
- 3. Use `dev_get_status` to verify server is running
522
-
523
- ### Process Won't Stop
524
- 1. Use `dev_stop_log_streaming` first
525
- 2. If that fails, the process may have crashed - check system process manager
526
- 3. Restart Claude Code to clean up orphaned processes
527
-
528
- ## Implementation Details
199
+ ### Sandbox won't start
200
+ - Make sure you're in an Amplify Gen2 project directory
201
+ - Check that `npx ampx` is available
202
+ - Verify AWS credentials are configured
529
203
 
530
- ### Process Management
531
- - Uses Node.js `spawn` with `detached: true` for proper process isolation
532
- - Implements graceful shutdown with SIGTERM signals
533
- - Automatically removes event listeners on process termination to prevent memory leaks
534
- - Attempts to kill process groups (`-pid`) to handle child processes
204
+ ### Logs not appearing
205
+ - Check that `resources/` folder exists (created automatically)
206
+ - Use `dev_tail_sandbox_logs()` to verify logs are being written
535
207
 
536
- ### State Persistence
537
- - Saves process state to `${tmpdir}/mcp-dev-logger.json`
538
- - Restores process information on server restart (where possible)
539
- - Handles process cleanup on server shutdown
540
-
541
- ### Log Streaming
542
- - Real-time streaming of both stdout and stderr
543
- - Timestamped log entries with process ID tagging
544
- - Error entries are clearly marked with `[ERROR]` prefix
545
- - Supports concurrent logging from multiple processes to different files
546
-
547
- ## Limitations
548
-
549
- - Process management is best-effort - some processes may not respond to signals
550
- - Very large log files may impact performance of `dev_tail_logs`
551
- - Only captures server-side console output (not browser console logs)
552
- - Process state restoration is limited after server restarts (PIDs become invalid)
208
+ ### Process won't stop
209
+ - Call `dev_stop_sandbox()` again
210
+ - If still stuck, restart Claude Code
211
+ - The process will be cleaned up automatically
553
212
 
554
213
  ## Development
555
214
 
556
- ### Building
557
215
  ```bash
216
+ # Build
558
217
  npm run build
559
- ```
560
218
 
561
- ### Watch Mode
562
- ```bash
563
- npm run dev
564
- ```
565
-
566
- ### Testing
567
- ```bash
568
- # Test with local installation
219
+ # Install locally for testing
569
220
  claude mcp add dev-logger-test -s user -- node $(pwd)/dist/index.js
570
-
571
- # Start Claude and test tools
572
- claude
573
- > /mcp # Check if server is connected
574
221
  ```
575
222
 
576
- ## Contributing
577
-
578
- 1. Fork the repository
579
- 2. Create feature branch
580
- 3. Make changes and test thoroughly
581
- 4. Submit pull request with clear description
582
-
583
223
  ## License
584
224
 
585
225
  MIT License - see LICENSE file for details.
@@ -589,4 +229,3 @@ MIT License - see LICENSE file for details.
589
229
  For issues and questions:
590
230
  - Open an issue in the repository
591
231
  - Check existing issues for similar problems
592
- - Include log samples when reporting bugs