How do I install the Dev Log Monitoring skill?

Run npx skillmds add majiayu000/dev-log-monitoring in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Dev Log Monitoring skill do?

This skill should be used when testing ScreenGraph end-to-end flows (drift detection, agent runs) while monitoring backend and frontend logs in real-time. Use when the user wants to observe system behavior across services, debug live runs, or verify event streaming. It is listed under Web & Frontend on SkillMD.

Is Dev Log Monitoring safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dev Log Monitoring?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dev Log Monitoring free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dev Log Monitoring?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dev Log Monitoring by majiayu000 — Agent Skill

Name: Dev Log Monitoring
Rating: 4.5 (4 reviews)
Author: majiayu000

Dev Log Monitoring

Overview

Monitor backend (Encore.ts) and frontend (SvelteKit) logs during ScreenGraph development and testing. This skill provides a systematic workflow for starting services, capturing logs, navigating the app with Playwright MCP, and analyzing the complete event flow after execution.

Workflow Decision Tree

Use this skill when:

Testing drift detection end-to-end flow
Debugging agent runs and observing state transitions
Verifying WebSocket event streaming (run events + graph events)
Analyzing performance metrics across services
Troubleshooting backend/frontend integration issues

Do NOT use this skill when:

Writing unit tests (use backend-testing skill)
Debugging specific backend services (use backend-debugging skill)
Writing E2E tests (use webapp-testing skill)

Step 1: Start Services with Log Capture

1.1 Start Backend with Logs

Start Encore backend and pipe logs to a temporary file for later analysis:

cd /path/to/ScreenGraph/backend && encore run 2>&1 | tee /tmp/backend-logs.txt &

Wait for backend health check:

sleep 8 && curl -s http://localhost:4000/health

Expected response:

{"status":"healthy","database":"connected","timestamp":"..."}

1.2 Start Frontend with Logs

Start SvelteKit frontend and pipe logs to a temporary file:

cd /path/to/ScreenGraph/frontend && bun run dev 2>&1 | tee /tmp/frontend-logs.txt &

Wait for frontend to be ready:

sleep 5 && curl -s http://localhost:5173 | head -n 1

Expected response:

<!doctype html>

1.3 Verify Services Are Running

Check both services are healthy:

# Backend
curl -s http://localhost:4000/health

# Frontend
curl -s http://localhost:5173 | head -n 1

Step 2: Navigate and Execute Flow with Playwright MCP

2.1 Navigate to Application

Use Playwright MCP to open the app:

mcp_playwright_browser_navigate(url: "http://localhost:5173")

2.2 Trigger Drift Detection

Click the "Detect My First Drift" button:

mcp_playwright_browser_click(
  element: "Detect My First Drift button",
  ref: [element_ref_from_snapshot]
)

Handle any alerts if backend wasn't ready:

mcp_playwright_browser_handle_dialog(accept: true)

2.3 Navigate to Run Page

The frontend should automatically redirect to /run/[runId]. If not:

mcp_playwright_browser_navigate(url: "http://localhost:5173/run/[runId]")

2.4 Verify Page State

Get current page snapshot to verify run page loaded:

mcp_playwright_browser_snapshot()

Look for:

Run Timeline heading with runId
Discovered Screens section
Graph Events section
Run Events timeline

2.5 Check Browser Console and Network

Monitor frontend activity:

mcp_playwright_browser_console_messages()
mcp_playwright_browser_network_requests()

Look for:

[Graph Stream] WebSocket opened
[Graph Stream] Received event from stream
Screenshot fetch: GET /artifacts/content?refId=obj://...
WebSocket upgrade status: 101 (successful)

Step 3: Monitor Real-Time Logs

3.1 Check Backend Logs for Agent Flow

Grep for agent state machine activity:

tail -100 /tmp/backend-logs.txt | grep -E "(agent|graph|screenshot|drift)" -i

Key patterns to look for (see references/log_patterns.md for complete list):

Agent Nodes:

INF Node started actor=orchestrator nodeName=EnsureDevice
INF Node finished actor=orchestrator nodeName=EnsureDevice outcomeStatus=SUCCESS
INF Node started actor=orchestrator nodeName=ProvisionApp
INF Node started actor=orchestrator nodeName=LaunchOrAttach
INF Node started actor=orchestrator nodeName=Perceive
INF Node started actor=orchestrator nodeName=WaitIdle
INF Node started actor=orchestrator nodeName=Stop

Event Recording:

INF Event recorded: agent.run.started eventSeq=1
INF Event recorded: agent.event.screenshot_captured
INF Event recorded: agent.event.screen_perceived
INF Event recorded: agent.run.finished

Graph Projection:

INF Projection batch processed projectedScreens=1
INF Backfill complete runEventsCount=23 graphOutcomesCount=1

3.2 Check Frontend Logs

Grep for Vite and WebSocket activity:

tail -50 /tmp/frontend-logs.txt

Look for:

VITE v6.4.1 ready in [N] ms
[vite] connected
No repeated connection errors

Step 4: Analyze Complete Flow After Run Completes

4.1 Extract Agent Flow Timeline

Get full agent execution timeline with timestamps:

grep -E "5:07PM" /tmp/backend-logs.txt | grep -E "(Node started|Node finished|Event recorded)" | head -50

4.2 Verify Event Sequence

Check all events were recorded in order:

grep "Event recorded:" /tmp/backend-logs.txt | grep "5:07PM"

Expected sequence:

agent.run.started (seq=1)
agent.node.started for each node
Device/Appium health checks
agent.event.screenshot_captured
agent.event.ui_hierarchy_captured
agent.event.screen_perceived
graph.screen.discovered (graph event)
agent.run.finished (final)

4.3 Extract Run Metrics

Look for Stop node output with final metrics:

grep "Stop OUTPUT" /tmp/backend-logs.txt | grep "5:07PM"

Example output:

metrics={"runDurationInMilliseconds":5326,"totalIterationsExecuted":5,"uniqueActionsPersistedCount":0,"uniqueScreensDiscoveredCount":0}

4.4 Check Stream Backfill

Verify both streams delivered all events:

grep "Backfill complete" /tmp/backend-logs.txt | grep "5:07PM"

Expected:

Run stream: runEventsCount=23
Graph stream: graphOutcomesCount=1

4.5 Verify Screenshot Storage

Check artifacts were stored:

grep "screenshot" /tmp/backend-logs.txt | grep "5:07PM"

Look for artifact reference like:

obj://artifacts/[runId]/screenshot/[hash].png

Step 5: Generate Summary Report

5.1 Print Complete Flow Summary

Create a comprehensive summary with:

Run Metadata: runId, app package, duration, status
Agent State Machine Flow: All node transitions with timestamps
Graph Projection: Screens discovered, hashes computed
Streaming Architecture: Event counts, WebSocket status
Frontend Activity: Console logs, network requests
Metrics: Budget usage, counters, errors

Example summary structure:

═══════════════════════════════════════════════════════════════════
🎯 DRIFT DETECTION FLOW - COMPLETE LOG SUMMARY
═══════════════════════════════════════════════════════════════════

Run ID: [runId]
App: [package]
Duration: [duration]
Status: ✅ COMPLETED

─────────────────────────────────────────────────────────────────
📊 AGENT STATE MACHINE FLOW
─────────────────────────────────────────────────────────────────

Step 1: EnsureDevice ([start] → [end])
  ✅ Device check: [deviceId] online
  ✅ Appium health check: port 4723 healthy

Step 2: ProvisionApp ([start] → [end])
  ✅ App install check: [package] already installed

[... continue for all nodes ...]

─────────────────────────────────────────────────────────────────
🎨 GRAPH PROJECTION
─────────────────────────────────────────────────────────────────

✅ [N] screen(s) discovered
✅ Hashes: [hash1], [hash2], ...
✅ Screenshots stored

─────────────────────────────────────────────────────────────────
📡 STREAMING ARCHITECTURE
─────────────────────────────────────────────────────────────────

Run Events: [N] events backfilled
Graph Events: [N] events backfilled
WebSocket: ✅ Connected

─────────────────────────────────────────────────────────────────
🌐 FRONTEND ACTIVITY
─────────────────────────────────────────────────────────────────

Console Logs:
  - [LOG] [Graph Stream] WebSocket opened
  - [LOG] [Graph Stream] Received event: graph.screen.discovered

Network:
  - Screenshot fetch: ✅ 200 OK
  - WebSocket upgrade: ✅ 101

─────────────────────────────────────────────────────────────────
📈 METRICS
─────────────────────────────────────────────────────────────────

Steps: [N]
Screens: [N]
Errors: [N]
Duration: [N]ms

Step 6: Cleanup

6.1 Stop Services (Optional)

If needed to stop services:

# Kill backend
pkill -f "encore run"

# Kill frontend
pkill -f "vite"

6.2 Preserve Logs (Optional)

If logs need to be saved for later analysis:

# Copy logs to permanent location
cp /tmp/backend-logs.txt ./logs/backend-run-$(date +%Y%m%d-%H%M%S).txt
cp /tmp/frontend-logs.txt ./logs/frontend-run-$(date +%Y%m%d-%H%M%S).txt

Troubleshooting

Backend Not Responding

Symptom: Failed to load resource: net::ERR_CONNECTION_REFUSED @ http://localhost:4000/

Fix:

# Check if encore is running
ps aux | grep "encore run"

# Restart if needed
cd backend && encore run 2>&1 | tee /tmp/backend-logs.txt &
sleep 8 && curl -s http://localhost:4000/health

Frontend Dev Server Crashed

Symptom: WebSocket connection to 'ws://localhost:5173/' failed

Fix:

# Kill existing processes
pkill -f "vite"

# Restart frontend
cd frontend && bun run dev 2>&1 | tee /tmp/frontend-logs.txt &
sleep 5

No Events in Stream

Symptom: Run page shows "0 events"

Check:

# Look for event recording in backend logs
grep "Event recorded:" /tmp/backend-logs.txt

# Check if run actually started
grep "agent.run.started" /tmp/backend-logs.txt

Graph Not Projecting Screens

Symptom: projectedScreens=0 in all projection logs

Check:

# Verify graph service is loaded
curl -s http://localhost:4000/graph/diagnostics

# Check if screen perceived event was emitted
grep "agent.event.screen_perceived" /tmp/backend-logs.txt

Resources

references/log_patterns.md

Complete reference of all log patterns, event types, and metrics to watch for across backend and frontend services. Load this when analyzing specific log patterns or troubleshooting issues.

Dev Log Monitoring

File contents

Dev Log Monitoring

Overview

Workflow Decision Tree

Step 1: Start Services with Log Capture

1.1 Start Backend with Logs

1.2 Start Frontend with Logs

1.3 Verify Services Are Running

Step 2: Navigate and Execute Flow with Playwright MCP

2.1 Navigate to Application

2.2 Trigger Drift Detection

2.3 Navigate to Run Page

2.4 Verify Page State

2.5 Check Browser Console and Network

Step 3: Monitor Real-Time Logs

3.1 Check Backend Logs for Agent Flow

3.2 Check Frontend Logs

Step 4: Analyze Complete Flow After Run Completes

4.1 Extract Agent Flow Timeline

4.2 Verify Event Sequence

4.3 Extract Run Metrics

4.4 Check Stream Backfill

4.5 Verify Screenshot Storage

Step 5: Generate Summary Report

5.1 Print Complete Flow Summary

Step 6: Cleanup

6.1 Stop Services (Optional)

6.2 Preserve Logs (Optional)

Troubleshooting

Backend Not Responding

Frontend Dev Server Crashed

No Events in Stream

Graph Not Projecting Screens

Resources

references/log_patterns.md

Frequently asked questions

Dev Log Monitoring

File contents

Dev Log Monitoring

Overview

Workflow Decision Tree

Step 1: Start Services with Log Capture

1.1 Start Backend with Logs

1.2 Start Frontend with Logs

1.3 Verify Services Are Running

Step 2: Navigate and Execute Flow with Playwright MCP

2.1 Navigate to Application

2.2 Trigger Drift Detection

2.3 Navigate to Run Page

2.4 Verify Page State

2.5 Check Browser Console and Network

Step 3: Monitor Real-Time Logs

3.1 Check Backend Logs for Agent Flow

3.2 Check Frontend Logs

Step 4: Analyze Complete Flow After Run Completes

4.1 Extract Agent Flow Timeline

4.2 Verify Event Sequence

4.3 Extract Run Metrics

4.4 Check Stream Backfill

4.5 Verify Screenshot Storage

Step 5: Generate Summary Report

5.1 Print Complete Flow Summary

Step 6: Cleanup

6.1 Stop Services (Optional)

6.2 Preserve Logs (Optional)

Troubleshooting

Backend Not Responding

Frontend Dev Server Crashed

No Events in Stream

Graph Not Projecting Screens

Resources

references/log_patterns.md

Related skills

Frequently asked questions

How do I install the Dev Log Monitoring skill?

What does the Dev Log Monitoring skill do?

Is Dev Log Monitoring safe to use?

Which AI agents work with Dev Log Monitoring?

Is Dev Log Monitoring free to use?

Who published Dev Log Monitoring?