machinaos 0.0.76 → 0.0.78

package/client/src/components/AIAgentNode.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useState, useEffect, useMemo } from 'react';
 import { nodePropsEqual } from './nodeMemoEquality';
 import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeData } from '../types/NodeTypes';
+import { NodeData, NodeStyle } from '../types/NodeTypes';
 import { useAppStore } from '../store/useAppStore';
 import AIAgentExecutionService from '../services/execution/aiAgentExecutionService';
 import { useAppTheme } from '../hooks/useAppTheme';
@@ -9,6 +9,7 @@ import { useNodeStatus } from '../contexts/WebSocketContext';
 import { dracula } from '../styles/theme';
 import { useNodeSpec } from '../lib/nodeSpec';
 import { NodeIcon } from '../assets/icons';
+import { Badge } from '@/components/ui/badge';
 
 // LangGraph phase icons and labels. Colors reference the dracula token
 // constants so a future palette change in tokens.css propagates without
@@ -44,7 +45,7 @@ const REACT_POSITION: Record<SpecHandle['position'], Position> = {
 
 const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
   const theme = useAppTheme();
-  const { setSelectedNode } = useAppStore();
+  const setSelectedNode = useAppStore((s) => s.setSelectedNode);
   const [_configValid, setConfigValid] = useState(true);
   const [_configErrors, setConfigErrors] = useState<string[]>([]);
 
@@ -72,6 +73,15 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
   const isExecuting = nodeStatus?.status === 'executing';
   const currentPhase = nodeStatus?.data?.phase as string | undefined;
   const phaseConfig = currentPhase ? PHASE_CONFIG[currentPhase] : null;
+  // Live LangGraph supervised-loop counter. Backed by the
+  // `agent_progress` CloudEvents broadcast (services/ai.py emits one
+  // per astream snapshot). `iteration` advances on each agent_node call;
+  // `max_iterations` mirrors LangGraph's recursion_limit
+  // (llm_defaults.json:agent.recursion_limit).
+  const iteration = nodeStatus?.data?.iteration as number | undefined;
+  const maxIterations = nodeStatus?.data?.max_iterations as number | undefined;
+  const showIterationBadge =
+    isExecuting && typeof iteration === 'number' && typeof maxIterations === 'number';
 
   // Validate configuration whenever data changes
   useEffect(() => {
@@ -91,60 +101,40 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
     setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
   };
 
-  const getBorderColor = () => {
-    if (isExecuting) {
-      if (theme.isDarkMode && phaseConfig) return phaseConfig.color;
-      return accentColor;
-    }
-    if (selected) return theme.colors.focus;
-    return theme.colors.border;
-  };
-
-  const getBoxShadow = () => {
-    if (isExecuting) {
-      if (theme.isDarkMode && phaseConfig) {
-        return `0 0 20px ${phaseConfig.color}80, 0 0 40px ${phaseConfig.color}40`;
-      }
-      return `0 0 0 3px ${accentColor}80, 0 4px 16px ${accentColor}60`;
-    }
-    if (selected) {
-      return `0 4px 12px ${theme.colors.focusRing}, 0 0 0 1px ${theme.colors.focusRing}`;
-    }
-    return `0 2px 4px ${theme.colors.shadow}`;
-  };
-
   const hasRightOutputs = rightOutputs.length > 0;
   const hasLeftLabels = hasMainInput || leftInputs.length > 0;
 
   return (
+    // `node` + `node-agent` + `selected` co-classes are the design-handoff
+    // structural hooks for per-theme decorations (Renaissance wax seal,
+    // Cyber neon underglow + corner LED blink, etc.).
     <div
+      className={`node node-agent ${selected ? 'selected' : ''}`}
+      data-executing={isExecuting ? '' : undefined}
       style={{
+        '--node-color': accentColor,
         position: 'relative',
         padding: theme.spacing.lg,
         paddingLeft: hasLeftLabels ? '72px' : theme.spacing.lg,
         paddingRight: hasRightOutputs ? '72px' : theme.spacing.lg,
-        minWidth: `${width}px`,
+        // Width is fixed (not just min) so long titles like
+        // "PRODUCTIVITY AGENT" wrap inside the bordered card
+        // instead of growing the node and bleeding past the border.
+        width: `${width}px`,
         minHeight: `${height}px`,
-        borderRadius: theme.borderRadius.lg,
-        background: theme.isDarkMode
-          ? `linear-gradient(135deg, ${accentColor}20 0%, ${theme.colors.backgroundAlt} 100%)`
-          : `linear-gradient(145deg, #ffffff 0%, ${accentColor}08 100%)`,
-        border: `2px solid ${getBorderColor()}`,
         color: theme.colors.text,
         fontSize: theme.fontSize.sm,
         fontWeight: theme.fontWeight.medium,
         textAlign: 'center',
         cursor: 'pointer',
         transition: 'all 0.3s ease',
-        boxShadow: getBoxShadow(),
         overflow: 'visible',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         gap: theme.spacing.sm,
-        animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
-      }}
+      } as NodeStyle}
     >
       {/* Main input (left, top area) — shown when the spec declares a main input */}
       {hasMainInput && (
@@ -159,28 +149,50 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             type="target"
             position={Position.Left}
             isConnectable={isConnectable}
+            className="node-handle in"
             style={{
               position: 'absolute', left: '-6px', top: '30%', transform: 'translateY(-50%)',
               width: theme.nodeSize.handle, height: theme.nodeSize.handle,
-              backgroundColor: theme.colors.background,
-              border: `2px solid ${theme.colors.textSecondary}`, borderRadius: '50%',
+              borderRadius: '50%',
             }}
             title="Input"
           />
         </>
       )}
 
+      {/* Live LangGraph iteration counter (e.g. "12 / 500"). shadcn
+          Badge primitive with `outline` variant — picks up `--border`
+          and `--foreground` from whichever theme is active. The
+          per-node-type accent rides via the `--node-color` custom
+          property already set on the parent at line ~105 (one of the
+          two grandfathered inline-style channels for canvas nodes per
+          CLAUDE.md). `tabular-nums` keeps "1 / 500" -> "12 / 500" from
+          jittering as digits widen. */}
+      {showIterationBadge && (
+        <Badge
+          variant="outline"
+          title={`Iteration ${iteration} of ${maxIterations} (LangGraph recursion_limit)`}
+          className="absolute top-1 left-1 z-20 tabular-nums pointer-events-none"
+          style={{
+            color: 'var(--node-color)',
+            borderColor: 'var(--node-color)',
+          }}
+        >
+          {iteration} / {maxIterations}
+        </Badge>
+      )}
+
       {/* Parameters gear */}
       <button
         onClick={handleParametersClick}
+        className="node-gear"
         style={{
           position: 'absolute', top: theme.spacing.xs, right: theme.spacing.xs,
           width: theme.nodeSize.paramButton, height: theme.nodeSize.paramButton,
-          borderRadius: theme.borderRadius.sm, backgroundColor: theme.colors.backgroundAlt,
-          border: `1px solid ${theme.colors.border}`, cursor: 'pointer',
+          cursor: 'pointer',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: theme.fontSize.xs, color: theme.colors.textSecondary,
-          fontWeight: theme.fontWeight.normal, transition: theme.transitions.fast, zIndex: 20,
+          fontSize: theme.fontSize.xs,
+          fontWeight: theme.fontWeight.normal, zIndex: 20,
         }}
         title="Edit Parameters"
       >⚙️</button>
@@ -191,17 +203,31 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
         <NodeIcon icon={spec?.icon} className="h-7 w-7 text-3xl" />
       </div>
 
-      {/* Title */}
-      <div style={{
+      {/* Title — alignSelf:stretch + width:100% forces the flex child
+          to fill the parent's content area (parent is align-items:center
+          which would otherwise size the child to its content). With
+          overflowWrap + wordBreak, long display names like
+          "PRODUCTIVITY AGENT" wrap to multiple lines. */}
+      <div className="node-label" style={{
+        alignSelf: 'stretch',
+        width: '100%',
         fontSize: theme.fontSize.base, fontWeight: theme.fontWeight.semibold,
         color: theme.colors.text, lineHeight: '1.2', marginBottom: theme.spacing.xs,
+        overflowWrap: 'break-word', wordBreak: 'break-word', whiteSpace: 'normal',
+        textAlign: 'center',
       }}>{title}</div>
 
-      {/* Subtitle */}
-      <div style={{
+      {/* Subtitle. Phase color is JS-driven (PHASE_CONFIG[phase].color) so
+          we keep the inline color while still exposing `node-sub` so themes
+          can style the resting subtitle. */}
+      <div className="node-sub" style={{
+        alignSelf: 'stretch',
+        width: '100%',
         fontSize: theme.fontSize.xs, fontWeight: theme.fontWeight.normal,
         color: isExecuting && phaseConfig ? phaseConfig.color : theme.colors.focus,
         lineHeight: '1.2', marginBottom: theme.spacing.lg, transition: 'color 0.3s ease',
+        overflowWrap: 'break-word', wordBreak: 'break-word', whiteSpace: 'normal',
+        textAlign: 'center',
       }}>{isExecuting && phaseConfig ? phaseConfig.label : subtitle}</div>
 
       {/* Left inputs below the main one (Memory / Task / etc.) */}
@@ -218,11 +244,11 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             type="target"
             position={REACT_POSITION[h.position]}
             isConnectable={isConnectable}
+            className="node-handle in"
             style={{
               position: 'absolute', left: '-6px', top: h.offset || '50%',
               width: theme.nodeSize.handle, height: theme.nodeSize.handle,
-              backgroundColor: theme.colors.background,
-              border: `2px solid ${theme.colors.textSecondary}`, borderRadius: '0',
+              borderRadius: '0',
               transform: 'translateY(-50%) rotate(45deg)',
             }}
             title={h.label || h.name}
@@ -247,11 +273,11 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
           type="target"
           position={Position.Bottom}
           isConnectable={isConnectable}
+          className="node-handle in"
           style={{
             position: 'absolute', bottom: '-6px', left: h.offset || '50%',
             width: theme.nodeSize.handle, height: theme.nodeSize.handle,
-            backgroundColor: theme.colors.background,
-            border: `2px solid ${theme.colors.textSecondary}`, borderRadius: '0',
+            borderRadius: '0',
             transform: 'translateX(-50%) rotate(45deg)',
           }}
           title={h.label || h.name}
@@ -265,11 +291,10 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
           type="source"
           position={Position.Top}
           isConnectable={isConnectable}
+          className="node-handle out"
           style={{
             position: 'absolute', top: '-6px', left: '50%', transform: 'translateX(-50%)',
             width: theme.nodeSize.handle, height: theme.nodeSize.handle,
-            backgroundColor: accentColor,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
             borderRadius: '50%', zIndex: 20,
           }}
           title={topOutput.label || topOutput.name}
@@ -294,12 +319,11 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             type="source"
             position={Position.Right}
             isConnectable={isConnectable}
+            className="node-handle out"
             style={{
               position: 'absolute', right: '-6px', top: h.offset || '50%',
               transform: 'translateY(-50%)',
               width: theme.nodeSize.handle, height: theme.nodeSize.handle,
-              backgroundColor: accentColor,
-              border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
               borderRadius: '50%', zIndex: 20,
             }}
             title={h.label || h.name}
@@ -316,11 +340,11 @@ const AIAgentNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
+          className="node-handle out"
           style={{
             position: 'absolute', right: '-6px', top: '50%', transform: 'translateY(-50%)',
             width: theme.nodeSize.handle, height: theme.nodeSize.handle,
-            backgroundColor: theme.colors.background,
-            border: `2px solid ${theme.colors.textSecondary}`, borderRadius: '50%',
+            borderRadius: '50%',
           }}
           title="Main Output"
         />

package/client/src/components/GenericNode.tsx

@@ -4,23 +4,24 @@ import { Handle, Position, NodeProps } from 'reactflow';
 import { resolveNodeDescription } from '../lib/nodeSpec';
 import { NodeIcon } from '../assets/icons';
 import { useNodeSpec } from '../lib/nodeSpec';
-import { NodeData } from '../types/NodeTypes';
+import { NodeData, NodeStyle } from '../types/NodeTypes';
 import { INodeInputDefinition, INodeOutputDefinition, NodeConnectionType } from '../types/INodeProperties';
 import { useAppStore } from '../store/useAppStore';
-import { useAppTheme } from '../hooks/useAppTheme';
 import { useNodeStatus } from '../contexts/WebSocketContext';
 import EditableNodeLabel from './ui/EditableNodeLabel';
 
 const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
-  const theme = useAppTheme();
-  const { setSelectedNode, setRenamingNodeId, updateNodeData } = useAppStore();
+  const setSelectedNode = useAppStore((s) => s.setSelectedNode);
+  const setRenamingNodeId = useAppStore((s) => s.setRenamingNodeId);
+  const updateNodeData = useAppStore((s) => s.updateNodeData);
   const isDisabled = data?.disabled === true;
 
-  // Per-id slice subscription so an unrelated node's status update
-  // does not re-render this generic node.
-  const nodeStatus = useNodeStatus(id);
-  const executionStatus = nodeStatus?.status || 'idle';
-  const isExecuting = executionStatus === 'executing' || executionStatus === 'waiting';
+  // Per-id slice subscription so an unrelated node's status update does
+  // not re-render this generic node. Wave 21: visual execution state
+  // moved to per-theme CSS via the `.executing` class on the wrapper —
+  // we keep the subscription so future state-driven CSS toggles can
+  // read it without refactoring.
+  useNodeStatus(id);
 
   // Wave 6 Phase 3e: backend NodeSpec -> legacy fallback
   const definition = type ? resolveNodeDescription(type) : null;
@@ -97,34 +98,22 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
   const nodeInputs = getNodeInputs();
   const nodeOutputs = getNodeOutputs();
 
-  // Helper functions for color management
+  // Node accent color — feeds the `--node-color` CSS custom property
+  // on the wrapper. Handle borders/backgrounds are now owned by
+  // `.node-handle` in base.css + per-theme overrides (Wave 26.C).
   const getNodeColor = () => definition.defaults.color || '#9E9E9E';
-  const getBorderColor = () => {
-    const color = getNodeColor();
-    if (color.startsWith('#')) {
-      const hex = color.substring(1);
-      const r = Math.max(0, parseInt(hex.substring(0, 2), 16) - 40);
-      const g = Math.max(0, parseInt(hex.substring(2, 4), 16) - 40);
-      const b = Math.max(0, parseInt(hex.substring(4, 6), 16) - 40);
-      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-    }
-    return color;
-  };
 
   return (
+    // `node` + `selected` co-classes activate per-theme generic-node
+    // decorations (wax seal on Renaissance, neon LED on Cyber, etc.).
     <div
+      className={`node ${selected ? 'selected' : ''}`}
       style={{
+        '--node-color': getNodeColor(),
         position: 'relative',
         padding: '12px 32px 12px 16px',
         minWidth: '160px',
         minHeight: '60px',
-        borderRadius: '12px',
-        background: `linear-gradient(135deg, ${getNodeColor()} 0%, ${getBorderColor()} 100%)`,
-        border: `2px solid ${isExecuting
-          ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
-          : selected
-            ? '#3b82f6'
-            : getBorderColor()}`,
         color: 'white',
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: '14px',
@@ -132,19 +121,9 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
         textAlign: 'center',
         cursor: 'pointer',
         transition: 'all 0.2s ease',
-        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 8px 25px ${getNodeColor()}40, 0 0 0 2px ${theme.colors.focus}`
-            : theme.isDarkMode
-              ? `0 4px 12px ${getNodeColor()}40`
-              : `0 2px 8px ${getNodeColor()}25, 0 4px 16px rgba(0, 0, 0, 0.08)`,
         overflow: 'visible',
         opacity: isDisabled ? 0.5 : 1,
-        animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
-      }}
+      } as NodeStyle}
     >
       {/* Disabled Overlay */}
       {isDisabled && (
@@ -165,12 +144,14 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
           <span style={{ fontSize: '24px', opacity: 0.8 }}>||</span>
         </div>
       )}
-      {/* Input Handles - Multiple handles based on node definition */}
+      {/* Input Handles - Multiple handles based on node definition.
+          Visual styling (background, border) owned by `.node-handle.in`
+          in base.css + per-theme overrides. Inline keeps layout only. */}
       {nodeInputs.map((input, index) => {
         const totalInputs = nodeInputs.length;
-        const topPosition = totalInputs === 1 ? '50%' : 
+        const topPosition = totalInputs === 1 ? '50%' :
           `${20 + (60 * index) / Math.max(totalInputs - 1, 1)}%`;
-        
+
         return (
           <Handle
             key={`input-${input.name}-${index}`}
@@ -178,6 +159,7 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             type="target"
             position={Position.Left}
             isConnectable={isConnectable}
+            className="node-handle in"
             style={{
               position: 'absolute',
               left: '-6px',
@@ -185,20 +167,20 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
               transform: 'translateY(-50%)',
               width: '12px',
               height: '12px',
-              backgroundColor: 'rgba(255,255,255,0.9)',
-              border: `2px solid ${getBorderColor()}`,
               borderRadius: '50%'
             }}
             title={`${input.displayName}: ${input.description}`}
           />
         );
       })}
-      
 
-      {/* Parameters Button */}
+
+      {/* Parameters Button — visual styles (background, border, hover)
+          owned by `.node-gear` in base.css + per-theme overrides.
+          Inline keeps positioning + label color only. */}
       <button
         onClick={handleParametersClick}
-        className="absolute top-2 right-2 z-20 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border-0 bg-white/95 text-[10px] font-semibold shadow-sm transition-all duration-200 hover:scale-115 hover:bg-white hover:shadow-md"
+        className="node-gear absolute top-2 right-2 z-20 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-[10px] font-semibold transition-all duration-200 hover:scale-115"
         style={{ color: getNodeColor() }}
         title="Edit Parameters"
       >
@@ -229,12 +211,13 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
       </div>
 
       
-      {/* Output Handles - Multiple handles based on node definition */}
+      {/* Output Handles - Multiple handles based on node definition.
+          Visual styling owned by `.node-handle.out` in base.css. */}
       {nodeOutputs.map((output, index) => {
         const totalOutputs = nodeOutputs.length;
-        const topPosition = totalOutputs === 1 ? '50%' : 
+        const topPosition = totalOutputs === 1 ? '50%' :
           `${20 + (60 * index) / Math.max(totalOutputs - 1, 1)}%`;
-        
+
         return (
           <Handle
             key={`output-${output.name}-${index}`}
@@ -242,6 +225,7 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             type="source"
             position={Position.Right}
             isConnectable={isConnectable}
+            className="node-handle out"
             style={{
               position: 'absolute',
               right: '-6px',
@@ -249,8 +233,6 @@ const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
               transform: 'translateY(-50%)',
               width: '12px',
               height: '12px',
-              backgroundColor: 'rgba(255,255,255,0.9)',
-              border: `2px solid ${getBorderColor()}`,
               borderRadius: '50%'
             }}
             title={`${output.displayName}: ${output.description}`}