what-devtools-mcp 0.12.4 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-devtools-mcp",
-  "version": "0.12.4",
+  "version": "0.13.1",
   "description": "MCP server bridging AI agents to live What Framework app state via WebSocket",
   "type": "module",
   "bin": {
@@ -8,9 +8,18 @@
   },
   "exports": {
     ".": "./src/index.js",
-    "./client": "./src/client.js",
-    "./vite": "./src/vite-plugin.js",
-    "./vite-plugin": "./src/vite-plugin.js"
+    "./client": {
+      "types": "./src/client.d.ts",
+      "default": "./src/client.js"
+    },
+    "./vite": {
+      "types": "./src/vite-plugin.d.ts",
+      "default": "./src/vite-plugin.js"
+    },
+    "./vite-plugin": {
+      "types": "./src/vite-plugin.d.ts",
+      "default": "./src/vite-plugin.js"
+    }
   },
   "files": [
     "src"

package/src/bridge.js

@@ -13,6 +13,12 @@ import { join } from 'path';
 const MAX_EVENT_LOG = 1000;
 const MAX_ERROR_LOG = 100;
 
+/**
+ * @param {object} [options]
+ * @param {number} [options.port]
+ * @param {string} [options.host]
+ * @param {(err: any) => void} [options.onError]
+ */
 export function createBridge({ port = 9229, host = '127.0.0.1', onError } = {}) {
   let latestSnapshot = null;
   const eventLog = [];

package/src/client-commands.js

@@ -601,7 +601,7 @@ export async function handleExtendedCommand(command, args, devtools) {
           tag: el.tagName.toLowerCase(),
           type: el.getAttribute('type') || undefined,
           label: label || '(unlabeled)',
-          disabled: el.disabled || undefined,
+          disabled: /** @type {any} */ (el).disabled || undefined,
           rect: rectOf(el),
         });
       }
@@ -768,7 +768,7 @@ export async function handleExtendedCommand(command, args, devtools) {
         const canvas = document.createElement('canvas');
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
-        const ctx = canvas.getContext('2d');
+        const ctx = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
         ctx.scale(scale * dpr, scale * dpr);
 
         // Load SVG blob as image
@@ -801,7 +801,7 @@ export async function handleExtendedCommand(command, args, devtools) {
           const smallCanvas = document.createElement('canvas');
           smallCanvas.width = Math.ceil(canvasWidth / 2);
           smallCanvas.height = Math.ceil(canvasHeight / 2);
-          const smallCtx = smallCanvas.getContext('2d');
+          const smallCtx = /** @type {CanvasRenderingContext2D} */ (smallCanvas.getContext('2d'));
           smallCtx.drawImage(canvas, 0, 0, smallCanvas.width, smallCanvas.height);
           dataUrl = smallCanvas.toDataURL('image/jpeg', 0.3);
           base64 = dataUrl.split(',')[1];

package/src/client.d.ts

@@ -0,0 +1,31 @@
+// Types for `what-devtools-mcp/client`.
+
+export interface DevToolsMCPConnection {
+  /** Stop probing and close the socket. Safe to call more than once. */
+  disconnect(): void;
+  /** Force an immediate reconnect attempt, resetting the probe back-off. */
+  reconnect(): void;
+  readonly isConnected: boolean;
+  /** Events forwarded to the bridge since the connection opened. */
+  readonly eventCount: number;
+}
+
+export interface ConnectDevToolsMCPOptions {
+  /** Bridge port. Default 9229. */
+  port?: number;
+  /** Shared secret the bridge requires. */
+  token?: string;
+  /** Override the discovery endpoint instead of deriving it from `port`. */
+  discoveryUrl?: string;
+}
+
+/**
+ * Connect the running app to the devtools MCP bridge.
+ *
+ * Returns an inert connection in production (`NODE_ENV === 'production'` or
+ * `import.meta.env.PROD`) rather than throwing, so it is safe to call
+ * unconditionally.
+ */
+export function connectDevToolsMCP(
+  options?: ConnectDevToolsMCPOptions,
+): DevToolsMCPConnection;

package/src/client.js

@@ -7,7 +7,6 @@
 // Branded console logger
 const BADGE = 'background:#6366f1;color:#fff;padding:2px 6px;border-radius:3px;font-weight:bold';
 const BADGE_CMD = 'background:#22c55e;color:#fff;padding:2px 6px;border-radius:3px;font-weight:bold';
-const BADGE_EVENT = 'background:#f97316;color:#fff;padding:2px 6px;border-radius:3px;font-weight:bold';
 const BADGE_WARN = 'background:#eab308;color:#000;padding:2px 6px;border-radius:3px;font-weight:bold';
 const DIM = 'color:#888';
 

package/src/tools-agent.js

@@ -617,7 +617,7 @@ export default ${name};
 `;
   },
 
-  page: ({ name, props = [], signals = [] }) => {
+  page: ({ name, signals = [] }) => {
     const signalDecls = signals.map(s => `  const ${s} = signal(null, '${s}');`).join('\n');
 
     return `import { signal, effect, onMount } from 'what-framework';
@@ -646,7 +646,7 @@ export default ${name};
 `;
   },
 
-  form: ({ name, props = [], signals = [] }) => {
+  form: ({ name, signals = [] }) => {
     const fields = signals.length > 0 ? signals : ['email', 'password'];
     const fieldDecls = fields.map(f => `    ${f}: { initial: '', rules: [rules.required('${f} is required')] },`).join('\n');
 
@@ -818,7 +818,7 @@ export function registerAgentTools(server, bridge) {
         try {
           const ruleIssues = rule.test(code);
           issues.push(...ruleIssues);
-        } catch (e) {
+        } catch {
           // Rule crashed — skip silently
         }
       }
@@ -930,7 +930,7 @@ export function registerAgentTools(server, bridge) {
             componentCount: (result.output || '').match(/function\s+[A-Z]\w*\s*\(/g)?.length || 0,
           },
         });
-      } catch (e) {
+      } catch {
         // Fallback: do basic validation without browser
         const issues = [];
 
@@ -1230,9 +1230,6 @@ export function registerAgentTools(server, bridge) {
           depCount: (e.depSignalIds || e.deps || []).length,
         });
       }
-      const baselineEventCount = bridge.getEvents
-        ? bridge.getEvents(Date.now() - 1).length
-        : 0;
       const startTs = Date.now();
 
       // ---- Wait for the window ----

package/src/tools-extended.js

@@ -33,7 +33,7 @@ export function registerExtendedTools(server, bridge) {
     };
   }
 
-  function noSnapshot(tool) {
+  function noSnapshot(_tool) {
     return {
       content: [{
         type: 'text',
@@ -1000,6 +1000,7 @@ export function registerExtendedTools(server, bridge) {
       }
 
       // Get writer info from browser
+      /** @type {Record<string, any>} */
       let writers = { recentWrites: [], totalWrites: 0 };
       try {
         writers = await bridge.sendCommand('get-signal-writers', { signalId }, 5000);
@@ -1048,6 +1049,7 @@ export function registerExtendedTools(server, bridge) {
 
       // Trace from recent writes
       for (const write of (writers.recentWrites || []).slice(-5)) {
+        /** @type {Record<string, any>} */
         const entry = {
           timestamp: write.timestamp,
           previousValue: write.previousValue,
@@ -1114,7 +1116,6 @@ export function registerExtendedTools(server, bridge) {
 
         const { componentName, boundingRect, styles, textContent, childElements, totalChildren, layout, viewport, accessibility } = result;
 
-        const styleDesc = Object.entries(styles || {}).map(([k, v]) => `${k}: ${v}`).join(', ');
         const childDesc = Object.entries(childElements || {}).map(([k, v]) => `${v} ${k}${v > 1 ? 's' : ''}`).join(', ');
 
         const summary = `${componentName}: ${boundingRect.width}×${boundingRect.height}px at (${boundingRect.x},${boundingRect.y}). ` +

package/src/tools.js

@@ -477,6 +477,7 @@ export function registerTools(server, bridge) {
       const classified = errors.map((err, idx) => {
         const msg = err.message || err.error || '';
         const parsed = parseStack(err.stack, knownComponents);
+        /** @type {Record<string, any>} */
         let classification = {
           id: `err_${idx}`,
           severity: 'error',
@@ -773,6 +774,7 @@ function error(message) {
  * what-core, what-devtools, node_modules, vite/, /@id/, internal anonymous).
  */
 function parseStack(stack, knownComponents = []) {
+  /** @type {{ file: string|null, line: number|null, column: number|null, component: string|null }} */
   const out = { file: null, line: null, column: null, component: null };
   if (!stack || typeof stack !== 'string') return out;
 

package/src/vite-plugin.d.ts

@@ -0,0 +1,31 @@
+// Types for `what-devtools-mcp/vite`. This is the export TypeScript users hit
+// first, because it goes in `vite.config.ts`.
+
+/** Path the dev server answers bridge-discovery probes on. */
+export const DISCOVERY_PATH: string;
+
+export interface WhatDevToolsMCPOptions {
+  /** Bridge port. Default 9229. */
+  port?: number;
+  /** Shared secret required by the bridge. */
+  token?: string;
+}
+
+// Structural Vite plugin shape — assignable to Vite's `PluginOption` without a
+// hard type dependency on `vite`. Same convention as `what-compiler/vite`.
+export interface WhatDevToolsMCPPlugin {
+  name: string;
+  apply?: 'serve' | 'build';
+  [hook: string]: unknown;
+}
+
+/**
+ * Vite plugin that injects the devtools MCP client into the dev server.
+ *
+ * `apply: 'serve'` only: it resolves, loads and injects nothing under
+ * `vite build`. `what-devtools` is an optional peer; if it is not installed the
+ * plugin degrades to a single log line instead of failing the dev transform.
+ */
+export default function whatDevToolsMCP(
+  options?: WhatDevToolsMCPOptions,
+): WhatDevToolsMCPPlugin;