machinaos 0.0.76 → 0.0.78

package/client/src/components/TeamMonitorNode.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useState, useEffect, useCallback, useMemo } from 'react';
 import { nodePropsEqual } from './nodeMemoEquality';
 import { Handle, Position, NodeProps, useEdges, useNodes } from 'reactflow';
-import { NodeData } from '../types/NodeTypes';
+import { NodeData, NodeStyle } from '../types/NodeTypes';
 import { useAppStore } from '../store/useAppStore';
 import { resolveNodeDescription } from '../lib/nodeSpec';
 import { useAppTheme } from '../hooks/useAppTheme';
@@ -38,7 +38,7 @@ interface TeamStatus {
 
 const TeamMonitorNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
   const theme = useAppTheme();
-  const { setSelectedNode } = useAppStore();
+  const setSelectedNode = useAppStore((s) => s.setSelectedNode);
   const { sendRequest } = useWebSocket();
   const edges = useEdges();
   const nodes = useNodes();
@@ -123,20 +123,19 @@ const TeamMonitorNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConn
   };
 
   return (
+    // Visual styling (background, border, radius) lives in base.css `.node`
+    // defaults + per-theme overrides; reads `var(--node-color)` for accent.
     <div
+      className={`node ${selected ? 'selected' : ''}`}
       onClick={handleClick}
       style={{
+        '--node-color': nodeColor,
         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',
-      }}
+      } as NodeStyle}
     >
       {/* Header */}
       <div style={{
@@ -231,36 +230,35 @@ const TeamMonitorNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConn
         )}
       </div>
 
-      {/* Input Handle */}
+      {/* Input Handle — visual styling owned by `.node-handle.in`
+          in base.css + per-theme overrides. Inline keeps layout only. */}
       <Handle
         id="input-team"
         type="target"
         position={Position.Left}
         isConnectable={isConnectable}
+        className="node-handle in"
         style={{
           left: -6,
           top: '50%',
           width: 10,
           height: 10,
-          backgroundColor: theme.isDarkMode ? theme.colors.background : '#ffffff',
-          border: `2px solid ${nodeColor}`,
           borderRadius: '50%',
         }}
       />
 
-      {/* Output Handle */}
+      {/* Output Handle — visual styling owned by `.node-handle.out`. */}
       <Handle
         id="output-main"
         type="source"
         position={Position.Right}
         isConnectable={isConnectable}
+        className="node-handle out"
         style={{
           right: -6,
           top: '50%',
           width: 10,
           height: 10,
-          backgroundColor: nodeColor,
-          border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
           borderRadius: '50%',
         }}
       />

package/client/src/components/ToolkitNode.tsx

@@ -13,7 +13,7 @@
 import React, { memo, useCallback } 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 { resolveNodeDescription } from '../lib/nodeSpec';
 import { NodeIcon } from '../assets/icons';
@@ -27,7 +27,9 @@ const TOOLKIT_NODE_TYPES = ['androidTool'];
 
 const ToolkitNode: 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);
 
   // Get node status from WebSocket context
   const { getNodeStatus } = useWebSocket();
@@ -67,17 +69,27 @@ const ToolkitNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
   const iconSpec = useNodeSpec(type);
   const iconRef = (iconSpec?.icon as string | undefined) ?? (definition?.icon as string | undefined);
 
-  // Get status indicator color
-  const getStatusIndicatorColor = () => {
-    if (isExecuting) return theme.dracula.cyan;
-    if (executionStatus === 'success') return theme.dracula.green;
-    if (executionStatus === 'error') return theme.dracula.red;
-    return theme.dracula.green; // Toolkit is always ready
-  };
+  // Pip status bucket — CSS owns the visual color via per-status rules.
+  // Toolkit's idle state always reads as "success" (it's always ready).
+  const pipStatus = (() => {
+    if (isExecuting) return 'executing';
+    if (executionStatus === 'success') return 'success';
+    if (executionStatus === 'error') return 'error';
+    return 'success';
+  })();
 
   return (
+    // `sq-node` + `selected` co-classes activate per-theme square-node
+    // decorations (Renaissance wax seal, Steampunk rivets, Edo hanko
+    // seal, Surveillance REC LED, Cyber neon underglow). Visuals
+    // (background, border, radius, shadow, executing pulse) live in
+    // base.css `.sq-node-box` defaults + per-theme overrides; reads
+    // `var(--node-color)` for the per-definition accent.
     <div
+      className={`sq-node ${selected ? 'selected' : ''}`}
+      data-executing={isExecuting ? '' : undefined}
       style={{
+        '--node-color': nodeColor,
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
@@ -85,95 +97,62 @@ const ToolkitNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: '11px',
         cursor: 'pointer',
-      }}
+      } as NodeStyle}
     >
-      {/* Main Node - rectangular for toolkit, square for skills */}
+      {/* Main Node - rectangular for toolkit, square for skills.
+          Layout only; visuals live in CSS. */}
       <div
+        className="sq-node-box"
         style={{
           position: 'relative',
           width: isToolkitNode ? theme.nodeSize.toolkitWidth : theme.nodeSize.square,
           height: isToolkitNode ? theme.nodeSize.toolkitHeight : theme.nodeSize.square,
-          borderRadius: theme.borderRadius.lg,
-          background: theme.isDarkMode
-            ? `linear-gradient(135deg, ${nodeColor}25 0%, ${theme.colors.background} 100%)`
-            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}08 100%)`,
-          border: `2px solid ${isExecuting
-            ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
-            : selected
-              ? theme.colors.focus
-              : theme.isDarkMode ? nodeColor + '80' : `${nodeColor}40`}`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           color: theme.colors.text,
           fontSize: theme.nodeSize.squareIcon,
           fontWeight: '600',
-          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 4px 12px ${theme.colors.focusRing}, 0 0 0 1px ${theme.colors.focusRing}`
-              : theme.isDarkMode
-                ? `0 2px 8px ${nodeColor}40`
-                : `0 2px 8px ${nodeColor}20, 0 4px 12px rgba(0,0,0,0.06)`,
-          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
         }}
       >
         {/* Service Icon */}
         <NodeIcon icon={iconRef} className="h-7 w-7 text-3xl" />
 
-        {/* Parameters Button */}
+        {/* Parameters Button — CSS owns bg/border via .sq-node-gear */}
         <button
           onClick={handleParametersClick}
+          className="sq-node-gear"
           style={{
             position: 'absolute',
             top: '-8px',
             right: '-8px',
             width: theme.nodeSize.paramButton,
             height: theme.nodeSize.paramButton,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
-            border: `1px solid ${theme.isDarkMode ? theme.colors.border : '#d1d5db'}`,
             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 rgba(0,0,0,0.1)'
           }}
           title="Edit Toolkit Parameters"
         >
           ⚙️
         </button>
 
-        {/* Status Indicator */}
+        {/* Status Indicator — CSS owns bg/animation via per-status rules. */}
         <div
+          className="sq-node-pip"
+          data-status={pipStatus}
           style={{
             position: 'absolute',
             top: '-4px',
             left: '-4px',
             width: theme.nodeSize.statusIndicator,
             height: theme.nodeSize.statusIndicator,
-            borderRadius: '50%',
-            backgroundColor: getStatusIndicatorColor(),
-            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 2px ${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...' : 'Toolkit ready'}
         />
@@ -184,6 +163,7 @@ const ToolkitNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
           type="source"
           position={Position.Top}
           isConnectable={isConnectable}
+          className="sq-node-handle out"
           style={{
             position: 'absolute',
             top: '-6px',
@@ -191,10 +171,7 @@ const ToolkitNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             transform: 'translateX(-50%)',
             width: theme.nodeSize.handle,
             height: theme.nodeSize.handle,
-            backgroundColor: nodeColor,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            borderRadius: '50%',
-            zIndex: 20
+            zIndex: 20,
           }}
           title={isToolkitNode ? "Connect to AI Agent's tool input" : "Connect to agent's skill input"}
         />
@@ -206,6 +183,7 @@ const ToolkitNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             type="target"
             position={Position.Bottom}
             isConnectable={isConnectable}
+            className="sq-node-handle in"
             style={{
               position: 'absolute',
               bottom: '-6px',
@@ -213,16 +191,13 @@ const ToolkitNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
               transform: 'translateX(-50%)',
               width: theme.nodeSize.handle,
               height: theme.nodeSize.handle,
-              backgroundColor: theme.isDarkMode ? theme.colors.background : '#ffffff',
-              border: `2px solid ${theme.isDarkMode ? theme.colors.textSecondary : '#6b7280'}`,
-              borderRadius: '50%',
-              zIndex: 20
+              zIndex: 20,
             }}
             title="Connect Android service nodes"
           />
         )}
 
-        {/* Output Data Indicator */}
+        {/* Output Data Indicator (bespoke; keeps inline style) */}
         {executionStatus === 'success' && nodeStatus?.data && (
           <div
             style={{

package/client/src/components/TriggerNode.tsx

@@ -9,7 +9,7 @@
 import React, { memo, useState, useEffect, useCallback } 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 { resolveNodeDescription, useNodeSpec } from '../lib/nodeSpec';
 import { NodeIcon } from '../assets/icons';
@@ -19,7 +19,9 @@ import EditableNodeLabel from './ui/EditableNodeLabel';
 
 const TriggerNode: 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 [isConfigured, setIsConfigured] = useState(false);
   const isDisabled = data?.disabled === true;
 
@@ -65,29 +67,21 @@ const TriggerNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
     setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
   };
 
-  // Get status indicator color based on execution state
-  const getStatusIndicatorColor = () => {
-    // Combined executing/waiting state - show purple with glow
-    if (isExecuting) {
-      return theme.dracula.purple;
-    }
-    if (executionStatus === 'success') {
-      return theme.dracula.green;
-    }
-    if (executionStatus === 'error') {
-      return theme.dracula.red;
-    }
-
-    // WhatsApp trigger - use connection status when idle
+  // Compute pip status bucket for `data-status` attribute. CSS owns the
+  // visual color via per-status rules in base.css and per-theme overrides.
+  // For WhatsApp triggers in idle state, fold connection state into the
+  // bucket: connected -> success, pairing -> waiting, otherwise -> error.
+  const pipStatus = (() => {
+    if (executionStatus === 'executing' || executionStatus === 'waiting') return 'executing';
+    if (executionStatus === 'success') return 'success';
+    if (executionStatus === 'error') return 'error';
     if (isWhatsAppTrigger) {
-      if (whatsappStatus.connected) return theme.dracula.green;
-      if (whatsappStatus.pairing) return theme.dracula.orange;
-      return theme.dracula.red;
+      if (whatsappStatus.connected) return 'success';
+      if (whatsappStatus.pairing) return 'waiting';
+      return 'error';
     }
-
-    // Idle state - show configured status
-    return isConfigured ? theme.dracula.green : theme.dracula.orange;
-  };
+    return isConfigured ? 'success' : 'idle';
+  })();
 
   const getStatusTitle = () => {
     switch (executionStatus) {
@@ -120,8 +114,16 @@ const TriggerNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
   const nodeColor = definition?.defaults?.color || '#f59e0b';
 
   return (
+    // `sq-node` + `node-trigger` + `selected` co-classes activate per-theme
+    // square-node decorations (Renaissance wax seal, Steampunk rivets, Edo
+    // hanko seal, Surveillance REC LED, Cyber neon underglow). The
+    // `node-trigger` co-class lets per-type theme rules narrow further.
+    // `data-executing` binds the CSS pulse animation owned by base.css.
     <div
+      className={`sq-node node-trigger ${selected ? 'selected' : ''}`}
+      data-executing={isExecuting ? '' : undefined}
       style={{
+        '--node-color': nodeColor,
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
@@ -129,44 +131,24 @@ const TriggerNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: '11px',
         cursor: 'pointer',
-      }}
+      } as NodeStyle}
     >
-      {/* Main Trigger Node */}
-      {/* Show glow animation for both executing and waiting states */}
+      {/* Main Trigger Node — visual styling lives in base.css + per-theme
+          CSS targeting `.sq-node-box`. Inner box keeps only layout
+          (size, flex), and per-theme decorations like Cyber neon glow,
+          Renaissance wax seal, and Steampunk rivets reach the pixels. */}
       <div
+        className="sq-node-box"
         style={{
           position: 'relative',
           width: theme.nodeSize.square,
           height: theme.nodeSize.square,
-          borderRadius: theme.borderRadius.lg,
-          background: theme.isDarkMode
-            ? `linear-gradient(135deg, ${nodeColor}25 0%, ${theme.colors.background} 100%)`
-            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}08 100%)`,
-          border: `2px solid ${
-            isExecuting
-              ? (theme.isDarkMode ? theme.dracula.purple : '#2563eb')
-              : selected
-                ? theme.colors.focus
-                : theme.isDarkMode ? nodeColor + '80' : `${nodeColor}40`
-          }`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           color: theme.colors.text,
           fontSize: theme.nodeSize.squareIcon,
           fontWeight: '600',
-          transition: 'all 0.2s ease',
-          boxShadow: isExecuting
-            ? theme.isDarkMode
-              ? `0 4px 12px ${theme.dracula.purple}66, 0 0 0 3px ${theme.dracula.purple}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 1px ${theme.colors.focusRing}`
-              : theme.isDarkMode
-                ? `0 2px 8px ${nodeColor}40`
-                : `0 2px 8px ${nodeColor}20, 0 4px 12px rgba(0,0,0,0.06)`,
-          // Subtle animation for both modes
-          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
           opacity: isDisabled ? 0.5 : 1,
         }}
       >
@@ -196,62 +178,48 @@ const TriggerNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
         {/* Parameters Button */}
         <button
           onClick={handleParametersClick}
+          className="sq-node-gear"
           style={{
             position: 'absolute',
             top: '-8px',
             right: '-8px',
             width: theme.nodeSize.paramButton,
             height: theme.nodeSize.paramButton,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
-            border: `1px solid ${theme.isDarkMode ? theme.colors.border : '#d1d5db'}`,
             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 rgba(0,0,0,0.1)'
           }}
           title="Configure Trigger"
         >
           ⚙️
         </button>
 
-        {/* Execution Status Indicator */}
-        {/* Status Indicator - glows for both waiting and executing states */}
+        {/* Status Indicator — CSS owns the bg color via per-status rule
+            on `.sq-node-pip[data-status="…"]`. Pulse on executing/waiting
+            also lives in CSS. */}
         <div
+          className="sq-node-pip"
+          data-status={pipStatus}
           style={{
             position: 'absolute',
             top: '-4px',
             left: '-4px',
             width: theme.nodeSize.statusIndicator,
             height: theme.nodeSize.statusIndicator,
-            borderRadius: '50%',
-            backgroundColor: getStatusIndicatorColor(),
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            boxShadow: isExecuting
-              ? theme.isDarkMode
-                ? `0 0 6px ${theme.dracula.purple}80`
-                : '0 0 4px rgba(37, 99, 235, 0.5)'
-              : theme.isDarkMode
-                ? `0 1px 2px ${theme.colors.shadow}`
-                : '0 1px 3px rgba(0,0,0,0.15)',
             zIndex: 30,
-            // Subtle pulse animation for both modes
-            animation: isExecuting ? 'pulse 1s ease-in-out infinite' : 'none',
           }}
           title={getStatusTitle()}
         />
 
         {/* NO INPUT HANDLE - Trigger nodes don't have inputs */}
 
-        {/* Trigger Badge - Lightning bolt indicator on bottom-left */}
+        {/* Trigger Badge - Lightning bolt indicator on bottom-left
+            (bespoke UI element, not in design schema; keeps inline style) */}
         <div
           style={{
             position: 'absolute',
@@ -276,12 +244,13 @@ const TriggerNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
           <span style={{ lineHeight: 1, color: theme.isDarkMode ? theme.colors.background : '#1a1d21' }}>⚡</span>
         </div>
 
-        {/* Output Handle (right side) */}
+        {/* Output Handle (right side) — CSS owns bg/border via .sq-node-handle.out */}
         <Handle
           id="output-main"
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
+          className="sq-node-handle out"
           style={{
             position: 'absolute',
             right: '-6px',
@@ -289,15 +258,12 @@ const TriggerNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnecta
             transform: 'translateY(-50%)',
             width: theme.nodeSize.handle,
             height: theme.nodeSize.handle,
-            backgroundColor: isConfigured ? nodeColor : theme.colors.textSecondary,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            borderRadius: '50%',
-            zIndex: 20
+            zIndex: 20,
           }}
           title="Trigger Output"
         />
 
-        {/* Output Data Indicator */}
+        {/* Output Data Indicator (bespoke; keeps inline style) */}
         {executionStatus === 'success' && nodeStatus?.data && (
           <div
             style={{

package/client/src/components/__tests__/CredentialsModal.test.tsx

@@ -78,51 +78,55 @@ const wsMock = {
   // status getters aren't actually used here -- they're consumed via the dedicated hooks below
 };
 
-vi.mock('../../contexts/WebSocketContext', async () => {
-  const actual = await vi.importActual<any>('../../contexts/WebSocketContext');
-  return {
-    ...actual,
-    useWebSocket: () => wsMock,
-    useWhatsAppStatus: () => ({
-      connected: false,
-      has_session: false,
-      running: false,
-      pairing: false,
-      device_id: null,
-      connected_phone: null,
-      qr: null,
-    }),
-    useAndroidStatus: () => ({
-      connected: false,
-      paired: false,
-      device_id: null,
-      device_name: null,
-      connected_devices: [],
-      qr_data: null,
-      session_token: null,
-    }),
-    useTwitterStatus: () => ({
-      connected: false,
-      username: null,
-      user_id: null,
-      name: null,
-      profile_image_url: null,
-    }),
-    useGoogleStatus: () => ({
-      connected: false,
-      email: null,
-      name: null,
-      profile_image_url: null,
-    }),
-    useTelegramStatus: () => ({
-      connected: false,
-      bot_username: null,
-      bot_name: null,
-      bot_id: null,
-      owner_chat_id: null,
-    }),
-  };
-});
+// Replace the entire WebSocketContext module with stub exports. The
+// `vi.importActual` + spread pattern was previously used here but failed
+// to override `useWebSocket` reliably under React 19 — the real
+// implementation's `useContext(WebSocketContext)` check fired against the
+// undefined provider, throwing the "must be used within a WebSocketProvider"
+// error before the mocked override could intercept. The full-replace style
+// matches what useApiKeys.test.ts does and works in both vitest 1 and 2.
+vi.mock('../../contexts/WebSocketContext', () => ({
+  useWebSocket: () => wsMock,
+  useWhatsAppStatus: () => ({
+    connected: false,
+    has_session: false,
+    running: false,
+    pairing: false,
+    device_id: null,
+    connected_phone: null,
+    qr: null,
+  }),
+  useAndroidStatus: () => ({
+    connected: false,
+    paired: false,
+    device_id: null,
+    device_name: null,
+    connected_devices: [],
+    qr_data: null,
+    session_token: null,
+  }),
+  useTwitterStatus: () => ({
+    connected: false,
+    username: null,
+    user_id: null,
+    name: null,
+    profile_image_url: null,
+  }),
+  useGoogleStatus: () => ({
+    connected: false,
+    email: null,
+    name: null,
+    profile_image_url: null,
+  }),
+  useTelegramStatus: () => ({
+    connected: false,
+    bot_username: null,
+    bot_name: null,
+    bot_id: null,
+    owner_chat_id: null,
+  }),
+  useNodeStatus: () => ({ status: 'idle', data: {} }),
+}));
 
 vi.mock('../../hooks/useWhatsApp', () => ({
   useWhatsApp: () => ({