machinaos 0.0.21 → 0.0.23

package/client/src/components/TeamMonitorNode.tsx

@@ -0,0 +1,269 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Handle, Position, NodeProps, useEdges, useNodes } from 'reactflow';
+import { NodeData } from '../types/NodeTypes';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { useWebSocket } from '../contexts/WebSocketContext';
+
+// AI Employee node types that can have teams
+const TEAM_LEAD_TYPES = ['ai_employee', 'orchestrator_agent'];
+
+interface TeamTask {
+  id: string;
+  title: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'failed' | 'skipped';
+  assigned_to?: string;
+}
+
+interface TeamMember {
+  agent_node_id: string;
+  agent_type: string;
+  status: string;
+}
+
+interface TeamStatus {
+  team_id: string;
+  members: TeamMember[];
+  tasks: {
+    total: number;
+    completed: number;
+    active: number;
+    pending: number;
+    failed: number;
+  };
+  active_tasks: TeamTask[];
+}
+
+const TeamMonitorNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
+  const theme = useAppTheme();
+  const { setSelectedNode } = useAppStore();
+  const { sendRequest } = useWebSocket();
+  const edges = useEdges();
+  const nodes = useNodes();
+
+  const [teamStatus, setTeamStatus] = useState<TeamStatus | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const definition = nodeDefinitions[type as keyof typeof nodeDefinitions];
+  const nodeColor = definition?.defaults?.color || '#8b5cf6';
+
+  // Find connected AI Employee/Orchestrator node to get workflow context
+  const connectedTeamLead = useMemo(() => {
+    // Find edges where this node is the target (input)
+    const incomingEdges = edges.filter(e => e.target === id);
+    for (const edge of incomingEdges) {
+      const sourceNode = nodes.find(n => n.id === edge.source);
+      if (sourceNode && TEAM_LEAD_TYPES.includes(sourceNode.type || '')) {
+        return sourceNode;
+      }
+    }
+    return null;
+  }, [edges, nodes, id]);
+
+  // Fetch team status
+  const fetchTeamStatus = useCallback(async () => {
+    // Use explicit teamId from data, or get from connected node's workflow context
+    const teamId = data?.teamId;
+    if (!teamId && !connectedTeamLead) return;
+
+    setIsLoading(true);
+    try {
+      // Request team status - backend will find the active team for the workflow
+      const response = await sendRequest<{ status?: any }>('get_team_status', {
+        team_id: teamId,
+        team_lead_node_id: connectedTeamLead?.id
+      });
+      if (response?.status) {
+        setTeamStatus({
+          team_id: response.status.team_id || teamId || '',
+          members: response.status.members || [],
+          tasks: {
+            total: response.status.task_count || 0,
+            completed: response.status.completed_count || 0,
+            active: response.status.active_count || 0,
+            pending: response.status.pending_count || 0,
+            failed: response.status.failed_count || 0,
+          },
+          active_tasks: response.status.active_tasks || [],
+        });
+      }
+    } catch (error) {
+      console.error('Failed to fetch team status:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [data?.teamId, connectedTeamLead, sendRequest]);
+
+  // Auto-refresh when connected to a team lead
+  useEffect(() => {
+    const interval = data?.refreshInterval || 2000;
+    if (interval > 0 && (data?.teamId || connectedTeamLead)) {
+      fetchTeamStatus();
+      const timer = setInterval(fetchTeamStatus, interval);
+      return () => clearInterval(timer);
+    }
+  }, [data?.refreshInterval, data?.teamId, connectedTeamLead, fetchTeamStatus]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return theme.dracula.green;
+      case 'in_progress': return theme.dracula.cyan;
+      case 'failed': return theme.dracula.red;
+      case 'pending': return theme.dracula.orange;
+      default: return theme.colors.textSecondary;
+    }
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      style={{
+        width: 200,
+        minHeight: 120,
+        borderRadius: 8,
+        background: theme.isDarkMode
+          ? `linear-gradient(135deg, ${nodeColor}15 0%, ${theme.colors.background} 100%)`
+          : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}08 100%)`,
+        border: `2px solid ${selected ? theme.colors.focus : nodeColor + '60'}`,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: 10,
+        overflow: 'hidden',
+      }}
+    >
+      {/* Header */}
+      <div style={{
+        padding: '6px 8px',
+        borderBottom: `1px solid ${theme.colors.border}`,
+        background: `${nodeColor}20`,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+      }}>
+        <span style={{ fontSize: 14 }}>📊</span>
+        <span style={{ fontWeight: 600, color: theme.colors.text, fontSize: 11 }}>
+          {data?.label || 'Team Monitor'}
+        </span>
+      </div>
+
+      {/* Stats Grid */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: 2,
+        padding: '6px 4px',
+        borderBottom: `1px solid ${theme.colors.border}`,
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 12, fontWeight: 'bold', color: theme.dracula.purple }}>
+            {teamStatus?.members?.length || 0}
+          </div>
+          <div style={{ fontSize: 8, color: theme.colors.textSecondary }}>Team</div>
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 12, fontWeight: 'bold', color: theme.dracula.cyan }}>
+            {teamStatus?.tasks?.total || 0}
+          </div>
+          <div style={{ fontSize: 8, color: theme.colors.textSecondary }}>Tasks</div>
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 12, fontWeight: 'bold', color: theme.dracula.green }}>
+            {teamStatus?.tasks?.completed || 0}
+          </div>
+          <div style={{ fontSize: 8, color: theme.colors.textSecondary }}>Done</div>
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 12, fontWeight: 'bold', color: theme.dracula.orange }}>
+            {teamStatus?.tasks?.active || 0}
+          </div>
+          <div style={{ fontSize: 8, color: theme.colors.textSecondary }}>Active</div>
+        </div>
+      </div>
+
+      {/* Active Tasks */}
+      <div style={{ padding: '4px 6px', maxHeight: 80, overflow: 'auto' }}>
+        {!data?.teamId && !connectedTeamLead ? (
+          <div style={{ color: theme.colors.textSecondary, textAlign: 'center', padding: 8, fontSize: 9 }}>
+            Connect to AI Employee
+          </div>
+        ) : isLoading && !teamStatus ? (
+          <div style={{ color: theme.colors.textSecondary, textAlign: 'center', padding: 8, fontSize: 9 }}>
+            Loading...
+          </div>
+        ) : teamStatus?.active_tasks && teamStatus.active_tasks.length > 0 ? (
+          teamStatus.active_tasks.slice(0, 3).map((task) => (
+            <div key={task.id} style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              padding: '2px 0',
+              fontSize: 9,
+            }}>
+              <span style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                backgroundColor: getStatusColor(task.status),
+                flexShrink: 0,
+              }} />
+              <span style={{
+                color: theme.colors.text,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                flex: 1,
+              }}>
+                {task.title}
+              </span>
+            </div>
+          ))
+        ) : (
+          <div style={{ color: theme.colors.textSecondary, textAlign: 'center', padding: 4, fontSize: 9 }}>
+            No active tasks
+          </div>
+        )}
+      </div>
+
+      {/* Input Handle */}
+      <Handle
+        id="input-team"
+        type="target"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        style={{
+          left: -6,
+          top: '50%',
+          width: 10,
+          height: 10,
+          backgroundColor: theme.isDarkMode ? theme.colors.background : '#ffffff',
+          border: `2px solid ${nodeColor}`,
+          borderRadius: '50%',
+        }}
+      />
+
+      {/* Output Handle */}
+      <Handle
+        id="output-main"
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        style={{
+          right: -6,
+          top: '50%',
+          width: 10,
+          height: 10,
+          backgroundColor: nodeColor,
+          border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
+          borderRadius: '50%',
+        }}
+      />
+    </div>
+  );
+};
+
+export default TeamMonitorNode;

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

@@ -252,6 +252,31 @@ const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) =
                 body: 'string',
                 json: 'object'
               },
+              // Twitter node output schemas
+              twitter: {
+                tweet_id: 'string',
+                text: 'string',
+                author_id: 'string',
+                created_at: 'string',
+                action: 'string'
+              },
+              twitterSearch: {
+                tweets: [{
+                  id: 'string',
+                  text: 'string',
+                  author_id: 'string',
+                  created_at: 'string'
+                }],
+                count: 'number',
+                query: 'string'
+              },
+              twitterUser: {
+                id: 'string',
+                username: 'string',
+                name: 'string',
+                profile_image_url: 'string',
+                verified: 'boolean'
+              },
               httpRequest: {
                 status: 'number',
                 data: 'any',

package/client/src/contexts/WebSocketContext.tsx

@@ -90,6 +90,15 @@ export interface WhatsAppStatus {
   timestamp?: number;
 }
 
+export interface TwitterStatus {
+  connected: boolean;
+  username: string | null;
+  user_id: string | null;
+  name?: string;
+  profile_image_url?: string;
+  verified?: boolean;
+}
+
 // WhatsApp Rate Limit types (from Go RPC schema)
 export interface RateLimitConfig {
   enabled: boolean;
@@ -203,6 +212,7 @@ interface WebSocketContextValue {
   androidStatus: AndroidStatus;
   setAndroidStatus: React.Dispatch<React.SetStateAction<AndroidStatus>>;
   whatsappStatus: WhatsAppStatus;
+  twitterStatus: TwitterStatus;
   whatsappMessages: WhatsAppMessage[];  // History of received messages
   lastWhatsAppMessage: WhatsAppMessage | null;  // Most recent message
   apiKeyStatuses: Record<string, ApiKeyStatus>;
@@ -322,6 +332,12 @@ const defaultWhatsAppStatus: WhatsAppStatus = {
   pairing: false
 };
 
+const defaultTwitterStatus: TwitterStatus = {
+  connected: false,
+  username: null,
+  user_id: null,
+};
+
 const WebSocketContext = createContext<WebSocketContextValue | null>(null);
 
 // WebSocket URL (convert http to ws)
@@ -355,6 +371,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   const [reconnecting, setReconnecting] = useState(false);
   const [androidStatus, setAndroidStatus] = useState<AndroidStatus>(defaultAndroidStatus);
   const [whatsappStatus, setWhatsappStatus] = useState<WhatsAppStatus>(defaultWhatsAppStatus);
+  const [twitterStatus, setTwitterStatus] = useState<TwitterStatus>(defaultTwitterStatus);
   const [whatsappMessages, setWhatsappMessages] = useState<WhatsAppMessage[]>([]);
   const [lastWhatsAppMessage, setLastWhatsAppMessage] = useState<WhatsAppMessage | null>(null);
   const [apiKeyStatuses, setApiKeyStatuses] = useState<Record<string, ApiKeyStatus>>({});
@@ -469,6 +486,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           if (data) {
             if (data.android) setAndroidStatus(data.android);
             if (data.whatsapp) setWhatsappStatus(data.whatsapp);
+            if (data.twitter) setTwitterStatus(data.twitter);
             if (data.api_keys) setApiKeyStatuses(data.api_keys);
             // Node statuses from initial_status - group by workflow_id (n8n pattern)
             if (data.nodes) {
@@ -523,6 +541,19 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           setWhatsappStatus(data || defaultWhatsAppStatus);
           break;
 
+        case 'twitter_oauth_complete':
+          // Handle Twitter OAuth completion broadcast from backend
+          if (data?.success) {
+            setTwitterStatus({
+              connected: true,
+              username: data.username || null,
+              user_id: data.user_id || null,
+              name: data.name,
+              profile_image_url: data.profile_image_url,
+            });
+          }
+          break;
+
         case 'whatsapp_message_received':
           // Handle incoming WhatsApp message from Go service
           if (data) {
@@ -1959,6 +1990,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     androidStatus,
     setAndroidStatus,
     whatsappStatus,
+    twitterStatus,
     whatsappMessages,
     lastWhatsAppMessage,
     apiKeyStatuses,
@@ -2089,6 +2121,12 @@ export const useWhatsAppStatus = (): WhatsAppStatus => {
   return whatsappStatus;
 };
 
+// Hook specifically for Twitter status
+export const useTwitterStatus = (): TwitterStatus => {
+  const { twitterStatus } = useWebSocket();
+  return twitterStatus;
+};
+
 // Hook specifically for deployment status
 export const useDeploymentStatus = (): DeploymentStatus => {
   const { deploymentStatus } = useWebSocket();

package/client/src/hooks/useApiKeys.ts

@@ -23,6 +23,31 @@ export interface ProviderDefaults {
   reasoning_format: 'parsed' | 'hidden';
 }
 
+export interface ModelUsageSummary {
+  model: string;
+  input_tokens: number;
+  output_tokens: number;
+  total_tokens: number;
+  input_cost: number;
+  output_cost: number;
+  cache_cost: number;
+  total_cost: number;
+  execution_count: number;
+}
+
+export interface ProviderUsageSummary {
+  provider: string;
+  total_input_tokens: number;
+  total_output_tokens: number;
+  total_tokens: number;
+  total_input_cost: number;
+  total_output_cost: number;
+  total_cache_cost: number;
+  total_cost: number;
+  execution_count: number;
+  models: ModelUsageSummary[];
+}
+
 export interface UseApiKeysResult {
   // Validate and store API key
   validateApiKey: (provider: string, apiKey: string) => Promise<ApiKeyValidationResult>;
@@ -52,6 +77,9 @@ export interface UseApiKeysResult {
   getProviderDefaults: (provider: string) => Promise<ProviderDefaults>;
   saveProviderDefaults: (provider: string, defaults: ProviderDefaults) => Promise<boolean>;
 
+  // Provider usage summary
+  getProviderUsageSummary: () => Promise<ProviderUsageSummary[]>;
+
   // State
   isValidating: boolean;
   validationError: string | null;
@@ -280,6 +308,21 @@ export const useApiKeys = (): UseApiKeysResult => {
     }
   }, [sendRequest, isConnected]);
 
+  /**
+   * Get aggregated usage and cost summary by provider
+   */
+  const getProviderUsageSummary = useCallback(async (): Promise<ProviderUsageSummary[]> => {
+    if (!isConnected) return [];
+
+    try {
+      const response = await sendRequest<{ providers: ProviderUsageSummary[] }>('get_provider_usage_summary', {});
+      return response?.providers || [];
+    } catch (error) {
+      console.warn('Error fetching provider usage summary:', error);
+      return [];
+    }
+  }, [sendRequest, isConnected]);
+
   return {
     validateApiKey,
     saveApiKey,
@@ -291,6 +334,7 @@ export const useApiKeys = (): UseApiKeysResult => {
     getAiModels,
     getProviderDefaults,
     saveProviderDefaults,
+    getProviderUsageSummary,
     isValidating,
     validationError,
     isConnected

package/client/src/nodeDefinitions/specializedAgentNodes.ts

@@ -342,9 +342,65 @@ export const specializedAgentNodes: Record<string, INodeTypeDescription> = {
     subtitle: 'Agent Coordination',
     description: 'AI Agent specialized for orchestrating multiple agents. Coordinates complex multi-agent workflows by delegating tasks to specialized agents and synthesizing their results.',
     defaults: { name: 'Orchestrator Agent', color: dracula.cyan },
-    inputs: AI_AGENT_INPUTS,
+    inputs: [
+      ...AI_AGENT_INPUTS,
+      { name: 'teammates', displayName: 'Team', type: 'main' as NodeConnectionType, description: 'Connect teammate agents for team mode' }
+    ],
     outputs: AI_AGENT_OUTPUTS,
-    properties: AI_AGENT_PROPERTIES
+    properties: [
+      ...AI_AGENT_PROPERTIES,
+      {
+        displayName: 'Team Mode',
+        name: 'teamMode',
+        type: 'options',
+        options: [
+          { name: 'Disabled', value: '' },
+          { name: 'Parallel', value: 'parallel' },
+          { name: 'Sequential', value: 'sequential' }
+        ],
+        default: '',
+        description: 'Enable team mode to coordinate connected teammate agents'
+      }
+    ]
+  },
+
+  // AI Employee - Team lead node for coordinating multiple agents
+  ai_employee: {
+    displayName: 'AI Employee',
+    name: 'ai_employee',
+    icon: '👥',
+    group: ['agent', 'ai'],
+    version: 1,
+    subtitle: 'Team Orchestration',
+    description: 'AI Employee for coordinating multiple AI agents. Connect teammate agents to enable shared task lists, messaging, and coordinated execution.',
+    defaults: { name: 'AI Employee', color: dracula.purple },
+    inputs: [
+      ...AI_AGENT_INPUTS,
+      { name: 'teammates', displayName: 'Team', type: 'main' as NodeConnectionType, description: 'Connect teammate agents' }
+    ],
+    outputs: AI_AGENT_OUTPUTS,
+    properties: [
+      ...AI_AGENT_PROPERTIES,
+      {
+        displayName: 'Team Mode',
+        name: 'teamMode',
+        type: 'options',
+        options: [
+          { name: 'Parallel', value: 'parallel' },
+          { name: 'Sequential', value: 'sequential' }
+        ],
+        default: 'parallel',
+        description: 'How teammates process tasks'
+      },
+      {
+        displayName: 'Max Concurrent',
+        name: 'maxConcurrent',
+        type: 'number',
+        default: 5,
+        typeOptions: { minValue: 1, maxValue: 20 },
+        description: 'Maximum concurrent task executions'
+      }
+    ]
   }
 };
 
@@ -353,4 +409,4 @@ export const specializedAgentNodes: Record<string, INodeTypeDescription> = {
 // ============================================================================
 
 // List of specialized agent node types for identification
-export const SPECIALIZED_AGENT_TYPES = ['android_agent', 'coding_agent', 'web_agent', 'task_agent', 'social_agent', 'travel_agent', 'tool_agent', 'productivity_agent', 'payments_agent', 'consumer_agent', 'autonomous_agent', 'orchestrator_agent'];
+export const SPECIALIZED_AGENT_TYPES = ['android_agent', 'coding_agent', 'web_agent', 'task_agent', 'social_agent', 'travel_agent', 'tool_agent', 'productivity_agent', 'payments_agent', 'consumer_agent', 'autonomous_agent', 'orchestrator_agent', 'ai_employee'];