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>
64 lines
3.1 KiB
JavaScript
64 lines
3.1 KiB
JavaScript
import React, { memo, useRef } from 'react';
|
|
import cc from 'classcat';
|
|
import { useStore } from '@reactflow/core';
|
|
import { shallow } from 'zustand/shallow';
|
|
|
|
var BackgroundVariant;
|
|
(function (BackgroundVariant) {
|
|
BackgroundVariant["Lines"] = "lines";
|
|
BackgroundVariant["Dots"] = "dots";
|
|
BackgroundVariant["Cross"] = "cross";
|
|
})(BackgroundVariant || (BackgroundVariant = {}));
|
|
|
|
function LinePattern({ color, dimensions, lineWidth }) {
|
|
return (React.createElement("path", { stroke: color, strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}` }));
|
|
}
|
|
function DotPattern({ color, radius }) {
|
|
return React.createElement("circle", { cx: radius, cy: radius, r: radius, fill: color });
|
|
}
|
|
|
|
const defaultColor = {
|
|
[BackgroundVariant.Dots]: '#91919a',
|
|
[BackgroundVariant.Lines]: '#eee',
|
|
[BackgroundVariant.Cross]: '#e2e2e2',
|
|
};
|
|
const defaultSize = {
|
|
[BackgroundVariant.Dots]: 1,
|
|
[BackgroundVariant.Lines]: 1,
|
|
[BackgroundVariant.Cross]: 6,
|
|
};
|
|
const selector = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
|
|
function Background({ id, variant = BackgroundVariant.Dots,
|
|
// only used for dots and cross
|
|
gap = 20,
|
|
// only used for lines and cross
|
|
size, lineWidth = 1, offset = 2, color, style, className, }) {
|
|
const ref = useRef(null);
|
|
const { transform, patternId } = useStore(selector, shallow);
|
|
const patternColor = color || defaultColor[variant];
|
|
const patternSize = size || defaultSize[variant];
|
|
const isDots = variant === BackgroundVariant.Dots;
|
|
const isCross = variant === BackgroundVariant.Cross;
|
|
const gapXY = Array.isArray(gap) ? gap : [gap, gap];
|
|
const scaledGap = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
|
|
const scaledSize = patternSize * transform[2];
|
|
const patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap;
|
|
const patternOffset = isDots
|
|
? [scaledSize / offset, scaledSize / offset]
|
|
: [patternDimensions[0] / offset, patternDimensions[1] / offset];
|
|
return (React.createElement("svg", { className: cc(['react-flow__background', className]), style: {
|
|
...style,
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
top: 0,
|
|
left: 0,
|
|
}, ref: ref, "data-testid": "rf__background" },
|
|
React.createElement("pattern", { id: patternId + id, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})` }, isDots ? (React.createElement(DotPattern, { color: patternColor, radius: scaledSize / offset })) : (React.createElement(LinePattern, { dimensions: patternDimensions, color: patternColor, lineWidth: lineWidth }))),
|
|
React.createElement("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${patternId + id})` })));
|
|
}
|
|
Background.displayName = 'Background';
|
|
var Background$1 = memo(Background);
|
|
|
|
export { Background$1 as Background, BackgroundVariant };
|