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>
84 lines
3.4 KiB
JavaScript
84 lines
3.4 KiB
JavaScript
import { resolveElements } from '../render/dom/utils/resolve-element.mjs';
|
|
import { visualElementStore } from '../render/store.mjs';
|
|
import { invariant } from '../utils/errors.mjs';
|
|
import { GroupPlaybackControls } from './GroupPlaybackControls.mjs';
|
|
import { isDOMKeyframes } from './utils/is-dom-keyframes.mjs';
|
|
import { animateTarget } from './interfaces/visual-element-target.mjs';
|
|
import { createVisualElement } from './utils/create-visual-element.mjs';
|
|
import { animateSingleValue } from './interfaces/single-value.mjs';
|
|
import { createAnimationsFromSequence } from './sequence/create.mjs';
|
|
import { isMotionValue } from '../value/utils/is-motion-value.mjs';
|
|
|
|
function animateElements(elementOrSelector, keyframes, options, scope) {
|
|
const elements = resolveElements(elementOrSelector, scope);
|
|
const numElements = elements.length;
|
|
invariant(Boolean(numElements), "No valid element provided.");
|
|
const animations = [];
|
|
for (let i = 0; i < numElements; i++) {
|
|
const element = elements[i];
|
|
/**
|
|
* Check each element for an associated VisualElement. If none exists,
|
|
* we need to create one.
|
|
*/
|
|
if (!visualElementStore.has(element)) {
|
|
/**
|
|
* TODO: We only need render-specific parts of the VisualElement.
|
|
* With some additional work the size of the animate() function
|
|
* could be reduced significantly.
|
|
*/
|
|
createVisualElement(element);
|
|
}
|
|
const visualElement = visualElementStore.get(element);
|
|
const transition = { ...options };
|
|
/**
|
|
* Resolve stagger function if provided.
|
|
*/
|
|
if (typeof transition.delay === "function") {
|
|
transition.delay = transition.delay(i, numElements);
|
|
}
|
|
animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
|
|
}
|
|
return new GroupPlaybackControls(animations);
|
|
}
|
|
const isSequence = (value) => Array.isArray(value) && Array.isArray(value[0]);
|
|
function animateSequence(sequence, options, scope) {
|
|
const animations = [];
|
|
const animationDefinitions = createAnimationsFromSequence(sequence, options, scope);
|
|
animationDefinitions.forEach(({ keyframes, transition }, subject) => {
|
|
let animation;
|
|
if (isMotionValue(subject)) {
|
|
animation = animateSingleValue(subject, keyframes.default, transition.default);
|
|
}
|
|
else {
|
|
animation = animateElements(subject, keyframes, transition);
|
|
}
|
|
animations.push(animation);
|
|
});
|
|
return new GroupPlaybackControls(animations);
|
|
}
|
|
const createScopedAnimate = (scope) => {
|
|
/**
|
|
* Implementation
|
|
*/
|
|
function scopedAnimate(valueOrElementOrSequence, keyframes, options) {
|
|
let animation;
|
|
if (isSequence(valueOrElementOrSequence)) {
|
|
animation = animateSequence(valueOrElementOrSequence, keyframes, scope);
|
|
}
|
|
else if (isDOMKeyframes(keyframes)) {
|
|
animation = animateElements(valueOrElementOrSequence, keyframes, options, scope);
|
|
}
|
|
else {
|
|
animation = animateSingleValue(valueOrElementOrSequence, keyframes, options);
|
|
}
|
|
if (scope) {
|
|
scope.animations.push(animation);
|
|
}
|
|
return animation;
|
|
}
|
|
return scopedAnimate;
|
|
};
|
|
const animate = createScopedAnimate();
|
|
|
|
export { animate, createScopedAnimate };
|