@winstonfassett/webdev-gateway 0.1.0-alpha.0

package/dist/element-grab.js

@@ -0,0 +1,102 @@
+// element-grab server-side: selection store + MCP tool + HTTP endpoint
+// Push-then-pull model: browser pushes selection via HTTP POST, agent pulls via MCP tool.
+// Selections have a 5-minute TTL.
+import { z } from 'zod';
+const SELECTION_TTL_MS = 5 * 60 * 1000; // 5 minutes
+// Store last N selections (ring buffer, newest first)
+const MAX_SELECTIONS = 10;
+const selections = [];
+function pruneExpired() {
+    const now = Date.now();
+    while (selections.length > 0 && now - selections[selections.length - 1].timestamp > SELECTION_TTL_MS) {
+        selections.pop();
+    }
+}
+export function pushSelection(sel) {
+    pruneExpired();
+    selections.unshift(sel);
+    if (selections.length > MAX_SELECTIONS)
+        selections.pop();
+}
+export function getLatestSelection() {
+    pruneExpired();
+    return selections[0] ?? null;
+}
+export function getAllSelections() {
+    pruneExpired();
+    return [...selections];
+}
+// --- MCP Tool Registration ---
+export function registerElementGrabTool(mcp) {
+    mcp.tool('get_element_context', `Get the latest UI element selected by the user in the browser. The user holds Cmd+C to activate element-grab, hovers over an element, and clicks to select it. Returns a compact component card with: component name, source file location, CSS selector, and a live ref hint (window.__LAST_GRABBED__.element) that can be used with eval_js for live DOM manipulation.`, {
+        all: z.boolean().optional().describe('Return all recent selections (max 10) instead of just the latest'),
+    }, async (args) => {
+        if (args.all) {
+            const all = getAllSelections();
+            if (all.length === 0) {
+                return {
+                    content: [{ type: 'text', text: 'No element has been selected yet. Ask the user to hold Cmd+C in the browser, hover an element, and click to select it.' }],
+                };
+            }
+            return {
+                content: [{ type: 'text', text: all.map(s => `[${Math.round((Date.now() - s.timestamp) / 1000)}s ago] ${s.url}\n${s.card}`).join('\n\n---\n\n') }],
+            };
+        }
+        const latest = getLatestSelection();
+        if (!latest) {
+            return {
+                content: [{ type: 'text', text: 'No element has been selected yet. Ask the user to hold Cmd+C in the browser, hover an element, and click to select it.' }],
+            };
+        }
+        return {
+            content: [{ type: 'text', text: latest.card }],
+        };
+    });
+}
+// --- HTTP Endpoint ---
+export function handleElementGrabRequest(req, res, url) {
+    if (url === '/__element-grab/selection' && req.method === 'POST') {
+        let body = '';
+        req.on('data', (chunk) => { body += chunk.toString(); });
+        req.on('end', () => {
+            try {
+                const data = JSON.parse(body);
+                const payload = data.payload || data;
+                pushSelection({
+                    card: payload.card || '',
+                    timestamp: payload.timestamp || Date.now(),
+                    url: payload.url || '',
+                    browserId: data.browserId,
+                });
+                res.writeHead(200, {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*',
+                });
+                res.end(JSON.stringify({ ok: true }));
+            }
+            catch {
+                res.writeHead(400, {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*',
+                });
+                res.end(JSON.stringify({ error: 'Invalid JSON' }));
+            }
+        });
+        return true;
+    }
+    if (url === '/__element-grab/selection' && req.method === 'GET') {
+        res.writeHead(200, {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*',
+        });
+        const latest = getLatestSelection();
+        res.end(JSON.stringify(latest ? {
+            card: latest.card,
+            url: latest.url,
+            age_sec: Math.round((Date.now() - latest.timestamp) / 1000),
+        } : { status: 'no_selection' }, null, 2));
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=element-grab.js.map

package/dist/element-grab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-grab.js","sourceRoot":"","sources":["../src/element-grab.ts"],"names":[],"mappings":"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"}

package/dist/gateway.d.ts

@@ -0,0 +1,5 @@
+import http from 'node:http';
+import https from 'node:https';
+import type { GatewayOptions } from './types.js';
+export declare function startGateway(options: GatewayOptions): Promise<http.Server<typeof http.IncomingMessage, typeof http.ServerResponse> | https.Server<typeof http.IncomingMessage, typeof http.ServerResponse>>;
+//# sourceMappingURL=gateway.d.ts.map

package/dist/gateway.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gateway.d.ts","sourceRoot":"","sources":["../src/gateway.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,KAAK,MAAM,YAAY,CAAA;AAO9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAwDhD,wBAAsB,YAAY,CAAC,OAAO,EAAE,cAAc,yJAqfzD"}

package/dist/gateway.js

@@ -0,0 +1,534 @@
+import http from 'node:http';
+import https from 'node:https';
+import { readFileSync, mkdirSync, existsSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { homedir } from 'node:os';
+import { execSync } from 'node:child_process';
+import { WebSocketServer } from 'ws';
+import { initSession } from './session.js';
+import { ConsoleWriter } from './writers/console.js';
+import { ErrorsWriter } from './writers/errors.js';
+import { NetworkWriter } from './writers/network.js';
+import { DevEventsWriter } from './writers/dev-events.js';
+import { ServerConsoleWriter } from './writers/server-console.js';
+import { createMcpMiddleware, sendNotificationToAll } from './mcp-server.js';
+import { setupRpcWebSocket, emitLogEvent } from './rpc-server.js';
+import { handleAdmin } from './admin.js';
+import { ServerRegistry, makeServerId, makeProjectId, initProjectLogDir } from './registry.js';
+import { handleElementGrabRequest } from './element-grab.js';
+import { CDPRelay } from './cdp-relay.js';
+import { initAdminRpc, setupAdminWebSocket } from './admin-rpc.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function generateSelfSignedCert() {
+    const certDir = join(homedir(), '.webdev', 'certs');
+    const certPath = join(certDir, 'cert.pem');
+    const keyPath = join(certDir, 'key.pem');
+    if (existsSync(certPath) && existsSync(keyPath)) {
+        return {
+            cert: readFileSync(certPath, 'utf-8'),
+            key: readFileSync(keyPath, 'utf-8'),
+        };
+    }
+    mkdirSync(certDir, { recursive: true });
+    execSync(`openssl req -x509 -newkey rsa:2048 -keyout "${keyPath}" -out "${certPath}" -days 365 -nodes -subj "/CN=localhost"`, { stdio: 'pipe' });
+    return {
+        cert: readFileSync(certPath, 'utf-8'),
+        key: readFileSync(keyPath, 'utf-8'),
+    };
+}
+function addCorsHeaders(res) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+}
+export async function startGateway(options) {
+    const port = options.port ?? 3333;
+    const mcpPath = '/__mcp';
+    const useHttps = options.https ?? false;
+    // Load bundled client script
+    let clientScript;
+    try {
+        clientScript = readFileSync(join(__dirname, 'webdev-client.js'), 'utf-8');
+    }
+    catch {
+        console.error('[webdev] Could not load webdev-client.js bundle. Run `npm run build` first.');
+        process.exit(1);
+    }
+    // Optional proxy plugin — if @winstonfassett/webdev-proxy is installed, mount it
+    let proxyMiddleware = null;
+    try {
+        const { createProxyMiddleware } = await import('@winstonfassett/webdev-proxy');
+        proxyMiddleware = createProxyMiddleware(clientScript);
+        console.log('  [webdev] Proxy plugin loaded');
+    }
+    catch {
+        // Not installed — no proxy, that's fine
+    }
+    // Create server registry for hybrid architecture
+    const registry = new ServerRegistry();
+    // Heartbeat: clean up dead endpoints (process died without unregistering)
+    // Server entries are never removed by heartbeat — only endpoints.
+    // Browsers are never evicted — they disconnect naturally when tabs close.
+    const heartbeatInterval = setInterval(() => {
+        const cleaned = registry.cleanupDeadEndpoints();
+        if (cleaned.length > 0) {
+            console.log(`[registry] Cleaned up ${cleaned.length} dead endpoint(s)`);
+        }
+    }, 5000);
+    // Initialize session
+    const protocol = useHttps ? 'https' : 'http';
+    const serverUrl = `${protocol}://localhost:${port}`;
+    const session = initSession(options, serverUrl, mcpPath);
+    // Initialize writers
+    const writers = {
+        console: new ConsoleWriter(session.files.console, options.maxFileSizeMb),
+        errors: new ErrorsWriter(session.files.errors, options.maxFileSizeMb),
+        devEvents: new DevEventsWriter(session.files['dev-events'], options.maxFileSizeMb),
+        serverConsole: new ServerConsoleWriter(session.files['server-console'], options.maxFileSizeMb),
+    };
+    if (options.network && session.files.network) {
+        writers.network = new NetworkWriter(session.files.network, options.maxFileSizeMb);
+    }
+    // Per-project writers (populated when servers register)
+    const projectWriters = new Map();
+    // MCP context
+    const mcpCtx = {
+        session,
+        connectedClients: 0,
+        devEventsWriter: writers.devEvents,
+        registry,
+    };
+    // Initialize admin RPC (capnweb over WS)
+    initAdminRpc({ registry, session, startedAt: session.startedAt });
+    const mcpMiddleware = createMcpMiddleware(mcpPath, mcpCtx);
+    // Request handler
+    function handleRequest(req, res) {
+        const url = req.url ?? '';
+        // CDP control actions (release debugging, status)
+        const cdpAction = cdpRelay.handleAction(url);
+        if (cdpAction !== null) {
+            addCorsHeaders(res);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(cdpAction));
+            return;
+        }
+        // CDP discovery endpoints (for Playwright connectOverCDP)
+        const cdpResponse = cdpRelay.handleHttp(url);
+        if (cdpResponse !== null) {
+            addCorsHeaders(res);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(cdpResponse));
+            return;
+        }
+        // CORS preflight
+        if (req.method === 'OPTIONS') {
+            addCorsHeaders(res);
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        // Serve client script
+        if (url === '/__webdev.js' || url === '/__client.js') {
+            addCorsHeaders(res);
+            res.writeHead(200, {
+                'Content-Type': 'application/javascript',
+                'Cache-Control': 'no-cache',
+            });
+            res.end(clientScript);
+            return;
+        }
+        // Serve lazy-loaded libs (screenshot library, etc.)
+        if (url.startsWith('/__libs/')) {
+            const libName = url.slice('/__libs/'.length);
+            try {
+                const libPath = join(__dirname, 'libs', libName);
+                const content = readFileSync(libPath, 'utf-8');
+                addCorsHeaders(res);
+                res.writeHead(200, {
+                    'Content-Type': 'application/javascript',
+                    'Cache-Control': 'public, max-age=31536000, immutable',
+                });
+                res.end(content);
+            }
+            catch {
+                res.writeHead(404);
+                res.end('Not found');
+            }
+            return;
+        }
+        // Element-grab: serve script + HTTP selection endpoints
+        if (url === '/__element-grab.js') {
+            addCorsHeaders(res);
+            try {
+                const script = readFileSync(join(__dirname, 'element-grab-client.js'), 'utf-8');
+                res.writeHead(200, { 'Content-Type': 'application/javascript', 'Cache-Control': 'no-cache' });
+                res.end(script);
+            }
+            catch {
+                res.writeHead(404);
+                res.end('element-grab not built');
+            }
+            return;
+        }
+        if (url.startsWith('/__element-grab/')) {
+            addCorsHeaders(res);
+            if (handleElementGrabRequest(req, res, url))
+                return;
+        }
+        // Gateway registration endpoints
+        if (url === '/__gateway/register' && req.method === 'POST') {
+            addCorsHeaders(res);
+            let body = '';
+            req.on('data', chunk => { body += chunk.toString(); });
+            req.on('end', () => {
+                try {
+                    const data = JSON.parse(body);
+                    if (!data.type || !data.port || !data.pid || !data.directory) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ error: 'Missing required fields: type, port, pid, directory' }));
+                        return;
+                    }
+                    // Create per-project log directory
+                    const channels = ['console', 'errors', 'dev-events', 'server-console'];
+                    if (options.network)
+                        channels.push('network');
+                    const { logDir, logPaths } = initProjectLogDir(data.directory, channels);
+                    // Compute stable server identity
+                    const serverId = data.serverId || makeServerId(data.directory, data.type, data.key);
+                    const projectId = makeProjectId(data.directory);
+                    const serverInfo = {
+                        id: serverId,
+                        projectId,
+                        directory: data.directory,
+                        type: data.type,
+                        key: data.key,
+                        name: data.name,
+                        logPaths,
+                        logDir,
+                    };
+                    const endpoint = {
+                        port: data.port,
+                        pid: data.pid,
+                        registeredAt: Date.now(),
+                    };
+                    registry.addEndpoint(serverId, serverInfo, endpoint);
+                    // Create per-project writers (keyed by directory — logs are project-scoped)
+                    if (!projectWriters.has(data.directory)) {
+                        projectWriters.set(data.directory, {
+                            console: new ConsoleWriter(logPaths.console, options.maxFileSizeMb),
+                            errors: new ErrorsWriter(logPaths.errors, options.maxFileSizeMb),
+                            devEvents: new DevEventsWriter(logPaths['dev-events'], options.maxFileSizeMb),
+                            serverConsole: new ServerConsoleWriter(logPaths['server-console'], options.maxFileSizeMb),
+                            network: logPaths.network ? new NetworkWriter(logPaths.network, options.maxFileSizeMb) : undefined,
+                        });
+                    }
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({
+                        success: true,
+                        serverId,
+                        projectId,
+                        logDir,
+                        gatewayMcpUrl: `${serverUrl}${mcpPath}/sse`,
+                        gatewayRpcUrl: `${serverUrl.replace('http', 'ws')}/__rpc`,
+                    }));
+                }
+                catch (err) {
+                    res.writeHead(400, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ error: `Invalid request: ${err}` }));
+                }
+            });
+            return;
+        }
+        // Browser init endpoint — returns serverId + gatewayUrl for runtime client config
+        if (url.startsWith('/__gateway/init') && req.method === 'GET') {
+            addCorsHeaders(res);
+            const urlObj = new URL(url, 'http://localhost');
+            res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' });
+            res.end(JSON.stringify({
+                serverId: urlObj.searchParams.get('server') || null,
+                gatewayUrl: urlObj.searchParams.get('gateway') || serverUrl,
+            }));
+            return;
+        }
+        if (url === '/__gateway/servers' && req.method === 'GET') {
+            addCorsHeaders(res);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({
+                servers: registry.getAll(),
+                count: registry.size(),
+            }, null, 2));
+            return;
+        }
+        if (url.startsWith('/__gateway/unregister/') && req.method === 'POST') {
+            addCorsHeaders(res);
+            const serverId = url.split('/').pop();
+            if (serverId && registry.has(serverId)) {
+                const server = registry.get(serverId);
+                registry.remove(serverId);
+                // Don't remove browsers — they disconnect naturally
+                if (server)
+                    projectWriters.delete(server.directory);
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ success: true }));
+            }
+            else {
+                res.writeHead(404, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Server not found' }));
+            }
+            return;
+        }
+        // MCP endpoints
+        if (url.startsWith(mcpPath)) {
+            addCorsHeaders(res);
+            mcpMiddleware(req, res, () => {
+                res.writeHead(404);
+                res.end('Not found');
+            });
+            return;
+        }
+        // Gateway status page
+        if (url === '/__status') {
+            addCorsHeaders(res);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({
+                gateway: 'webdev',
+                mode: registry.size() > 0 ? 'hybrid' : 'hub',
+                session: session.info,
+                registered_servers: registry.getAll(),
+                uptime_ms: Date.now() - session.startedAt,
+            }, null, 2));
+            return;
+        }
+        // Admin UI
+        if (handleAdmin(req, res, url, { startedAt: session.startedAt, registry, port, session }))
+            return;
+        // Landing page
+        if (url === '/') {
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(`<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>webdev</title>
+<style>
+  *{box-sizing:border-box;margin:0}
+  body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#e0e0e0;display:flex;align-items:center;justify-content:center;min-height:100vh}
+  .wrap{text-align:center;max-width:520px;width:100%;padding:2rem}
+  h1{font-size:1.4rem;font-weight:500;margin-bottom:.5rem;color:#fff}
+  .section{margin-top:2rem}
+  .section h2{font-size:.95rem;font-weight:500;color:#888;margin-bottom:.75rem}
+  form{display:flex;gap:.5rem}
+  input{flex:1;padding:.6rem .8rem;border-radius:6px;border:1px solid #333;background:#141414;color:#e0e0e0;font-size:.9rem;outline:none}
+  input:focus{border-color:#555}
+  input::placeholder{color:#444}
+  button{padding:.6rem 1.2rem;border-radius:6px;border:none;background:#fff;color:#000;font-size:.9rem;font-weight:500;cursor:pointer}
+  button:hover{background:#ddd}
+  a.link{display:inline-block;padding:.6rem 1.2rem;border-radius:6px;border:1px solid #333;color:#e0e0e0;text-decoration:none;font-size:.9rem}
+  a.link:hover{border-color:#555;background:#141414}
+</style>
+</head><body>
+<div class="wrap">
+  <h1>webdev</h1>
+  <div class="section">
+    <a class="link" href="/__admin">Admin Dashboard &rarr;</a>
+  </div>${proxyMiddleware ? `
+  <div class="section">
+    <h2>Proxy</h2>
+    <form onsubmit="event.preventDefault();var u=this.url.value.trim();if(u){if(!/^https?:\\/\\//.test(u))u='http://'+u;location.href='/'+u}">
+      <input name="url" type="text" placeholder="http://localhost:3000" autofocus>
+      <button type="submit">Go</button>
+    </form>
+  </div>` : ''}
+</div>
+</body></html>`);
+            return;
+        }
+        // Try optional proxy plugin (npm install @winstonfassett/webdev-proxy)
+        if (proxyMiddleware) {
+            proxyMiddleware(req, res, () => {
+                res.writeHead(404, { 'Content-Type': 'text/plain' });
+                res.end('Not found');
+            });
+            return;
+        }
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Not found');
+    }
+    // Create server (HTTP or HTTPS)
+    let server;
+    if (useHttps) {
+        let cert, key;
+        if (options.cert && options.key) {
+            cert = readFileSync(options.cert, 'utf-8');
+            key = readFileSync(options.key, 'utf-8');
+        }
+        else {
+            const generated = generateSelfSignedCert();
+            cert = generated.cert;
+            key = generated.key;
+        }
+        server = https.createServer({ cert, key }, handleRequest);
+    }
+    else {
+        server = http.createServer(handleRequest);
+    }
+    // Setup admin RPC WebSocket (capnweb, /__admin/ws)
+    setupAdminWebSocket(server);
+    // Setup events WebSocket (browser → server for console/errors/network)
+    const eventsWss = new WebSocketServer({ noServer: true });
+    // Setup dev-events WebSocket (adapters → server for HMR/build events)
+    const devEventsWss = new WebSocketServer({ noServer: true });
+    // Setup command WebSocket (browser ↔ gateway JSON protocol)
+    setupRpcWebSocket(server, '/__rpc');
+    // Setup CDP relay (extension ↔ Playwright bridge)
+    const cdpRelay = new CDPRelay({ gatewayPort: port });
+    mcpCtx.cdpRelay = cdpRelay;
+    // Upgrade handler for events + dev-events + proxy WS
+    server.on('upgrade', (request, socket, head) => {
+        const url = request.url ?? '';
+        // CDP relay handles /__cdp-extension and /devtools/browser/*
+        if (cdpRelay.handleUpgrade(request, socket, head)) {
+            return;
+        }
+        if (url === '/__events' || url.startsWith('/__events?')) {
+            eventsWss.handleUpgrade(request, socket, head, (ws) => {
+                eventsWss.emit('connection', ws, request);
+            });
+        }
+        else if (url === '/__dev-events' || url.startsWith('/__dev-events?')) {
+            devEventsWss.handleUpgrade(request, socket, head, (ws) => {
+                devEventsWss.emit('connection', ws, request);
+            });
+        }
+        else if (url === '/__rpc' || url.startsWith('/__rpc?')) {
+            // Handled by setupRpcWebSocket upgrade listener
+        }
+        else if (url === '/__admin/ws' || url.startsWith('/__admin/ws?')) {
+            // Handled by setupAdminWebSocket upgrade listener
+        }
+        else {
+            socket.destroy();
+        }
+    });
+    eventsWss.on('connection', (ws, request) => {
+        // Parse stable server identity from query param, resolve to project directory for writer routing
+        const reqUrl = request.url ?? '';
+        const serverMatch = reqUrl.match(/[?&]server=([^&]+)/);
+        const serverId = serverMatch ? decodeURIComponent(serverMatch[1]) : null;
+        const server = serverId ? registry.get(serverId) : null;
+        const projectDir = server?.directory ?? null;
+        ws.on('message', (data) => {
+            try {
+                const msg = JSON.parse(data.toString());
+                const { channel, payload, browserId } = msg;
+                // Tag payload with browser ID for filtering
+                if (browserId)
+                    payload.browserId = browserId;
+                // Use project-specific writers if available, fall back to gateway writers
+                const w = (projectDir && projectWriters.get(projectDir)) || writers;
+                if (channel === 'console') {
+                    w.console.write(payload);
+                }
+                else if (channel === 'error') {
+                    w.errors.write(payload);
+                    const logFile = server?.logPaths?.errors ?? session.files.errors ?? '';
+                    sendNotificationToAll('errors', payload.message ?? 'Error', logFile, `logs`);
+                }
+                else if (channel === 'server-console') {
+                    w.serverConsole.write(payload);
+                    if (payload.level === 'error') {
+                        const logFile = server?.logPaths?.['server-console'] ?? session.files['server-console'] ?? '';
+                        sendNotificationToAll('server', payload.args?.join(' ') ?? 'Server error', logFile, `logs`);
+                    }
+                }
+                else if (channel === 'network' && w.network) {
+                    w.network.write(payload);
+                }
+                // Push to admin WS stream subscribers
+                emitLogEvent({ channel, payload, browserId });
+            }
+            catch {
+                // Ignore malformed messages
+            }
+        });
+    });
+    devEventsWss.on('connection', (ws, request) => {
+        // Parse stable server identity from query param, resolve to project directory
+        const reqUrl = request.url ?? '';
+        const serverMatch = reqUrl.match(/[?&]server=([^&]+)/);
+        const serverId = serverMatch ? decodeURIComponent(serverMatch[1]) : null;
+        const server = serverId ? registry.get(serverId) : null;
+        const projectDir = server?.directory ?? null;
+        console.log(`[webdev] Dev adapter connected${serverId ? ` (server: ${serverId})` : ''}`);
+        ws.on('message', (data) => {
+            try {
+                const payload = JSON.parse(data.toString());
+                const w = (projectDir && projectWriters.get(projectDir)) || writers;
+                w.devEvents.write(payload);
+                if (payload.type === 'build:error') {
+                    const logFile = server?.logPaths?.['dev-events'] ?? session.files['dev-events'] ?? '';
+                    sendNotificationToAll('build', payload.error ?? 'Build error', logFile, `logs`);
+                }
+            }
+            catch {
+                // Ignore malformed messages
+            }
+        });
+        ws.on('close', () => {
+            console.log(`[webdev] Dev adapter disconnected${serverId ? ` (server: ${serverId})` : ''}`);
+        });
+    });
+    server.on('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+            const occupier = findPortOccupier(port);
+            console.error('');
+            console.error(`  ✗ Port ${port} is already in use.`);
+            if (occupier) {
+                console.error(`    Held by: PID ${occupier.pid}${occupier.cmd ? ` (${occupier.cmd})` : ''}`);
+            }
+            console.error('');
+            console.error(`  Either stop that process, or run with a different port:`);
+            console.error(`    npx webdev -p <other-port>`);
+            console.error('');
+            process.exit(1);
+        }
+        throw err;
+    });
+    server.listen(port, () => {
+        const proto = useHttps ? 'https' : 'http';
+        console.log('');
+        console.log(`  webdev gateway`);
+        console.log(`  ───────────────────────────────`);
+        console.log(`  Listen:  ${proto}://localhost:${port}`);
+        console.log(`  MCP:     ${proto}://localhost:${port}${mcpPath}/sse`);
+        console.log(`  Logs:    ${session.logDir}`);
+        console.log(`  CDP:     ${proto}://localhost:${port}/json/version (extension relay)`);
+        if (useHttps)
+            console.log(`  HTTPS:   enabled`);
+        console.log('');
+    });
+    return server;
+}
+/** Best-effort lookup of the process holding a port (lsof on unix, netstat on win). */
+function findPortOccupier(port) {
+    try {
+        if (process.platform === 'win32') {
+            const out = execSync(`netstat -ano -p TCP`, { encoding: 'utf8' });
+            const line = out.split('\n').find((l) => l.includes(`:${port}`) && /LISTENING/i.test(l));
+            if (!line)
+                return null;
+            const cols = line.trim().split(/\s+/);
+            return { pid: cols[cols.length - 1] ?? '?', cmd: '' };
+        }
+        const out = execSync(`lsof -iTCP:${port} -sTCP:LISTEN -P -n`, { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] });
+        const lines = out.trim().split('\n');
+        if (lines.length < 2)
+            return null;
+        const cols = lines[1].split(/\s+/);
+        return { pid: cols[1] ?? '?', cmd: cols[0] ?? '' };
+    }
+    catch {
+        return null;
+    }
+}
+//# sourceMappingURL=gateway.js.map