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>
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import * as React from 'react'
|
|
import { flushSync } from 'react-dom'
|
|
import {
|
|
Virtualizer,
|
|
elementScroll,
|
|
observeElementOffset,
|
|
observeElementRect,
|
|
observeWindowOffset,
|
|
observeWindowRect,
|
|
windowScroll,
|
|
} from '@tanstack/virtual-core'
|
|
import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
|
|
|
|
export * from '@tanstack/virtual-core'
|
|
|
|
const useIsomorphicLayoutEffect =
|
|
typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect
|
|
|
|
function useVirtualizerBase<
|
|
TScrollElement extends Element | Window,
|
|
TItemElement extends Element,
|
|
>(
|
|
options: VirtualizerOptions<TScrollElement, TItemElement>,
|
|
): Virtualizer<TScrollElement, TItemElement> {
|
|
const rerender = React.useReducer(() => ({}), {})[1]
|
|
|
|
const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
|
|
...options,
|
|
onChange: (instance, sync) => {
|
|
if (sync) {
|
|
flushSync(rerender)
|
|
} else {
|
|
rerender()
|
|
}
|
|
options.onChange?.(instance, sync)
|
|
},
|
|
}
|
|
|
|
const [instance] = React.useState(
|
|
() => new Virtualizer<TScrollElement, TItemElement>(resolvedOptions),
|
|
)
|
|
|
|
instance.setOptions(resolvedOptions)
|
|
|
|
useIsomorphicLayoutEffect(() => {
|
|
return instance._didMount()
|
|
}, [])
|
|
|
|
useIsomorphicLayoutEffect(() => {
|
|
return instance._willUpdate()
|
|
})
|
|
|
|
return instance
|
|
}
|
|
|
|
export function useVirtualizer<
|
|
TScrollElement extends Element,
|
|
TItemElement extends Element,
|
|
>(
|
|
options: PartialKeys<
|
|
VirtualizerOptions<TScrollElement, TItemElement>,
|
|
'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
|
|
>,
|
|
): Virtualizer<TScrollElement, TItemElement> {
|
|
return useVirtualizerBase<TScrollElement, TItemElement>({
|
|
observeElementRect: observeElementRect,
|
|
observeElementOffset: observeElementOffset,
|
|
scrollToFn: elementScroll,
|
|
...options,
|
|
})
|
|
}
|
|
|
|
export function useWindowVirtualizer<TItemElement extends Element>(
|
|
options: PartialKeys<
|
|
VirtualizerOptions<Window, TItemElement>,
|
|
| 'getScrollElement'
|
|
| 'observeElementRect'
|
|
| 'observeElementOffset'
|
|
| 'scrollToFn'
|
|
>,
|
|
): Virtualizer<Window, TItemElement> {
|
|
return useVirtualizerBase<Window, TItemElement>({
|
|
getScrollElement: () => (typeof document !== 'undefined' ? window : null),
|
|
observeElementRect: observeWindowRect,
|
|
observeElementOffset: observeWindowOffset,
|
|
scrollToFn: windowScroll,
|
|
initialOffset: () => (typeof document !== 'undefined' ? window.scrollY : 0),
|
|
...options,
|
|
})
|
|
}
|