 85bf1341f3
			
		
	
	85bf1341f3
	
	
	
		
			
			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>
		
			
				
	
	
		
			100 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			100 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import { a as _defineProperty, H as BackgroundVariant, _ as _slicedToArray, b as useStore } from './index-a12c80bd.js';
 | |
| import React, { memo, useRef, useState, useEffect } from 'react';
 | |
| import cc from 'classcat';
 | |
| import 'zustand';
 | |
| import 'zustand/context';
 | |
| import 'd3-zoom';
 | |
| 
 | |
| var createGridLinesPath = function createGridLinesPath(size, strokeWidth, stroke) {
 | |
|   return /*#__PURE__*/React.createElement("path", {
 | |
|     stroke: stroke,
 | |
|     strokeWidth: strokeWidth,
 | |
|     d: "M".concat(size / 2, " 0 V").concat(size, " M0 ").concat(size / 2, " H").concat(size)
 | |
|   });
 | |
| };
 | |
| var createGridDotsPath = function createGridDotsPath(size, fill) {
 | |
|   return /*#__PURE__*/React.createElement("circle", {
 | |
|     cx: size,
 | |
|     cy: size,
 | |
|     r: size,
 | |
|     fill: fill
 | |
|   });
 | |
| };
 | |
| 
 | |
| var _defaultColors;
 | |
| 
 | |
| function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 | |
| 
 | |
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 | |
| var defaultColors = (_defaultColors = {}, _defineProperty(_defaultColors, BackgroundVariant.Dots, '#81818a'), _defineProperty(_defaultColors, BackgroundVariant.Lines, '#eee'), _defaultColors);
 | |
| 
 | |
| var transformSelector = function transformSelector(s) {
 | |
|   return s.transform;
 | |
| };
 | |
| 
 | |
| var Background = function Background(_ref) {
 | |
|   var _ref$variant = _ref.variant,
 | |
|       variant = _ref$variant === void 0 ? BackgroundVariant.Dots : _ref$variant,
 | |
|       _ref$gap = _ref.gap,
 | |
|       gap = _ref$gap === void 0 ? 15 : _ref$gap,
 | |
|       _ref$size = _ref.size,
 | |
|       size = _ref$size === void 0 ? 0.4 : _ref$size,
 | |
|       color = _ref.color,
 | |
|       style = _ref.style,
 | |
|       className = _ref.className;
 | |
|   var ref = useRef(null);
 | |
| 
 | |
|   var _useState = useState(null),
 | |
|       _useState2 = _slicedToArray(_useState, 2),
 | |
|       patternId = _useState2[0],
 | |
|       setPatternId = _useState2[1];
 | |
| 
 | |
|   var _useStore = useStore(transformSelector),
 | |
|       _useStore2 = _slicedToArray(_useStore, 3),
 | |
|       tX = _useStore2[0],
 | |
|       tY = _useStore2[1],
 | |
|       tScale = _useStore2[2];
 | |
| 
 | |
|   useEffect(function () {
 | |
|     // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 | |
|     var bgs = document.querySelectorAll('.react-flow__background');
 | |
|     var index = Array.from(bgs).findIndex(function (bg) {
 | |
|       return bg === ref.current;
 | |
|     });
 | |
|     setPatternId("pattern-".concat(index));
 | |
|   }, []);
 | |
|   var scaledGap = gap * tScale || 1;
 | |
|   var xOffset = tX % scaledGap;
 | |
|   var yOffset = tY % scaledGap;
 | |
|   var isLines = variant === BackgroundVariant.Lines;
 | |
|   var bgColor = color ? color : defaultColors[variant];
 | |
|   var path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * tScale, bgColor);
 | |
|   return /*#__PURE__*/React.createElement("svg", {
 | |
|     className: cc(['react-flow__background', 'react-flow__container', className]),
 | |
|     style: _objectSpread(_objectSpread({}, style), {}, {
 | |
|       width: '100%',
 | |
|       height: '100%'
 | |
|     }),
 | |
|     ref: ref
 | |
|   }, patternId && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("pattern", {
 | |
|     id: patternId,
 | |
|     x: xOffset,
 | |
|     y: yOffset,
 | |
|     width: scaledGap,
 | |
|     height: scaledGap,
 | |
|     patternUnits: "userSpaceOnUse"
 | |
|   }, path), /*#__PURE__*/React.createElement("rect", {
 | |
|     x: "0",
 | |
|     y: "0",
 | |
|     width: "100%",
 | |
|     height: "100%",
 | |
|     fill: "url(#".concat(patternId, ")")
 | |
|   })));
 | |
| };
 | |
| 
 | |
| Background.displayName = 'Background';
 | |
| var index = /*#__PURE__*/memo(Background);
 | |
| 
 | |
| export { index as default };
 | |
| //# sourceMappingURL=index3.js.map
 |