Frontend Enhancements: - Complete React TypeScript frontend with modern UI components - Distributed workflows management interface with real-time updates - Socket.IO integration for live agent status monitoring - Agent management dashboard with cluster visualization - Project management interface with metrics and task tracking - Responsive design with proper error handling and loading states Backend Infrastructure: - Distributed coordinator for multi-agent workflow orchestration - Cluster management API with comprehensive agent operations - Enhanced database models for agents and projects - Project service for filesystem-based project discovery - Performance monitoring and metrics collection - Comprehensive API documentation and error handling Documentation: - Complete distributed development guide (README_DISTRIBUTED.md) - Comprehensive development report with architecture insights - System configuration templates and deployment guides The platform now provides a complete web interface for managing the distributed AI cluster with real-time monitoring, workflow orchestration, and agent coordination capabilities. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import { useEffect } from 'react';
|
|
import { addDomEvent } from './add-dom-event.mjs';
|
|
|
|
/**
|
|
* Attaches an event listener directly to the provided DOM element.
|
|
*
|
|
* Bypassing React's event system can be desirable, for instance when attaching non-passive
|
|
* event handlers.
|
|
*
|
|
* ```jsx
|
|
* const ref = useRef(null)
|
|
*
|
|
* useDomEvent(ref, 'wheel', onWheel, { passive: false })
|
|
*
|
|
* return <div ref={ref} />
|
|
* ```
|
|
*
|
|
* @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
|
|
* @param eventName - Name of the event you want listen for.
|
|
* @param handler - Function to fire when receiving the event.
|
|
* @param options - Options to pass to `Event.addEventListener`.
|
|
*
|
|
* @public
|
|
*/
|
|
function useDomEvent(ref, eventName, handler, options) {
|
|
useEffect(() => {
|
|
const element = ref.current;
|
|
if (handler && element) {
|
|
return addDomEvent(element, eventName, handler, options);
|
|
}
|
|
}, [ref, eventName, handler, options]);
|
|
}
|
|
|
|
export { useDomEvent };
|