Files
hive/frontend/node_modules/react-flow-renderer/dist/style.css
anthonyrawlins 85bf1341f3 Add comprehensive frontend UI and distributed infrastructure
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>
2025-07-10 08:41:59 +10:00

221 lines
3.3 KiB
CSS

.react-flow {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.react-flow__container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.react-flow__pane {
z-index: 1;
}
.react-flow__viewport {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.react-flow__renderer {
z-index: 4;
}
.react-flow__selectionpane {
z-index: 5;
}
.react-flow .react-flow__edges {
pointer-events: none;
overflow: visible;
}
.react-flow .react-flow__connectionline {
z-index: 1001;
}
.react-flow__edge {
pointer-events: visibleStroke;
}
.react-flow__edge.inactive {
pointer-events: none;
}
@-webkit-keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.react-flow__edge-path {
fill: none;
}
.react-flow__edge-textwrapper {
pointer-events: all;
}
.react-flow__edge-text {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.react-flow__connection {
pointer-events: none;
}
.react-flow__connection .animated {
stroke-dasharray: 5;
-webkit-animation: dashdraw 0.5s linear infinite;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__connection-path {
fill: none;
}
.react-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.react-flow__node {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
}
.react-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
}
.react-flow__nodesselection-rect {
position: absolute;
pointer-events: all;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__handle {
position: absolute;
pointer-events: none;
}
.react-flow__handle.connectable {
pointer-events: all;
}
.react-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.react-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.react-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
/* additional components */
.react-flow__controls {
position: absolute;
z-index: 5;
bottom: 20px;
left: 15px;
}
.react-flow__controls-button {
width: 24px;
height: 24px;
border: none;
}
.react-flow__controls-button svg {
width: 100%;
}
.react-flow__minimap {
position: absolute;
z-index: 5;
bottom: 20px;
right: 15px;
}
.react-flow__attribution {
font-size: 10px;
position: absolute;
z-index: 1000;
background: rgba(255, 255, 255, 0.5);
padding: 2px 3px;
color: #999;
}
.react-flow__attribution a {
color: #555;
text-decoration: none;
}
.react-flow__attribution.top {
top: 0;
}
.react-flow__attribution.bottom {
bottom: 0;
}
.react-flow__attribution.left {
left: 0;
}
.react-flow__attribution.right {
right: 0;
}
.react-flow__attribution.center {
left: 50%;
transform: translateX(-50%);
}