machinaos 0.0.1 → 0.0.7

package/client/src/components/ModelNode.tsx

@@ -1,286 +1,286 @@
-import React, { useMemo } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeData } from '../types/NodeTypes';
-import { useAppStore } from '../store/useAppStore';
-import { nodeDefinitions } from '../nodeDefinitions';
-import { useWebSocket, useNodeStatus } from '../contexts/WebSocketContext';
-import { useAppTheme } from '../hooks/useAppTheme';
-import { getAIProviderIcon } from './icons/AIProviderIcons';
-
-// Map credential names to provider keys
-const CREDENTIAL_TO_PROVIDER: Record<string, string> = {
-  'openaiApi': 'openai',
-  'anthropicApi': 'anthropic',
-  'googleAiApi': 'gemini',
-  'azureOpenaiApi': 'azure_openai',
-  'cohereApi': 'cohere',
-  'ollamaApi': 'ollama',
-  'mistralApi': 'mistral',
-  'openrouterApi': 'openrouter',
-  'groqApi': 'groq',
-  'cerebrasApi': 'cerebras'
-};
-
-const ModelNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
-  const theme = useAppTheme();
-  const { setSelectedNode } = useAppStore();
-  const { apiKeyStatuses } = useWebSocket();
-
-  // Get execution status from WebSocket
-  const nodeStatus = useNodeStatus(id);
-  const executionStatus = nodeStatus?.status || 'idle';
-  const isExecuting = executionStatus === 'executing' || executionStatus === 'waiting';
-
-  const definition = nodeDefinitions[type as keyof typeof nodeDefinitions];
-
-  // Check if this is a tool node
-  const isToolNode = type ? ['calculatorTool', 'currentTimeTool', 'webSearchTool'].includes(type) : false;
-
-  // Determine provider from node definition or type
-  const provider = useMemo(() => {
-    const credentials = definition?.credentials?.[0];
-    if (credentials?.name && CREDENTIAL_TO_PROVIDER[credentials.name]) {
-      return CREDENTIAL_TO_PROVIDER[credentials.name];
-    }
-
-    // Fallback: extract provider from node type
-    if (type?.includes('cerebras')) return 'cerebras';
-    if (type?.includes('groq')) return 'groq';
-    if (type?.includes('openrouter')) return 'openrouter';
-    if (type?.includes('openai')) return 'openai';
-    if (type?.includes('claude')) return 'anthropic';
-    if (type?.includes('gemini')) return 'gemini';
-    if (type?.includes('azure')) return 'azure_openai';
-    if (type?.includes('cohere')) return 'cohere';
-    if (type?.includes('ollama')) return 'ollama';
-    if (type?.includes('mistral')) return 'mistral';
-
-    return '';
-  }, [type, definition?.credentials]);
-
-  // Reactive API key status from WebSocket context
-  const hasApiKey = useMemo(() => {
-    if (!provider) return false;
-    const status = apiKeyStatuses[provider];
-    return status?.hasKey || false;
-  }, [provider, apiKeyStatuses]);
-
-  // Memory nodes are always "configured" (they don't need API keys)
-  const isMemoryNode = type === 'simpleMemory';
-
-  // Get the output handle ID based on node type
-  // Memory nodes use 'output-memory' to match their node definition output name
-  // Other nodes use 'output-model' for AI model configuration output
-  const outputHandleId = isMemoryNode ? 'output-memory' : 'output-model';
-
-  // Check if model is configured
-  const isConfigured = useMemo(() => {
-    // Memory nodes are always ready
-    if (isMemoryNode) return true;
-    const hasModel = data?.model && data.model.trim() !== '';
-    return hasModel && hasApiKey;
-  }, [data?.model, hasApiKey, isMemoryNode]);
-
-  const handleParametersClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
-  };
-
-  const nodeColor = definition?.defaults?.color || '#6b7280';
-
-  // Get provider icon/text for circular display
-  const getProviderDisplay = (): React.ReactNode => {
-    // Try to get official brand icon from @lobehub/icons
-    const IconComponent = getAIProviderIcon(provider);
-    if (IconComponent) {
-      return <IconComponent size={28} />;
-    }
-
-    // Use the icon from the node definition if available (emoji fallback)
-    if (definition?.icon) {
-      return <span>{definition.icon}</span>;
-    }
-
-    // Fallback logic based on node type (emojis for providers without @lobehub/icons)
-    if (type?.includes('azure')) return <span>☁️</span>;
-    if (type?.includes('cohere')) return <span>🌊</span>;
-    if (type?.includes('ollama')) return <span>🦙</span>;
-    if (type?.includes('mistral')) return <span>🌪️</span>;
-
-    return <span>AI</span>;
-  };
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: theme.fontSize.xs,
-        cursor: 'pointer',
-      }}
-    >
-      {/* Main Circular Node */}
-      <div
-        style={{
-          position: 'relative',
-          width: theme.nodeSize.square,
-          height: theme.nodeSize.square,
-          borderRadius: '50%',
-          background: theme.isDarkMode
-            ? `linear-gradient(135deg, ${nodeColor}20 0%, ${theme.colors.backgroundAlt} 100%)`
-            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}10 100%)`,
-          border: `2px solid ${isExecuting
-            ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
-            : selected
-              ? theme.colors.focus
-              : isConfigured
-                ? (theme.isDarkMode ? `${nodeColor}60` : `${nodeColor}50`)
-                : theme.dracula.red}`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: theme.colors.text,
-          fontSize: type === 'aiAgent' ? theme.fontSize.lg : theme.iconSize.xl,
-          fontWeight: theme.fontWeight.semibold,
-          transition: theme.transitions.fast,
-          boxShadow: isExecuting
-            ? theme.isDarkMode
-              ? `0 4px 12px ${theme.dracula.cyan}66, 0 0 0 3px ${theme.dracula.cyan}4D`
-              : `0 0 0 3px rgba(37, 99, 235, 0.5), 0 4px 16px rgba(37, 99, 235, 0.35)`
-            : selected
-              ? `0 4px 12px ${theme.colors.focusRing}, 0 0 0 2px ${theme.colors.focusRing}`
-              : isConfigured
-                ? (theme.isDarkMode
-                    ? `0 2px 8px ${nodeColor}30`
-                    : `0 2px 8px ${nodeColor}25, 0 4px 12px rgba(0,0,0,0.06)`)
-                : `0 2px 8px ${theme.dracula.red}4D`,
-          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
-        }}
-      >
-
-        {/* AI Text */}
-        {getProviderDisplay()}
-
-        {/* Parameters Button */}
-        <button
-          onClick={handleParametersClick}
-          style={{
-            position: 'absolute',
-            top: '-8px',
-            right: '-8px',
-            width: theme.nodeSize.paramButton,
-            height: theme.nodeSize.paramButton,
-            borderRadius: '50%',
-            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
-            border: `1px solid ${theme.isDarkMode ? theme.colors.border : `${nodeColor}40`}`,
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: theme.fontSize.xs,
-            color: theme.colors.textSecondary,
-            fontWeight: '400',
-            transition: theme.transitions.fast,
-            zIndex: 30,
-            boxShadow: theme.isDarkMode
-              ? `0 1px 3px ${theme.colors.shadow}`
-              : `0 1px 4px ${nodeColor}20`
-          }}
-          title="Edit Model Parameters"
-        >
-          ⚙️
-        </button>
-
-        {/* Configuration Status Indicator */}
-        <div
-          style={{
-            position: 'absolute',
-            top: '-4px',
-            left: '-4px',
-            width: theme.nodeSize.statusIndicator,
-            height: theme.nodeSize.statusIndicator,
-            borderRadius: '50%',
-            backgroundColor: isExecuting
-              ? theme.dracula.cyan
-              : executionStatus === 'success'
-                ? theme.dracula.green
-                : executionStatus === 'error'
-                  ? theme.dracula.red
-                  : isConfigured
-                    ? theme.dracula.green
-                    : hasApiKey
-                      ? theme.dracula.orange
-                      : theme.dracula.red,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            boxShadow: isExecuting
-              ? theme.isDarkMode
-                ? `0 0 6px ${theme.dracula.cyan}80`
-                : '0 0 4px rgba(37, 99, 235, 0.5)'
-              : theme.isDarkMode
-                ? `0 1px 3px ${theme.colors.shadow}`
-                : '0 1px 3px rgba(0,0,0,0.15)',
-            zIndex: 30,
-            animation: isExecuting ? 'pulse 1s ease-in-out infinite' : 'none',
-          }}
-          title={
-            isExecuting
-              ? 'Executing...'
-              : isMemoryNode
-                ? 'Memory node ready'
-                : isToolNode
-                  ? 'Tool ready'
-                  : isConfigured
-                    ? 'Model configured and ready'
-                    : hasApiKey
-                      ? 'API key found, model needs configuration'
-                      : 'API key required'
-          }
-        />
-
-        {/* Diamond Output Handle */}
-        <Handle
-          id={outputHandleId}
-          type="source"
-          position={Position.Top}
-          isConnectable={isConnectable && isConfigured}
-          style={{
-            position: 'absolute',
-            top: '-6px',
-            left: '50%',
-            transform: 'translateX(-50%) rotate(45deg)',
-            width: theme.nodeSize.statusIndicator,
-            height: theme.nodeSize.statusIndicator,
-            backgroundColor: isConfigured ? theme.dracula.cyan : theme.colors.textMuted,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff'}`,
-            borderRadius: '0',
-            opacity: isConfigured ? 1 : 0.6,
-            zIndex: 20,
-            boxShadow: theme.isDarkMode ? 'none' : '0 1px 2px rgba(0,0,0,0.1)'
-          }}
-          title={isMemoryNode ? 'Memory Output' : isConfigured ? 'Model Configuration Output' : 'Configure model to enable connection'}
-        />
-      </div>
-
-      {/* Model Name Below Circle */}
-      <div
-        style={{
-          marginTop: theme.spacing.sm,
-          fontSize: theme.fontSize.sm,
-          fontWeight: theme.fontWeight.medium,
-          color: theme.colors.text,
-          lineHeight: '1.2',
-          textAlign: 'center',
-          maxWidth: '120px'
-        }}
-      >
-        {data?.label || definition?.displayName}
-      </div>
-
-    </div>
-  );
-};
-
+import React, { useMemo } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+import { NodeData } from '../types/NodeTypes';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { useWebSocket, useNodeStatus } from '../contexts/WebSocketContext';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { getAIProviderIcon } from './icons/AIProviderIcons';
+
+// Map credential names to provider keys
+const CREDENTIAL_TO_PROVIDER: Record<string, string> = {
+  'openaiApi': 'openai',
+  'anthropicApi': 'anthropic',
+  'googleAiApi': 'gemini',
+  'azureOpenaiApi': 'azure_openai',
+  'cohereApi': 'cohere',
+  'ollamaApi': 'ollama',
+  'mistralApi': 'mistral',
+  'openrouterApi': 'openrouter',
+  'groqApi': 'groq',
+  'cerebrasApi': 'cerebras'
+};
+
+const ModelNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
+  const theme = useAppTheme();
+  const { setSelectedNode } = useAppStore();
+  const { apiKeyStatuses } = useWebSocket();
+
+  // Get execution status from WebSocket
+  const nodeStatus = useNodeStatus(id);
+  const executionStatus = nodeStatus?.status || 'idle';
+  const isExecuting = executionStatus === 'executing' || executionStatus === 'waiting';
+
+  // Check if this is a tool node (for status indicator tooltip)
+  const isToolNode = type ? ['calculatorTool', 'currentTimeTool', 'webSearchTool'].includes(type) : false;
+
+  const definition = nodeDefinitions[type as keyof typeof nodeDefinitions];
+
+  // Determine provider from node definition or type
+  const provider = useMemo(() => {
+    const credentials = definition?.credentials?.[0];
+    if (credentials?.name && CREDENTIAL_TO_PROVIDER[credentials.name]) {
+      return CREDENTIAL_TO_PROVIDER[credentials.name];
+    }
+
+    // Fallback: extract provider from node type
+    if (type?.includes('cerebras')) return 'cerebras';
+    if (type?.includes('groq')) return 'groq';
+    if (type?.includes('openrouter')) return 'openrouter';
+    if (type?.includes('openai')) return 'openai';
+    if (type?.includes('claude')) return 'anthropic';
+    if (type?.includes('gemini')) return 'gemini';
+    if (type?.includes('azure')) return 'azure_openai';
+    if (type?.includes('cohere')) return 'cohere';
+    if (type?.includes('ollama')) return 'ollama';
+    if (type?.includes('mistral')) return 'mistral';
+
+    return '';
+  }, [type, definition?.credentials]);
+
+  // Reactive API key status from WebSocket context
+  const hasApiKey = useMemo(() => {
+    if (!provider) return false;
+    const status = apiKeyStatuses[provider];
+    return status?.hasKey || false;
+  }, [provider, apiKeyStatuses]);
+
+  // Memory nodes are always "configured" (they don't need API keys)
+  const isMemoryNode = type === 'simpleMemory';
+
+  // Get the output handle ID based on node type
+  // Memory nodes use 'output-memory' to match their node definition output name
+  // Other nodes use 'output-model' for AI model configuration output
+  const outputHandleId = isMemoryNode ? 'output-memory' : 'output-model';
+
+  // Check if model is configured
+  const isConfigured = useMemo(() => {
+    // Memory nodes are always ready
+    if (isMemoryNode) return true;
+    const hasModel = data?.model && data.model.trim() !== '';
+    return hasModel && hasApiKey;
+  }, [data?.model, hasApiKey, isMemoryNode]);
+
+  const handleParametersClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
+  };
+
+  const nodeColor = definition?.defaults?.color || '#6b7280';
+
+  // Get provider icon/text for circular display
+  const getProviderDisplay = (): React.ReactNode => {
+    // Try to get official brand icon from @lobehub/icons
+    const IconComponent = getAIProviderIcon(provider);
+    if (IconComponent) {
+      return <IconComponent size={28} />;
+    }
+
+    // Use the icon from the node definition if available (emoji fallback)
+    if (definition?.icon) {
+      return <span>{definition.icon}</span>;
+    }
+
+    // Fallback logic based on node type (emojis for providers without @lobehub/icons)
+    if (type?.includes('azure')) return <span>☁️</span>;
+    if (type?.includes('cohere')) return <span>🌊</span>;
+    if (type?.includes('ollama')) return <span>🦙</span>;
+    if (type?.includes('mistral')) return <span>🌪️</span>;
+
+    return <span>AI</span>;
+  };
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: theme.fontSize.xs,
+        cursor: 'pointer',
+      }}
+    >
+      {/* Main Circular Node */}
+      <div
+        style={{
+          position: 'relative',
+          width: theme.nodeSize.square,
+          height: theme.nodeSize.square,
+          borderRadius: '50%',
+          background: theme.isDarkMode
+            ? `linear-gradient(135deg, ${nodeColor}20 0%, ${theme.colors.backgroundAlt} 100%)`
+            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}10 100%)`,
+          border: `2px solid ${isExecuting
+            ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
+            : selected
+              ? theme.colors.focus
+              : isConfigured
+                ? (theme.isDarkMode ? `${nodeColor}60` : `${nodeColor}50`)
+                : theme.dracula.red}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.colors.text,
+          fontSize: type === 'aiAgent' ? theme.fontSize.lg : theme.iconSize.xl,
+          fontWeight: theme.fontWeight.semibold,
+          transition: theme.transitions.fast,
+          boxShadow: isExecuting
+            ? theme.isDarkMode
+              ? `0 4px 12px ${theme.dracula.cyan}66, 0 0 0 3px ${theme.dracula.cyan}4D`
+              : `0 0 0 3px rgba(37, 99, 235, 0.5), 0 4px 16px rgba(37, 99, 235, 0.35)`
+            : selected
+              ? `0 4px 12px ${theme.colors.focusRing}, 0 0 0 2px ${theme.colors.focusRing}`
+              : isConfigured
+                ? (theme.isDarkMode
+                    ? `0 2px 8px ${nodeColor}30`
+                    : `0 2px 8px ${nodeColor}25, 0 4px 12px rgba(0,0,0,0.06)`)
+                : `0 2px 8px ${theme.dracula.red}4D`,
+          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
+        }}
+      >
+
+        {/* AI Text */}
+        {getProviderDisplay()}
+
+        {/* Parameters Button */}
+        <button
+          onClick={handleParametersClick}
+          style={{
+            position: 'absolute',
+            top: '-8px',
+            right: '-8px',
+            width: theme.nodeSize.paramButton,
+            height: theme.nodeSize.paramButton,
+            borderRadius: '50%',
+            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
+            border: `1px solid ${theme.isDarkMode ? theme.colors.border : `${nodeColor}40`}`,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: theme.fontSize.xs,
+            color: theme.colors.textSecondary,
+            fontWeight: '400',
+            transition: theme.transitions.fast,
+            zIndex: 30,
+            boxShadow: theme.isDarkMode
+              ? `0 1px 3px ${theme.colors.shadow}`
+              : `0 1px 4px ${nodeColor}20`
+          }}
+          title="Edit Model Parameters"
+        >
+          ⚙️
+        </button>
+
+        {/* Configuration Status Indicator */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-4px',
+            left: '-4px',
+            width: theme.nodeSize.statusIndicator,
+            height: theme.nodeSize.statusIndicator,
+            borderRadius: '50%',
+            backgroundColor: isExecuting
+              ? theme.dracula.cyan
+              : executionStatus === 'success'
+                ? theme.dracula.green
+                : executionStatus === 'error'
+                  ? theme.dracula.red
+                  : isConfigured
+                    ? theme.dracula.green
+                    : hasApiKey
+                      ? theme.dracula.orange
+                      : theme.dracula.red,
+            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
+            boxShadow: isExecuting
+              ? theme.isDarkMode
+                ? `0 0 6px ${theme.dracula.cyan}80`
+                : '0 0 4px rgba(37, 99, 235, 0.5)'
+              : theme.isDarkMode
+                ? `0 1px 3px ${theme.colors.shadow}`
+                : '0 1px 3px rgba(0,0,0,0.15)',
+            zIndex: 30,
+            animation: isExecuting ? 'pulse 1s ease-in-out infinite' : 'none',
+          }}
+          title={
+            isExecuting
+              ? 'Executing...'
+              : isMemoryNode
+                ? 'Memory node ready'
+                : isToolNode
+                  ? 'Tool ready'
+                  : isConfigured
+                    ? 'Model configured and ready'
+                    : hasApiKey
+                      ? 'API key found, model needs configuration'
+                      : 'API key required'
+          }
+        />
+
+        {/* Diamond Output Handle */}
+        <Handle
+          id={outputHandleId}
+          type="source"
+          position={Position.Top}
+          isConnectable={isConnectable && isConfigured}
+          style={{
+            position: 'absolute',
+            top: '-6px',
+            left: '50%',
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: theme.nodeSize.statusIndicator,
+            height: theme.nodeSize.statusIndicator,
+            backgroundColor: isConfigured ? theme.dracula.cyan : theme.colors.textMuted,
+            border: `2px solid ${theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff'}`,
+            borderRadius: '0',
+            opacity: isConfigured ? 1 : 0.6,
+            zIndex: 20,
+            boxShadow: theme.isDarkMode ? 'none' : '0 1px 2px rgba(0,0,0,0.1)'
+          }}
+          title={isMemoryNode ? 'Memory Output' : isConfigured ? 'Model Configuration Output' : 'Configure model to enable connection'}
+        />
+      </div>
+
+      {/* Model Name Below Circle */}
+      <div
+        style={{
+          marginTop: theme.spacing.sm,
+          fontSize: theme.fontSize.sm,
+          fontWeight: theme.fontWeight.medium,
+          color: theme.colors.text,
+          lineHeight: '1.2',
+          textAlign: 'center',
+          maxWidth: '120px'
+        }}
+      >
+        {data?.label || definition?.displayName}
+      </div>
+
+    </div>
+  );
+};
+
 export default ModelNode;

package/client/src/components/OpenAIChatModelNode.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import { NodeProps } from 'reactflow';
-import { NodeData } from '../types/NodeTypes';
-import BaseChatModelNode from './base/BaseChatModelNode';
-
-const OpenAIChatModelNode: React.FC<NodeProps<NodeData>> = (props) => {
-  return (
-    <BaseChatModelNode
-      {...props}
-      providerId="openai"
-      displayName="OpenAI"
-      icon="🤖"
-      color="#00A67E"
-    />
-  );
-};
-
+import React from 'react';
+import { NodeProps } from 'reactflow';
+import { NodeData } from '../types/NodeTypes';
+import BaseChatModelNode from './base/BaseChatModelNode';
+
+const OpenAIChatModelNode: React.FC<NodeProps<NodeData>> = (props) => {
+  return (
+    <BaseChatModelNode
+      {...props}
+      providerId="openai"
+      displayName="OpenAI"
+      icon="🤖"
+      color="#00A67E"
+    />
+  );
+};
+
 export default OpenAIChatModelNode;