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
|