Add WebMCP support to WASM targets for iterating in codex etc.

CLAUDE.md

@@ -33,6 +33,14 @@ git add [PluginName]/* .vscode/* .github/* bump_version.py
 git commit -m "created [PluginName] based on TemplateProject"
 ```
 
+## WebMCP agent bridge (Wasm builds)
+
+Every Wasm host page registers WebMCP tools (`navigator.modelContext`) so a browser agent can
+set parameters, snapshot/restore state, inspect and manipulate IGraphics controls, simulate
+input and take screenshots. Without WebMCP the same tools are reachable from DevTools via
+`window.__iplugWebMCPShim.list()` / `.call(name, input)`. See the "WebMCP Agent Bridge"
+section of @iPlug2/Documentation/wasm.md.
+
 ## Additional Context
 
 - iPlug2 framework: @iPlug2/CLAUDE.md

TemplateProject/scripts/makedist-wasm.sh

@@ -210,6 +210,10 @@ cp "$IPLUG2_ROOT/IPlug/WEB/TemplateWasm/scripts/IPlugWasmProcessor.js.template"
 sed -i"$BAK_SUFFIX" "s/NAME_PLACEHOLDER_LC/$PROJECT_NAME_LC/g" "scripts/$PROJECT_NAME-processor.js"
 sed -i"$BAK_SUFFIX" "s/NAME_PLACEHOLDER/$PROJECT_NAME/g" "scripts/$PROJECT_NAME-processor.js"
 
+# Copy the shared host page scripts (footer UI + WebMCP agent bridge), used verbatim
+cp "$IPLUG2_ROOT/IPlug/WEB/TemplateWasm/scripts/IPlugWasmHostControls.js" scripts/IPlugWasmHostControls.js
+cp "$IPLUG2_ROOT/IPlug/WEB/TemplateWasm/scripts/IPlugWasmWebMCP.js" scripts/IPlugWasmWebMCP.js
+
 # Copy and process HTML template
 # IMPORTANT: Replace NAME_PLACEHOLDER_LC first (longer match) before NAME_PLACEHOLDER
 cp "$IPLUG2_ROOT/IPlug/WEB/TemplateWasm/index.html" index.html

TemplateProjectWebView/resources/web/index.html

@@ -104,6 +104,23 @@
 
     function OnControlChange(ctrlTag, value) {}
 
+    // Optional: expose an explicit action to browser agents (WebMCP) when the
+    // UI is hosted by the Wasm host page. Clickable elements can instead be
+    // annotated with data-iplug-action="id" (see the size buttons below).
+    window.iPlugWebMCP?.registerAction({
+      id: 'reset-gain',
+      label: 'Reset gain to its default',
+      run: async () => {
+        const info = window['parameters']?.[0];
+        const normalized = info ? (info.default - info.min) / (info.max - info.min) : 1;
+        BPCFUI(0);
+        SPVFUI(0, normalized);
+        EPCFUI(0);
+        OnParamChange(0, normalized);
+        return { normalized };
+      }
+    });
+
     // Called by script.js for arbitrary messages from the plugin. The plugin
     // sends the parameter list as JSON once the web content has loaded.
     function OnMessage(msgTag, dataSize, data) {
@@ -133,9 +150,9 @@ <h1>TemplateProjectWebView</h1>
 
     <div class="button-group">
       <span class="group-label">Editor size</span>
-      <button-control onclick="SAMFUI(kMsgTagButtonSmall)">Small</button-control>
-      <button-control onclick="SAMFUI(kMsgTagButtonMedium)">Medium</button-control>
-      <button-control onclick="SAMFUI(kMsgTagButtonLarge)">Large</button-control>
+      <button-control data-iplug-action="size-small" onclick="SAMFUI(kMsgTagButtonSmall)">Small</button-control>
+      <button-control data-iplug-action="size-medium" onclick="SAMFUI(kMsgTagButtonMedium)">Medium</button-control>
+      <button-control data-iplug-action="size-large" onclick="SAMFUI(kMsgTagButtonLarge)">Large</button-control>
     </div>
   </div>
 </body>

TemplateProjectWebView/resources/web/knob-control.js

@@ -55,6 +55,8 @@ class KnobControl extends HTMLElement {
       width: var(--knob-size, 80px);
       height: var(--knob-size, 80px);
     }
+    /* Decorative strokes must not intercept the circle's pointer handlers. */
+    svg path, svg line { pointer-events: none; }
     .hidden-cursor {
       cursor: none;
     }