machinaos 0.0.1

package/client/src/index.css

@@ -0,0 +1,315 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  #root {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+/* ============================================================================
+   LIGHT MODE STYLES - Modern, clean design with proper contrast
+   ============================================================================ */
+
+/* Light mode React Flow canvas - cooler gray for better node contrast */
+.react-flow {
+  background-color: #e8ecf1 !important;
+}
+
+/* Light mode dot pattern for canvas - more visible */
+.react-flow__background pattern circle {
+  fill: #9ca3af !important;
+}
+
+/* Light mode controls - elevated card style */
+.react-flow__controls {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.react-flow__controls button,
+.react-flow__controls-button {
+  background: #ffffff;
+  border: none;
+  border-bottom: 1px solid #f1f5f9;
+  color: #475569;
+}
+
+.react-flow__controls button:last-child,
+.react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.react-flow__controls button:hover,
+.react-flow__controls-button:hover {
+  background: #f8fafc;
+}
+
+.react-flow__controls button svg,
+.react-flow__controls-button svg {
+  fill: #475569 !important;
+}
+
+.react-flow__controls button svg path,
+.react-flow__controls-button svg path {
+  fill: #475569 !important;
+}
+
+/* Light mode minimap */
+.react-flow__minimap {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+/* Light mode attribution */
+.react-flow__attribution {
+  background: rgba(255, 255, 255, 0.9);
+  color: #94a3b8;
+}
+
+/* Light mode scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+::-webkit-scrollbar-corner {
+  background: #f1f5f9;
+}
+
+/* Firefox scrollbar - light mode */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+/* Light mode selection box */
+.react-flow__selection {
+  background: rgba(59, 130, 246, 0.08);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+}
+
+/* Light mode connection line */
+.react-flow__connection-line {
+  stroke: #94a3b8;
+  stroke-width: 2;
+}
+
+/* ============================================================================
+   DARK MODE STYLES - Solarized/Dracula inspired
+   ============================================================================ */
+
+.dark .react-flow {
+  background-color: hsl(var(--background)) !important;
+}
+
+.dark .react-flow__node {
+  color: hsl(var(--foreground));
+}
+
+.dark .react-flow__edge {
+  stroke: hsl(var(--border));
+}
+
+.dark .react-flow__controls {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.dark .react-flow__controls button,
+.dark .react-flow__controls-button {
+  background: #1f2937;
+  border: none;
+  border-bottom: 1px solid #374151;
+  color: #e5e7eb;
+}
+
+.dark .react-flow__controls button:last-child,
+.dark .react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.dark .react-flow__controls button:hover,
+.dark .react-flow__controls-button:hover {
+  background: #374151;
+}
+
+.dark .react-flow__controls button svg,
+.dark .react-flow__controls-button svg {
+  fill: #e5e7eb !important;
+}
+
+.dark .react-flow__controls button svg path,
+.dark .react-flow__controls-button svg path {
+  fill: #e5e7eb !important;
+}
+
+.dark .react-flow__minimap {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+}
+
+.dark .react-flow__background {
+  background-color: hsl(var(--background));
+}
+
+.dark .react-flow__attribution {
+  background: hsl(var(--card));
+  color: hsl(var(--muted-foreground));
+}
+
+/* Node execution status animations - enhanced for visibility */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.03);
+  }
+}
+
+/* Light mode specific pulse with stronger effect */
+@keyframes pulseLight {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    opacity: 0.95;
+    transform: scale(1.04);
+    filter: brightness(1.05);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Custom Scrollbar - Solarized Dark Theme */
+.dark ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: #073642;
+  border-radius: 4px;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #586e75;
+  border-radius: 4px;
+  border: 1px solid #073642;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #657b83;
+}
+
+.dark ::-webkit-scrollbar-corner {
+  background: #073642;
+}
+
+/* Firefox scrollbar - dark mode */
+.dark {
+  scrollbar-width: thin;
+  scrollbar-color: #586e75 #073642;
+}

package/client/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+import { ThemeProvider } from './contexts/ThemeContext'
+import { AuthProvider } from './contexts/AuthContext'
+import { WebSocketProvider } from './contexts/WebSocketContext'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <AuthProvider>
+        <WebSocketProvider>
+          <App />
+        </WebSocketProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  </StrictMode>,
+)

package/client/src/nodeDefinitions/aiAgentNodes.ts

@@ -0,0 +1,336 @@
+// AI Agent Node Definitions - AI agents and AI processing components
+import {
+  INodeTypeDescription,
+  NodeConnectionType
+} from '../types/INodeProperties';
+
+// ============================================================================
+// AI AGENT AND CHAT NODES
+// ============================================================================
+
+export const aiAgentNodes: Record<string, INodeTypeDescription> = {
+  // AI Agent Node - n8n official style implementation (first for top position in Agents category)
+  aiAgent: {
+    displayName: 'AI Agent',
+    name: 'aiAgent',
+    icon: '🤖',
+    group: ['agent'],
+    version: 1,
+    subtitle: 'Tools Agent',
+    description: 'Advanced AI agent with tool calling capabilities, memory, and iterative reasoning',
+    defaults: { name: 'AI Agent', color: '#9333EA' },
+    inputs: [
+      {
+        name: 'main',
+        displayName: 'Input',
+        type: 'main' as NodeConnectionType,
+        description: 'Agent input'
+      },
+      {
+        name: 'memory',
+        displayName: 'Memory',
+        type: 'main' as NodeConnectionType,
+        description: 'Memory node connection for conversation history'
+      }
+    ],
+    outputs: [{
+      name: 'main',
+      displayName: 'Output',
+      type: 'main' as NodeConnectionType,
+      description: 'Agent output'
+    }],
+    properties: [
+      {
+        displayName: 'AI Provider',
+        name: 'provider',
+        type: 'options',
+        options: [
+          {
+            name: 'OpenAI',
+            value: 'openai'
+          },
+          {
+            name: 'Anthropic (Claude)',
+            value: 'anthropic'
+          },
+          {
+            name: 'Google (Gemini)',
+            value: 'gemini'
+          }
+        ],
+        default: 'openai',
+        description: 'The AI provider to use (configure API keys in Credentials)'
+      },
+      {
+        displayName: 'Model',
+        name: 'model',
+        type: 'string',
+        default: '',
+        required: true,
+        placeholder: 'Select a model...',
+        description: 'AI model to use for the agent',
+        typeOptions: {
+          dynamicOptions: true,
+          dependsOn: ['provider']
+        }
+      },
+      {
+        displayName: 'Prompt',
+        name: 'prompt',
+        type: 'string',
+        default: '{{ $json.chatInput }}',
+        required: true,
+        typeOptions: {
+          rows: 4
+        },
+        description: 'The prompt template for the AI agent',
+        placeholder: 'Enter your prompt or use template variables...'
+      },
+      {
+        displayName: 'System Message',
+        name: 'systemMessage',
+        type: 'string',
+        default: 'You are a helpful assistant',
+        typeOptions: {
+          rows: 3
+        },
+        description: 'Define the behavior and personality of the AI agent'
+      },
+      {
+        displayName: 'Options',
+        name: 'options',
+        type: 'collection',
+        placeholder: 'Add Option',
+        default: {},
+        options: [
+          {
+            displayName: 'Temperature',
+            name: 'temperature',
+            type: 'number',
+            default: 0.7,
+            typeOptions: { minValue: 0, maxValue: 2, numberStepSize: 0.1 },
+            description: 'Controls randomness in responses'
+          },
+          {
+            displayName: 'Maximum Tokens',
+            name: 'maxTokens',
+            type: 'number',
+            default: 1000,
+            typeOptions: { minValue: 1, maxValue: 8192 },
+            description: 'Maximum number of tokens to generate'
+          },
+          {
+            displayName: 'Thinking/Reasoning',
+            name: 'thinkingEnabled',
+            type: 'boolean',
+            default: false,
+            description: 'Enable extended thinking for supported providers (Anthropic, OpenAI o-series, Gemini, Groq, Cerebras)'
+          },
+          {
+            displayName: 'Thinking Budget',
+            name: 'thinkingBudget',
+            type: 'number',
+            default: 2048,
+            typeOptions: { minValue: 1024, maxValue: 16000 },
+            description: 'Token budget for thinking (Claude, Gemini, Cerebras)',
+            displayOptions: { show: { thinkingEnabled: [true] } }
+          },
+          {
+            displayName: 'Reasoning Effort',
+            name: 'reasoningEffort',
+            type: 'options',
+            options: [
+              { name: 'Low', value: 'low' },
+              { name: 'Medium', value: 'medium' },
+              { name: 'High', value: 'high' }
+            ],
+            default: 'medium',
+            description: 'Reasoning effort level (OpenAI o-series, Groq)',
+            displayOptions: { show: { thinkingEnabled: [true] } }
+          }
+        ] as any
+      }
+    ]
+  },
+
+  // Chat Agent Node - Conversational AI agent with skill-based tool calling
+  chatAgent: {
+    displayName: 'Chat Agent',
+    name: 'chatAgent',
+    icon: '💬',
+    group: ['agent'],
+    version: 1,
+    subtitle: 'Conversational Agent',
+    description: 'Conversational AI agent with skill-based tool calling for multi-turn chat interactions',
+    defaults: { name: 'Chat Agent', color: '#3B82F6' },
+    inputs: [
+      {
+        name: 'main',
+        displayName: 'Input',
+        type: 'main' as NodeConnectionType,
+        description: 'Chat input'
+      },
+      {
+        name: 'memory',
+        displayName: 'Memory',
+        type: 'main' as NodeConnectionType,
+        description: 'Memory node for conversation history'
+      },
+      {
+        name: 'skill',
+        displayName: 'Skill',
+        type: 'main' as NodeConnectionType,
+        description: 'Skill nodes that provide context and instructions via SKILL.md'
+      },
+      {
+        name: 'tools',
+        displayName: 'Tool',
+        type: 'main' as NodeConnectionType,
+        description: 'Tool nodes (httpRequest, etc.) for LangGraph tool calling'
+      }
+    ],
+    outputs: [{
+      name: 'main',
+      displayName: 'Output',
+      type: 'main' as NodeConnectionType,
+      description: 'response, model, provider, timestamp'
+    }],
+    properties: [
+      {
+        displayName: 'AI Provider',
+        name: 'provider',
+        type: 'options',
+        options: [
+          {
+            name: 'OpenAI',
+            value: 'openai'
+          },
+          {
+            name: 'Anthropic (Claude)',
+            value: 'anthropic'
+          },
+          {
+            name: 'Google (Gemini)',
+            value: 'gemini'
+          },
+          {
+            name: 'Groq',
+            value: 'groq'
+          },
+          {
+            name: 'OpenRouter',
+            value: 'openrouter'
+          }
+        ],
+        default: 'openai',
+        description: 'The AI provider to use (configure API keys in Credentials)'
+      },
+      {
+        displayName: 'Model',
+        name: 'model',
+        type: 'string',
+        default: '',
+        required: true,
+        placeholder: 'Select a model...',
+        description: 'AI model to use for the chat',
+        typeOptions: {
+          dynamicOptions: true,
+          dependsOn: ['provider']
+        }
+      },
+      {
+        displayName: 'Prompt',
+        name: 'prompt',
+        type: 'string',
+        default: '',
+        typeOptions: { rows: 4 },
+        description: 'The message to send to the AI. Use {{chatTrigger.message}} or leave empty to auto-use connected node output.',
+        placeholder: '{{chatTrigger.message}}'
+      },
+      {
+        displayName: 'System Message',
+        name: 'systemMessage',
+        type: 'string',
+        default: 'You are a helpful assistant.',
+        typeOptions: { rows: 3 },
+        description: 'Define the behavior and personality of the AI agent'
+      }
+    ]
+  },
+
+  // Simple Memory Node - conversation history storage for AI agents
+  // Markdown-based memory visible and editable in UI
+  simpleMemory: {
+    displayName: 'Simple Memory',
+    name: 'simpleMemory',
+    icon: '🧠',
+    group: ['skill', 'memory'],  // 'skill' = appears in AI Skills category
+    version: 1,
+    description: 'Markdown-based conversation memory with optional vector DB for long-term retrieval',
+    defaults: { name: 'Memory', color: '#8b5cf6' },
+    inputs: [],  // No input - memory node is passive
+    outputs: [{
+      name: 'memory',
+      displayName: 'Memory',
+      type: 'main' as NodeConnectionType,
+      description: 'session_id, messages, message_count'
+    }],
+    properties: [
+      {
+        displayName: 'Session ID',
+        name: 'sessionId',
+        type: 'string',
+        default: 'default',
+        required: true,
+        description: 'Unique identifier for conversation session'
+      },
+      {
+        displayName: 'Window Size',
+        name: 'windowSize',
+        type: 'number',
+        default: 10,
+        typeOptions: { minValue: 1, maxValue: 100 },
+        description: 'Number of message pairs to keep in short-term memory'
+      },
+      {
+        displayName: 'Conversation History',
+        name: 'memoryContent',
+        type: 'string',
+        default: '# Conversation History\n\n*No messages yet.*\n',
+        typeOptions: {
+          rows: 15,
+          editor: 'code',
+          editorLanguage: 'markdown'
+        },
+        description: 'Recent conversation history (editable)'
+      },
+      {
+        displayName: 'Enable Long-Term Memory',
+        name: 'longTermEnabled',
+        type: 'boolean',
+        default: false,
+        description: 'Archive old messages to vector DB for semantic retrieval'
+      },
+      {
+        displayName: 'Retrieval Count',
+        name: 'retrievalCount',
+        type: 'number',
+        default: 3,
+        typeOptions: { minValue: 1, maxValue: 10 },
+        description: 'Number of relevant memories to retrieve from long-term storage',
+        displayOptions: {
+          show: {
+            longTermEnabled: [true]
+          }
+        }
+      }
+    ]
+  }
+};
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+// List of AI-related node types for easy identification (chat models removed - now in aiModelNodes.ts)
+export const AI_NODE_TYPES = ['aiAgent', 'chatAgent', 'simpleMemory'];