machinaos 0.0.13 → 0.0.17

package/README.md

@@ -57,11 +57,11 @@ npm run docker:up
 
 | Provider | Models | Features |
 |----------|--------|----------|
-| **OpenAI** | GPT-4o, GPT-4 Turbo, o1, o3, o4-mini | JSON mode, reasoning effort |
-| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, Claude 3 Haiku | Extended thinking |
-| **Google** | Gemini 2.5 Pro, Gemini 2.5 Flash, Gemini 2.0 Flash Thinking | Multimodal, 1M context |
+| **OpenAI** | GPT-5, GPT-4o, o1, o3, o4 | 128K output, reasoning effort |
+| **Anthropic** | Claude Opus 4.6, Sonnet 4.5 | 128K output, extended thinking |
+| **Google** | Gemini 3.0, 2.5 Pro/Flash | 65K output, 1M context |
 | **OpenRouter** | 200+ models | Unified API for all providers |
-| **Groq** | Llama, Mixtral, Qwen | Ultra-fast inference |
+| **Groq** | Llama, Qwen | Ultra-fast inference |
 | **Cerebras** | Llama, Qwen | Ultra-fast on custom hardware |
 
 ### AI Agents & Skills

package/bin/cli.js

@@ -3,8 +3,10 @@
 import { spawn, execSync } from 'child_process';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
 
 const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const PKG = JSON.parse(readFileSync(resolve(ROOT, 'package.json'), 'utf-8'));
 
 const COMMANDS = {
   start: 'Start the development server',
@@ -16,6 +18,7 @@ const COMMANDS = {
   'docker:build': 'Build Docker images',
   'docker:logs': 'View Docker logs',
   help: 'Show this help message',
+  version: 'Show version number',
 };
 
 function printHelp() {
@@ -114,6 +117,8 @@ const cmd = process.argv[2] || 'help';
 
 if (cmd === 'help' || cmd === '--help' || cmd === '-h') {
   printHelp();
+} else if (cmd === 'version' || cmd === '--version' || cmd === '-v') {
+  console.log(`machinaos v${PKG.version}`);
 } else if (cmd === 'start' || cmd === 'build') {
   checkDeps();
   run(cmd);

package/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-flow-client",
   "private": true,
-  "version": "0.0.13",
+  "version": "0.0.17",
   "type": "module",
   "scripts": {
     "start": "vite --host 0.0.0.0",

package/client/src/components/AIAgentNode.tsx

@@ -66,28 +66,29 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   chatAgent: {
     icon: <span style={{ fontSize: '28px' }}>🧞</span>,
     title: 'Zeenie',
-    subtitle: 'Your Personal Assistant',
+    subtitle: 'Personal Assistant',
     themeColorKey: 'cyan',
     bottomHandles: [
       { id: 'input-skill', label: 'Skill', position: '25%' },
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
+    topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   socialReceive: {
     icon: <SocialReceiveIcon />,
@@ -122,7 +123,7 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
   },
   android_agent: {
     icon: <span style={{ fontSize: '28px' }}>📱</span>,
-    title: 'Android Control Agent',
+    title: 'Android Agent',
     subtitle: 'Device Control',
     themeColorKey: 'green',
     bottomHandles: [
@@ -130,12 +131,12 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   coding_agent: {
     icon: <span style={{ fontSize: '28px' }}>💻</span>,
@@ -147,16 +148,16 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   web_agent: {
     icon: <span style={{ fontSize: '28px' }}>🌐</span>,
-    title: 'Web Control Agent',
+    title: 'Web Agent',
     subtitle: 'Browser Automation',
     themeColorKey: 'pink',
     bottomHandles: [
@@ -164,16 +165,16 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   task_agent: {
     icon: <span style={{ fontSize: '28px' }}>📋</span>,
-    title: 'Task Management Agent',
+    title: 'Task Agent',
     subtitle: 'Task Automation',
     themeColorKey: 'purple',
     bottomHandles: [
@@ -181,16 +182,16 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   social_agent: {
     icon: <span style={{ fontSize: '28px' }}>📱</span>,
-    title: 'Social Media Agent',
+    title: 'Social Agent',
     subtitle: 'Social Messaging',
     themeColorKey: 'green',
     bottomHandles: [
@@ -198,12 +199,12 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   travel_agent: {
     icon: <span style={{ fontSize: '28px' }}>✈️</span>,
@@ -215,12 +216,12 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   tool_agent: {
     icon: <span style={{ fontSize: '28px' }}>🔧</span>,
@@ -232,29 +233,29 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   productivity_agent: {
     icon: <span style={{ fontSize: '28px' }}>⏰</span>,
     title: 'Productivity Agent',
-    subtitle: 'Productivity',
+    subtitle: 'Workflows',
     themeColorKey: 'cyan',
     bottomHandles: [
       { id: 'input-skill', label: 'Skill', position: '25%' },
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   payments_agent: {
     icon: <span style={{ fontSize: '28px' }}>💳</span>,
@@ -266,12 +267,12 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
   },
   consumer_agent: {
     icon: <span style={{ fontSize: '28px' }}>🛒</span>,
@@ -283,12 +284,46 @@ const AGENT_CONFIGS: Record<string, AgentConfig> = {
       { id: 'input-tools', label: 'Tool', position: '75%' },
     ],
     leftHandles: [
-      { id: 'input-memory', label: 'Memory', position: '55%' },
+      { id: 'input-memory', label: 'Memory', position: '65%' },
       { id: 'input-task', label: 'Task', position: '85%' },
     ],
     topOutputHandle: { id: 'output-top', label: 'Output' },
     width: 260,
-    height: 160,
+    height: 200,
+  },
+  autonomous_agent: {
+    icon: <span style={{ fontSize: '28px' }}>🎯</span>,
+    title: 'Autonomous Agent',
+    subtitle: 'Autonomous Ops',
+    themeColorKey: 'purple',
+    bottomHandles: [
+      { id: 'input-skill', label: 'Skill', position: '25%' },
+      { id: 'input-tools', label: 'Tool', position: '75%' },
+    ],
+    leftHandles: [
+      { id: 'input-memory', label: 'Memory', position: '65%' },
+      { id: 'input-task', label: 'Task', position: '85%' },
+    ],
+    topOutputHandle: { id: 'output-top', label: 'Output' },
+    width: 260,
+    height: 200,
+  },
+  orchestrator_agent: {
+    icon: <span style={{ fontSize: '28px' }}>🎼</span>,
+    title: 'Orchestrator Agent',
+    subtitle: 'Agent Coordination',
+    themeColorKey: 'cyan',
+    bottomHandles: [
+      { id: 'input-skill', label: 'Skill', position: '25%' },
+      { id: 'input-tools', label: 'Tool', position: '75%' },
+    ],
+    leftHandles: [
+      { id: 'input-memory', label: 'Memory', position: '65%' },
+      { id: 'input-task', label: 'Task', position: '85%' },
+    ],
+    topOutputHandle: { id: 'output-top', label: 'Output' },
+    width: 260,
+    height: 200,
   },
 };
 

package/client/src/components/CredentialsModal.tsx

@@ -13,7 +13,7 @@ import {
 import Modal from './ui/Modal';
 import QRCodeDisplay from './ui/QRCodeDisplay';
 import ApiKeyInput from './ui/ApiKeyInput';
-import { useApiKeys } from '../hooks/useApiKeys';
+import { useApiKeys, ProviderDefaults } from '../hooks/useApiKeys';
 import { useAppTheme } from '../hooks/useAppTheme';
 import { useWhatsAppStatus, useAndroidStatus, useWebSocket, RateLimitConfig, RateLimitStats } from '../contexts/WebSocketContext';
 import { useWhatsApp } from '../hooks/useWhatsApp';
@@ -114,7 +114,7 @@ interface Props {
 
 const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
   const theme = useAppTheme();
-  const { validateApiKey, saveApiKey, getStoredApiKey, hasStoredKey, removeApiKey, validateGoogleMapsKey, isConnected } = useApiKeys();
+  const { validateApiKey, saveApiKey, getStoredApiKey, hasStoredKey, removeApiKey, validateGoogleMapsKey, getProviderDefaults, saveProviderDefaults, isConnected } = useApiKeys();
   const whatsappStatus = useWhatsAppStatus();
   const androidStatus = useAndroidStatus();
 
@@ -138,6 +138,11 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
   const [proxyUrls, setProxyUrls] = useState<Record<string, string>>({});
   const [selectedItem, setSelectedItem] = useState<CredentialItem | null>(null);
 
+  // Provider defaults state
+  const [providerDefaults, setProviderDefaults] = useState<Record<string, ProviderDefaults>>({});
+  const [defaultsLoading, setDefaultsLoading] = useState<Record<string, boolean>>({});
+  const [defaultsDirty, setDefaultsDirty] = useState<Record<string, boolean>>({});
+
   // Load stored keys and proxy URLs
   const loadKeys = useCallback(async () => {
     const allItems = CATEGORIES.flatMap(c => c.items);
@@ -177,6 +182,42 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
     }
   }, [visible, isConnected, loadKeys]);
 
+  // Load provider defaults when AI provider is selected
+  useEffect(() => {
+    const isAIProvider = CATEGORIES.find(c => c.key === 'ai')?.items.some(i => i.id === selectedItem?.id);
+    if (selectedItem && !selectedItem.isSpecial && isAIProvider && isConnected) {
+      // Only load if we don't already have defaults for this provider
+      if (!providerDefaults[selectedItem.id]) {
+        const loadDefaults = async () => {
+          setDefaultsLoading(l => ({ ...l, [selectedItem.id]: true }));
+          const defaults = await getProviderDefaults(selectedItem.id);
+          setProviderDefaults(p => ({ ...p, [selectedItem.id]: defaults }));
+          setDefaultsLoading(l => ({ ...l, [selectedItem.id]: false }));
+        };
+        loadDefaults();
+      }
+    }
+  }, [selectedItem, isConnected, getProviderDefaults, providerDefaults]);
+
+  // Handler to update a single default value
+  const updateProviderDefault = (provider: string, key: keyof ProviderDefaults, value: number | boolean | string) => {
+    setProviderDefaults(p => ({
+      ...p,
+      [provider]: { ...(p[provider] || {}), [key]: value } as ProviderDefaults
+    }));
+    setDefaultsDirty(d => ({ ...d, [provider]: true }));
+  };
+
+  // Handler to save provider defaults
+  const handleSaveProviderDefaults = async (provider: string) => {
+    setDefaultsLoading(l => ({ ...l, [provider]: true }));
+    const success = await saveProviderDefaults(provider, providerDefaults[provider]);
+    if (success) {
+      setDefaultsDirty(d => ({ ...d, [provider]: false }));
+    }
+    setDefaultsLoading(l => ({ ...l, [provider]: false }));
+  };
+
   const handleValidate = async (id: string) => {
     const key = keys[id];
     if (!key?.trim()) return;
@@ -323,7 +364,7 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
 
   // WhatsApp actions
   const { getStatus: getWhatsAppStatus, startConnection, restartConnection } = useWhatsApp();
-  const { sendRequest, getWhatsAppRateLimitConfig, setWhatsAppRateLimitConfig, unpauseWhatsAppRateLimit } = useWebSocket();
+  const { sendRequest, setAndroidStatus, getWhatsAppRateLimitConfig, setWhatsAppRateLimitConfig, unpauseWhatsAppRateLimit } = useWebSocket();
 
   // Android state
   const [androidApiKey, setAndroidApiKey] = useState('');
@@ -381,8 +422,19 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
         url: import.meta.env.VITE_ANDROID_RELAY_URL || '',
         api_key: key,
       });
+      console.log('[Android] Connect response:', response);
       if (!response.success) {
         setAndroidError(response.error || 'Failed to connect');
+      } else if (response.qr_data) {
+        console.log('[Android] Setting QR data from response');
+        // Use response data directly - don't rely on broadcast timing
+        setAndroidStatus(prev => ({
+          ...prev,
+          connected: true,
+          paired: false,
+          qr_data: response.qr_data,
+          session_token: response.session_token || prev.session_token,
+        }));
       }
     } catch (err: any) {
       setAndroidError(err.message || 'Failed to connect');
@@ -592,7 +644,7 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
               <QRCodeDisplay
                 value={whatsappStatus.qr}
                 isConnected={whatsappStatus.connected}
-                size={200}
+                size={280}
                 connectedTitle="Already Connected!"
                 connectedSubtitle="No QR code needed"
                 loading={whatsappStatus.running && !whatsappStatus.qr && !whatsappStatus.connected}
@@ -916,12 +968,12 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
             backgroundColor: theme.colors.backgroundAlt,
             borderRadius: theme.borderRadius.lg,
             marginBottom: theme.spacing.xl,
-            minHeight: 200,
+            minHeight: 300,
           }}>
             <QRCodeDisplay
               value={androidStatus.qr_data}
               isConnected={androidStatus.paired}
-              size={260}
+              size={280}
               connectedTitle="Device Paired!"
               connectedSubtitle={androidStatus.device_name || androidStatus.device_id || 'Android Device'}
               loading={androidStatus.connected && !androidStatus.qr_data && !androidStatus.paired}
@@ -1213,6 +1265,110 @@ const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
           </div>
         )}
 
+        {/* Default Parameters Section - Only for AI providers */}
+        {CATEGORIES.find(c => c.key === 'ai')?.items.some(i => i.id === item.id) && (
+          <div style={{ marginBottom: theme.spacing.xl }}>
+            <label style={{
+              display: 'block',
+              fontSize: theme.fontSize.sm,
+              fontWeight: theme.fontWeight.medium,
+              color: theme.colors.text,
+              marginBottom: theme.spacing.md,
+            }}>
+              Default Parameters
+            </label>
+
+            <div style={{
+              padding: theme.spacing.lg,
+              backgroundColor: theme.colors.backgroundAlt,
+              borderRadius: theme.borderRadius.md,
+              border: `1px solid ${theme.colors.border}`,
+              opacity: defaultsLoading[item.id] ? 0.6 : 1,
+            }}>
+              {/* Temperature */}
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.md }}>
+                <div>
+                  <div style={{ fontSize: theme.fontSize.sm, fontWeight: theme.fontWeight.medium, color: theme.colors.text }}>Temperature</div>
+                  <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>Controls randomness (0-2)</div>
+                </div>
+                <InputNumber
+                  size="small"
+                  value={providerDefaults[item.id]?.temperature ?? 0.7}
+                  onChange={(v) => updateProviderDefault(item.id, 'temperature', v ?? 0.7)}
+                  min={0}
+                  max={2}
+                  step={0.1}
+                  style={{ width: 80 }}
+                />
+              </div>
+
+              {/* Max Tokens */}
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.md }}>
+                <div>
+                  <div style={{ fontSize: theme.fontSize.sm, fontWeight: theme.fontWeight.medium, color: theme.colors.text }}>Max Tokens</div>
+                  <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>Maximum response length</div>
+                </div>
+                <InputNumber
+                  size="small"
+                  value={providerDefaults[item.id]?.max_tokens ?? 4096}
+                  onChange={(v) => updateProviderDefault(item.id, 'max_tokens', v ?? 4096)}
+                  min={1}
+                  max={128000}
+                  style={{ width: 100 }}
+                />
+              </div>
+
+              {/* Thinking/Reasoning Toggle */}
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.md }}>
+                <div>
+                  <div style={{ fontSize: theme.fontSize.sm, fontWeight: theme.fontWeight.medium, color: theme.colors.text }}>Thinking/Reasoning</div>
+                  <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>Extended thinking for supported models</div>
+                </div>
+                <Switch
+                  size="small"
+                  checked={providerDefaults[item.id]?.thinking_enabled ?? false}
+                  onChange={(v) => updateProviderDefault(item.id, 'thinking_enabled', v)}
+                />
+              </div>
+
+              {/* Thinking Budget - conditional */}
+              {providerDefaults[item.id]?.thinking_enabled && (
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.md }}>
+                  <div>
+                    <div style={{ fontSize: theme.fontSize.sm, fontWeight: theme.fontWeight.medium, color: theme.colors.text }}>Thinking Budget</div>
+                    <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>Token budget (1024-16000)</div>
+                  </div>
+                  <InputNumber
+                    size="small"
+                    value={providerDefaults[item.id]?.thinking_budget ?? 2048}
+                    onChange={(v) => updateProviderDefault(item.id, 'thinking_budget', v ?? 2048)}
+                    min={1024}
+                    max={16000}
+                    style={{ width: 80 }}
+                  />
+                </div>
+              )}
+
+              {/* Save Button */}
+              <Button
+                size="small"
+                onClick={() => handleSaveProviderDefaults(item.id)}
+                loading={defaultsLoading[item.id]}
+                disabled={!defaultsDirty[item.id]}
+                block
+                style={{
+                  marginTop: theme.spacing.sm,
+                  backgroundColor: defaultsDirty[item.id] ? `${theme.dracula.green}25` : undefined,
+                  borderColor: defaultsDirty[item.id] ? `${theme.dracula.green}60` : undefined,
+                  color: defaultsDirty[item.id] ? theme.dracula.green : undefined,
+                }}
+              >
+                Save Defaults
+              </Button>
+            </div>
+          </div>
+        )}
+
         {/* Models list */}
         {models[item.id]?.length > 0 && (
           <div style={{ marginBottom: theme.spacing.xl }}>

package/client/src/components/ParameterRenderer.tsx

@@ -768,6 +768,8 @@ interface ParameterRendererProps {
   onParameterChange?: (paramName: string, value: any) => void;
   onClosePanel?: () => void;
   isLoadingParameters?: boolean;
+  /** For memory nodes: the connected agent's node ID for auto-session display */
+  connectedAgentId?: string | null;
 }
 
 // Type guard to check if parameter is INodeProperties
@@ -782,6 +784,7 @@ const ParameterRenderer: React.FC<ParameterRendererProps> = ({
   allParameters,
   onParameterChange,
   isLoadingParameters = false,
+  connectedAgentId,
 }) => {
   const theme = useAppTheme();
   // Don't use default while loading - wait for actual saved value to load
@@ -1380,6 +1383,44 @@ const ParameterRenderer: React.FC<ParameterRendererProps> = ({
           );
         }
 
+        // Special case for sessionId parameter - show auto-derived session ID in placeholder
+        if (parameter.name === 'sessionId' && connectedAgentId) {
+          const effectivePlaceholder = connectedAgentId;
+
+          return (
+            <input
+              type="text"
+              value={currentValue || ''}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder={effectivePlaceholder}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              style={{
+                width: '100%',
+                padding: '10px 12px',
+                border: isDragOver ? `2px solid ${theme.accent.cyan}` : `1px solid ${theme.colors.border}`,
+                borderRadius: '6px',
+                fontSize: '14px',
+                backgroundColor: isDragOver ? `${theme.accent.cyan}10` : theme.colors.backgroundAlt,
+                color: currentValue && currentValue.includes('{{') ? theme.accent.yellow : theme.colors.text,
+                outline: 'none',
+                transition: 'all 0.2s ease',
+                fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
+                boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)'
+              }}
+              onFocus={(e) => {
+                e.target.style.borderColor = theme.accent.cyan;
+                e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
+              }}
+              onBlur={(e) => {
+                e.target.style.borderColor = theme.colors.border;
+                e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
+              }}
+            />
+          );
+        }
+
         return (
           <input
             type={isPassword ? "password" : "text"}

package/client/src/components/parameterPanel/InputSection.tsx

@@ -88,7 +88,8 @@ const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) =
       const AGENT_WITH_SKILLS_TYPES = [
         'aiAgent', 'chatAgent', 'android_agent', 'coding_agent',
         'web_agent', 'task_agent', 'social_agent', 'travel_agent',
-        'tool_agent', 'productivity_agent', 'payments_agent', 'consumer_agent'
+        'tool_agent', 'productivity_agent', 'payments_agent', 'consumer_agent',
+        'autonomous_agent', 'orchestrator_agent'
       ];
       // Check if current node is an agent that shows skills in Middle Section
       const isAgentWithSkills = AGENT_WITH_SKILLS_TYPES.includes(currentNodeType || '');
@@ -486,7 +487,7 @@ const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) =
             const isMemory = nodeType === 'simpleMemory';
             const nodeTypeLower = nodeType.toLowerCase();
             // AI agent types that use the AI output schema
-            const aiAgentTypes = ['aiAgent', 'chatAgent', 'android_agent', 'coding_agent', 'web_agent', 'task_agent', 'social_agent', 'travel_agent', 'tool_agent', 'productivity_agent', 'payments_agent', 'consumer_agent'];
+            const aiAgentTypes = ['aiAgent', 'chatAgent', 'android_agent', 'coding_agent', 'web_agent', 'task_agent', 'social_agent', 'travel_agent', 'tool_agent', 'productivity_agent', 'payments_agent', 'consumer_agent', 'autonomous_agent', 'orchestrator_agent'];
             const isAI = !isMemory && (nodeTypeLower.includes('chatmodel') || aiAgentTypes.includes(nodeType));
             const isFile = nodeType.includes('file');
             const isWhatsAppDb = nodeType === 'whatsappDb';