Function WorkflowNode

frontend/src/components/workflow/node/WorkflowNode.tsx:80–1301

({ data, selected, id }: NodeProps<NodeData>)

 * Enhanced WorkflowNode - Visual representation with timeline states
 */
export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
  // Store hooks
  const { getComponent, loading } = useComponentStore();
  const secrets = useSecretStore((state) => state.secrets);
  const { getNodes, getEdges, setNodes, deleteElements } = useReactFlow();
  const updateNodeInternals = useUpdateNodeInternals();
  const { nodeStates, selectedRunId, selectNode, isPlaying, playbackMode, isLiveFollowing } =
    useExecutionTimelineStore();
  const { markDirty } = useWorkflowStore();
  const { mode, focusedTerminalNodeId, bringTerminalToFront, openHumanInputDialog } =
    useWorkflowUiStore();
  const prefetchTerminal = useExecutionStore((state) => state.prefetchTerminal);
  const terminalSession = useExecutionStore((state) => state.getTerminalSession(id, 'pty'));
  const theme = useThemeStore((state) => state.theme);
  const { lastCreatedKey } = useApiKeyStore();
  // @ts-expect-error - FIXME: Check actual store structure
  const workflowIdFromStore = useWorkflowStore((state) => state.workflow?.id);
  const {
    onOpenScheduleSidebar,
    onOpenWebhooksSidebar,
    setPlacement: _setPlacement,
    selectEntryPoint,
  } = useEntryPointActions();

  // Local state
  const [isTerminalOpen, setIsTerminalOpen] = useState(false);
  const [isTerminalLoading, setIsTerminalLoading] = useState(false);
  const nodeRef = useRef<HTMLDivElement | null>(null);
  const [isEditingLabel, setIsEditingLabel] = useState(false);
  const [editingLabelValue, setEditingLabelValue] = useState('');
  const labelInputRef = useRef<HTMLInputElement | null>(null);
  const navigate = useNavigate();
  const [showWebhookDialog, setShowWebhookDialog] = useState(false);
  const [showErrorDetails, setShowErrorDetails] = useState(false);
  const isMobile = useIsMobile();
  const activeApiKey = lastCreatedKey;

  const [textSize, setTextSize] = useState<{ width: number; height: number }>(() => {
    const uiSize = (data as any)?.ui?.size as { width?: number; height?: number } | undefined;
    return {
      width: uiSize?.width ?? DEFAULT_TEXT_WIDTH,
      height: uiSize?.height ?? DEFAULT_TEXT_HEIGHT,
    };
  });

  // Terminal loading effect
  useEffect(() => {
    if (!isTerminalOpen) return;

    let cancelled = false;
    const loadTerminal = async () => {
      setIsTerminalLoading(true);
      try {
        await prefetchTerminal(id, 'pty', selectedRunId ?? undefined);
      } catch (error) {
        console.error('Failed to prefetch terminal output', error);
      } finally {
        if (!cancelled) setIsTerminalLoading(false);