audio fixes, mcp changes

Author: monteslu

src/App.jsx

@@ -100,32 +100,41 @@ function AppContent() {
         if (savedFlows && savedFlows.flows && savedFlows.flows.length > 0) {
           // Convert saved nodes to internal format
           // Check if each node is a config node and strip z/x/y if so
+          // Also filter out runtime-only properties (starting with _) that may have been saved
           const internalNodes = (savedFlows.nodes || []).map(node => {
             const { id, type, name, z, x, y, wires, streamWires, ...config } = node;
+            // Filter out runtime-only properties (e.g., _currentValue, _activeButton)
+            const cleanConfig = Object.fromEntries(
+              Object.entries(config).filter(([key]) => !key.startsWith('_'))
+            );
             const nodeDef = nodeRegistry.get(type);
             const isConfigNode = nodeDef?.category === 'config';
             // Config nodes shouldn't have z, x, y - they don't render on canvas
             if (isConfigNode) {
               return {
                 _node: { id, type, name: name || '', wires: wires || [] },
-                ...config
+                ...cleanConfig
               };
             }
             return {
               _node: {
                 id, type, name: name || '', z, x: x || 0, y: y || 0, wires: wires || [],
                 ...(streamWires ? { streamWires } : {})
               },
-              ...config
+              ...cleanConfig
             };
           });
 
           // Convert saved config nodes to internal format
           const internalConfigNodes = (savedFlows.configNodes || []).map(node => {
             const { id, type, name, ...config } = node;
+            // Filter out runtime-only properties
+            const cleanConfig = Object.fromEntries(
+              Object.entries(config).filter(([key]) => !key.startsWith('_'))
+            );
             return {
               _node: { id, type, name: name || '' },
-              ...config
+              ...cleanConfig
             };
           });
 

src/audio/AudioManager.js

@@ -1531,10 +1531,14 @@ class AudioManager {
   /**
    * Handle mainThread calls from runtime nodes
    */
-  handleMainThreadCall(nodeId, action, params) {
+  async handleMainThreadCall(nodeId, action, params) {
     switch (action) {
-      case 'createAudioNode':
-        return this.createNode(nodeId, params.nodeType, params.options);
+      case 'createAudioNode': {
+        // createNode returns nodeData with non-cloneable AudioNodes
+        // Return a simple success indicator instead
+        const result = await this.createNode(nodeId, params.nodeType, params.options);
+        return result ? { success: true, nodeId } : { success: false };
+      }
 
       case 'setAudioParam':
         return this.setParam(nodeId, params.param, params.value);
@@ -1650,6 +1654,19 @@ class AudioManager {
       case 'controlStems':
         return this.controlStems(nodeId, params.action, params);
 
+      case 'getAudioContextState':
+        return this.ctx?.state || null;
+
+      case 'hasActiveSources': {
+        // Check if any source nodes are currently playing
+        for (const [, nodeData] of this.nodes) {
+          if (nodeData.started) {
+            return true;
+          }
+        }
+        return false;
+      }
+
       default:
         logger.warn(`Unknown audio action: ${action}`);
         return null;

src/components/Canvas/AudioPort.jsx

@@ -3,8 +3,13 @@ import { useCallback } from 'react';
 /**
  * Audio stream port - RCA jack style with green color
  * Visual: Circle with center dot (◉) with metallic 3D effect
+ *
+ * Nodes can provide custom port rendering via renderStreamPort function.
+ * If customRender is provided, it receives { index, isOutput, x, y } and should return SVG elements.
+ * The custom render is placed inside the port group, so coordinates are relative to port position.
  */
-export function AudioPort({ x, y, isOutput, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave }) {
+export function AudioPort({ x, y, isOutput, index, customRender, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave }) {
+  const hasCustomRender = !!customRender;
   // Touch handlers that simulate mouse events
   const handleTouchStart = useCallback((e) => {
     if (e.touches.length !== 1) return;
@@ -21,19 +26,21 @@ export function AudioPort({ x, y, isOutput, onMouseDown, onMouseUp, onMouseEnter
     onMouseUp?.(fakeEvent);
   }, [onMouseUp]);
 
-  // Offset to center the port visually - symmetric distance from node body
-  // Output: start at node edge (x), extend outward. Input: start at x-12, extend into node
-  const offsetX = isOutput ? x : x - 12;
-  const gradientId = `audio-port-grad-${isOutput ? 'out' : 'in'}-${x}-${y}`;
+  // Offset to center the port visually - overlap node body slightly for visual cohesion
+  // Port is 16px wide, center at 8px. We want ~4px overlap with node edge on both sides.
+  // Output (right side): x is node right edge, port center should be at x + 4
+  // Input (left side): x is 0 (node left edge), port center should be at x - 4
+  const offsetX = isOutput ? x - 4 : x - 12;
+  const gradientId = `audio-port-grad-${isOutput ? 'out' : 'in'}-${x}-${y}-${hasCustomRender ? 'custom' : 'std'}`;
 
   return (
     <g transform={`translate(${offsetX}, ${y - 8})`}>
       <defs>
-        {/* Metallic green gradient for outer ring */}
+        {/* Metallic green gradient for outer ring - lighter when custom render for better contrast */}
         <radialGradient id={gradientId} cx="30%" cy="30%" r="70%">
-          <stop offset="0%" stopColor="#7dda7d" />
-          <stop offset="50%" stopColor="#3daa3d" />
-          <stop offset="100%" stopColor="#1d7a1d" />
+          <stop offset="0%" stopColor={hasCustomRender ? "#e8f8e8" : "#7dda7d"} />
+          <stop offset="50%" stopColor={hasCustomRender ? "#b8e8b8" : "#3daa3d"} />
+          <stop offset="100%" stopColor={hasCustomRender ? "#78c878" : "#1d7a1d"} />
         </radialGradient>
       </defs>
       {/* Larger invisible touch target */}
@@ -61,7 +68,7 @@ export function AudioPort({ x, y, isOutput, onMouseDown, onMouseUp, onMouseEnter
         cy={8}
         r={7}
         fill={`url(#${gradientId})`}
-        stroke="#1a6a1a"
+        stroke={hasCustomRender ? "#4a9a4a" : "#1a6a1a"}
         strokeWidth={1}
         onMouseDown={onMouseDown}
         onMouseUp={onMouseUp}
@@ -71,23 +78,27 @@ export function AudioPort({ x, y, isOutput, onMouseDown, onMouseUp, onMouseEnter
         onTouchEnd={handleTouchEnd}
         style={{ cursor: 'crosshair' }}
       />
-      {/* Inner ring / hole */}
-      <circle
-        cx={8}
-        cy={8}
-        r={4}
-        fill="#0a3a0a"
-        pointerEvents="none"
-      />
-      {/* Center pin - metallic */}
-      <circle
-        className="audio-port-inner"
-        cx={8}
-        cy={8}
-        r={2}
-        fill="#c0c0c0"
-        pointerEvents="none"
-      />
+      {/* Inner ring / hole - skip if custom render provides its own content */}
+      {!hasCustomRender && (
+        <circle
+          cx={8}
+          cy={8}
+          r={4}
+          fill="#0a3a0a"
+          pointerEvents="none"
+        />
+      )}
+      {/* Center pin - metallic - skip if custom render */}
+      {!hasCustomRender && (
+        <circle
+          className="audio-port-inner"
+          cx={8}
+          cy={8}
+          r={2}
+          fill="#c0c0c0"
+          pointerEvents="none"
+        />
+      )}
       {/* Highlight */}
       <circle
         cx={5.5}
@@ -96,6 +107,8 @@ export function AudioPort({ x, y, isOutput, onMouseDown, onMouseUp, onMouseEnter
         fill="rgba(255,255,255,0.4)"
         pointerEvents="none"
       />
+      {/* Custom rendering from node definition (icons, labels, etc.) */}
+      {customRender && customRender({ index, isOutput, x: 8, y: 8 })}
     </g>
   );
 }

src/components/Canvas/NodeShape.jsx

@@ -321,6 +321,8 @@ export function NodeShape({
           x={0}
           y={yPos}
           isOutput={false}
+          index={i}
+          customRender={def?.renderStreamPort}
           onMouseDown={onStreamPortMouseDown ? (e) => onStreamPortMouseDown(e, i, false) : undefined}
           onMouseUp={onStreamPortMouseUp ? (e) => onStreamPortMouseUp(e, i, false) : undefined}
           onMouseEnter={onStreamPortMouseEnter ? (e) => onStreamPortMouseEnter(e, i, false) : undefined}
@@ -347,6 +349,8 @@ export function NodeShape({
           x={width}
           y={yPos}
           isOutput={true}
+          index={i}
+          customRender={def?.renderStreamPort}
           onMouseDown={onStreamPortMouseDown ? (e) => onStreamPortMouseDown(e, i, true) : undefined}
           onMouseUp={onStreamPortMouseUp ? (e) => onStreamPortMouseUp(e, i, true) : undefined}
         />

src/components/Canvas/Wire.jsx

@@ -58,17 +58,19 @@ export function Wire({ sourceNode, sourcePort, targetNode, targetPort = 0, targe
     if (targetNode && !targetPos) {
       // Connected to a target node (saved wire)
       const targetDef = nodeRegistry.get(targetNode._node.type);
+      const targetWidth = getNodeWidthWithDef(targetNode, targetDef);
       const targetHeight = getNodeHeightWithDef(targetNode, targetDef);
       endPos = isStream
-        ? getStreamPortPosition(targetNode, targetPort, false, targetDef, targetHeight)
-        : getPortPosition(targetNode, targetPort, false, targetHeight, undefined, targetDef);
+        ? getStreamPortPosition(targetNode, targetPort, false, targetDef, targetHeight, targetWidth)
+        : getPortPosition(targetNode, targetPort, false, targetHeight, targetWidth, targetDef);
     } else if (targetNode && targetPos) {
       // Temp wire hovering over a valid input - snap to port
       const targetDef = nodeRegistry.get(targetNode._node.type);
+      const targetWidth = getNodeWidthWithDef(targetNode, targetDef);
       const targetHeight = getNodeHeightWithDef(targetNode, targetDef);
       endPos = isStream
-        ? getStreamPortPosition(targetNode, targetPort, false, targetDef, targetHeight)
-        : getPortPosition(targetNode, targetPort, false, targetHeight, undefined, targetDef);
+        ? getStreamPortPosition(targetNode, targetPort, false, targetDef, targetHeight, targetWidth)
+        : getPortPosition(targetNode, targetPort, false, targetHeight, targetWidth, targetDef);
     } else if (targetPos) {
       // Temp wire following mouse
       endPos = targetPos;

src/components/Toolbar/Toolbar.jsx

@@ -69,11 +69,16 @@ export function Toolbar() {
     dispatch({ type: 'MARK_CLEAN' });
 
     // Save flows to storage (including config nodes)
+    // Filter out runtime-only properties (starting with _) from config
     const flowConfig = {
       flows: flowState.flows,
       nodes: Object.values(flowState.nodes).map(node => {
         const { _node, ...config } = node;
-        return { ..._node, ...config };
+        // Filter out runtime-only properties (e.g., _currentValue, _activeButton)
+        const cleanConfig = Object.fromEntries(
+          Object.entries(config).filter(([key]) => !key.startsWith('_'))
+        );
+        return { ..._node, ...cleanConfig };
       }),
       configNodes: Object.values(flowState.configNodes).map(node => {
         const { _node, users: _users, ...config } = node;

src/context/RuntimeContext.jsx

@@ -132,7 +132,11 @@ export function RuntimeProvider({ children }) {
       // MediaElementSource actions
       'createMediaElementSource', 'mediaElementControl',
       // Stems actions
-      'createStemsNode', 'loadStems', 'controlStems'
+      'createStemsNode', 'loadStems', 'controlStems',
+      // Context state
+      'getAudioContextState',
+      // Speaker status
+      'hasActiveSources'
     ]);
 
     // Generic mainThread request handler (fire-and-forget)
@@ -661,15 +665,23 @@ export function RuntimeProvider({ children }) {
         const state = flowStateRef.current;
 
         // Save to persistent storage FIRST (before deploy which may hang on async onInit)
+        // Filter out runtime-only properties (starting with _) from config
         const flowConfig = {
           flows: state.flows,
           nodes: Object.values(state.nodes).map(node => {
             const { _node, ...config } = node;
-            return { ..._node, ...config };
+            // Filter out runtime-only properties (e.g., _currentValue, _activeButton)
+            const cleanConfig = Object.fromEntries(
+              Object.entries(config).filter(([key]) => !key.startsWith('_'))
+            );
+            return { ..._node, ...cleanConfig };
           }),
           configNodes: Object.values(state.configNodes).map(node => {
             const { _node, users: _users, ...config } = node;
-            return { ..._node, ...config };
+            const cleanConfig = Object.fromEntries(
+              Object.entries(config).filter(([key]) => !key.startsWith('_'))
+            );
+            return { ..._node, ...cleanConfig };
           })
         };
         logger.log(`[mcp] Saving ${flowConfig.nodes.length} nodes to storage`);