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>

frontend/node_modules/@reactflow/node-toolbar/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2023 webkid GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/node_modules/@reactflow/node-toolbar/README.md

@@ -0,0 +1,10 @@
+# @reactflow/node-toolbar
+
+A toolbar component for React Flow that can be attached to a node.
+
+## Installation 
+
+```sh 
+npm install @reactflow/node-toolbar
+```
+

frontend/node_modules/@reactflow/node-toolbar/dist/esm/NodeToolbar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NodeToolbarProps } from './types';
+declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, align, ...rest }: NodeToolbarProps): JSX.Element | null;
+export default NodeToolbar;
+//# sourceMappingURL=NodeToolbar.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/esm/NodeToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/NodeToolbar.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAS,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA8DlD,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAuB,EACvB,MAAW,EACX,KAAgB,EAChB,GAAG,IAAI,EACR,EAAE,gBAAgB,sBA2ClB;AAED,eAAe,WAAW,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/esm/NodeToolbarPortal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare function NodeToolbarPortal({ children }: {
+    children: ReactNode;
+}): import("react").ReactPortal | null;
+export default NodeToolbarPortal;
+//# sourceMappingURL=NodeToolbarPortal.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/esm/NodeToolbarPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeToolbarPortal.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/NodeToolbarPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAQ/D;AAED,eAAe,iBAAiB,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NodeToolbar } from './NodeToolbar';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,SAAS,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/esm/index.js

@@ -0,0 +1,98 @@
+import React, { useCallback } from 'react';
+import { useStore, useNodeId, getNodesBounds, internalsSymbol, Position } from '@reactflow/core';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import { createPortal } from 'react-dom';
+
+const selector = (state) => state.domNode?.querySelector('.react-flow__renderer');
+function NodeToolbarPortal({ children }) {
+    const wrapperRef = useStore(selector);
+    if (!wrapperRef) {
+        return null;
+    }
+    return createPortal(children, wrapperRef);
+}
+
+const nodeEqualityFn = (a, b) => a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
+    a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
+    a?.width === b?.width &&
+    a?.height === b?.height &&
+    a?.selected === b?.selected &&
+    a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
+const nodesEqualityFn = (a, b) => {
+    return a.length === b.length && a.every((node, i) => nodeEqualityFn(node, b[i]));
+};
+const storeSelector = (state) => ({
+    transform: state.transform,
+    nodeOrigin: state.nodeOrigin,
+    selectedNodesCount: state.getNodes().filter((node) => node.selected).length,
+});
+function getTransform(nodeRect, transform, position, offset, align) {
+    let alignmentOffset = 0.5;
+    if (align === 'start') {
+        alignmentOffset = 0;
+    }
+    else if (align === 'end') {
+        alignmentOffset = 1;
+    }
+    // position === Position.Top
+    // we set the x any y position of the toolbar based on the nodes position
+    let pos = [
+        (nodeRect.x + nodeRect.width * alignmentOffset) * transform[2] + transform[0],
+        nodeRect.y * transform[2] + transform[1] - offset,
+    ];
+    // and than shift it based on the alignment. The shift values are in %.
+    let shift = [-100 * alignmentOffset, -100];
+    switch (position) {
+        case Position.Right:
+            pos = [
+                (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
+            ];
+            shift = [0, -100 * alignmentOffset];
+            break;
+        case Position.Bottom:
+            pos[1] = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
+            shift[1] = 0;
+            break;
+        case Position.Left:
+            pos = [
+                nodeRect.x * transform[2] + transform[0] - offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
+            ];
+            shift = [-100, -100 * alignmentOffset];
+            break;
+    }
+    return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
+function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, align = 'center', ...rest }) {
+    const contextNodeId = useNodeId();
+    const nodesSelector = useCallback((state) => {
+        const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
+        return nodeIds.reduce((acc, id) => {
+            const node = state.nodeInternals.get(id);
+            if (node) {
+                acc.push(node);
+            }
+            return acc;
+        }, []);
+    }, [nodeId, contextNodeId]);
+    const nodes = useStore(nodesSelector, nodesEqualityFn);
+    const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+    const isActive = typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
+    if (!isActive || !nodes.length) {
+        return null;
+    }
+    const nodeRect = getNodesBounds(nodes, nodeOrigin);
+    const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+    const wrapperStyle = {
+        position: 'absolute',
+        transform: getTransform(nodeRect, transform, position, offset, align),
+        zIndex,
+        ...style,
+    };
+    return (React.createElement(NodeToolbarPortal, null,
+        React.createElement("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest }, children)));
+}
+
+export { NodeToolbar };

frontend/node_modules/@reactflow/node-toolbar/dist/esm/index.mjs

@@ -0,0 +1,98 @@
+import React, { useCallback } from 'react';
+import { useStore, useNodeId, getNodesBounds, internalsSymbol, Position } from '@reactflow/core';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import { createPortal } from 'react-dom';
+
+const selector = (state) => state.domNode?.querySelector('.react-flow__renderer');
+function NodeToolbarPortal({ children }) {
+    const wrapperRef = useStore(selector);
+    if (!wrapperRef) {
+        return null;
+    }
+    return createPortal(children, wrapperRef);
+}
+
+const nodeEqualityFn = (a, b) => a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
+    a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
+    a?.width === b?.width &&
+    a?.height === b?.height &&
+    a?.selected === b?.selected &&
+    a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
+const nodesEqualityFn = (a, b) => {
+    return a.length === b.length && a.every((node, i) => nodeEqualityFn(node, b[i]));
+};
+const storeSelector = (state) => ({
+    transform: state.transform,
+    nodeOrigin: state.nodeOrigin,
+    selectedNodesCount: state.getNodes().filter((node) => node.selected).length,
+});
+function getTransform(nodeRect, transform, position, offset, align) {
+    let alignmentOffset = 0.5;
+    if (align === 'start') {
+        alignmentOffset = 0;
+    }
+    else if (align === 'end') {
+        alignmentOffset = 1;
+    }
+    // position === Position.Top
+    // we set the x any y position of the toolbar based on the nodes position
+    let pos = [
+        (nodeRect.x + nodeRect.width * alignmentOffset) * transform[2] + transform[0],
+        nodeRect.y * transform[2] + transform[1] - offset,
+    ];
+    // and than shift it based on the alignment. The shift values are in %.
+    let shift = [-100 * alignmentOffset, -100];
+    switch (position) {
+        case Position.Right:
+            pos = [
+                (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
+            ];
+            shift = [0, -100 * alignmentOffset];
+            break;
+        case Position.Bottom:
+            pos[1] = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
+            shift[1] = 0;
+            break;
+        case Position.Left:
+            pos = [
+                nodeRect.x * transform[2] + transform[0] - offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
+            ];
+            shift = [-100, -100 * alignmentOffset];
+            break;
+    }
+    return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
+function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, align = 'center', ...rest }) {
+    const contextNodeId = useNodeId();
+    const nodesSelector = useCallback((state) => {
+        const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
+        return nodeIds.reduce((acc, id) => {
+            const node = state.nodeInternals.get(id);
+            if (node) {
+                acc.push(node);
+            }
+            return acc;
+        }, []);
+    }, [nodeId, contextNodeId]);
+    const nodes = useStore(nodesSelector, nodesEqualityFn);
+    const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+    const isActive = typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
+    if (!isActive || !nodes.length) {
+        return null;
+    }
+    const nodeRect = getNodesBounds(nodes, nodeOrigin);
+    const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+    const wrapperStyle = {
+        position: 'absolute',
+        transform: getTransform(nodeRect, transform, position, offset, align),
+        zIndex,
+        ...style,
+    };
+    return (React.createElement(NodeToolbarPortal, null,
+        React.createElement("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest }, children)));
+}
+
+export { NodeToolbar };

frontend/node_modules/@reactflow/node-toolbar/dist/esm/types.d.ts

@@ -0,0 +1,11 @@
+import { Position } from '@reactflow/core';
+import type { HTMLAttributes } from 'react';
+export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+    nodeId?: string | string[];
+    isVisible?: boolean;
+    position?: Position;
+    offset?: number;
+    align?: Align;
+};
+export type Align = 'center' | 'start' | 'end';
+//# sourceMappingURL=types.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/umd/NodeToolbar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NodeToolbarProps } from './types';
+declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, align, ...rest }: NodeToolbarProps): JSX.Element | null;
+export default NodeToolbar;
+//# sourceMappingURL=NodeToolbar.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/umd/NodeToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/NodeToolbar.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAS,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA8DlD,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAuB,EACvB,MAAW,EACX,KAAgB,EAChB,GAAG,IAAI,EACR,EAAE,gBAAgB,sBA2ClB;AAED,eAAe,WAAW,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/umd/NodeToolbarPortal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare function NodeToolbarPortal({ children }: {
+    children: ReactNode;
+}): import("react").ReactPortal | null;
+export default NodeToolbarPortal;
+//# sourceMappingURL=NodeToolbarPortal.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/umd/NodeToolbarPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeToolbarPortal.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/NodeToolbarPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAQ/D;AAED,eAAe,iBAAiB,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/umd/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NodeToolbar } from './NodeToolbar';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/umd/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,SAAS,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/dist/umd/types.d.ts

@@ -0,0 +1,11 @@
+import { Position } from '@reactflow/core';
+import type { HTMLAttributes } from 'react';
+export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+    nodeId?: string | string[];
+    isVisible?: boolean;
+    position?: Position;
+    offset?: number;
+    align?: Align;
+};
+export type Align = 'center' | 'start' | 'end';
+//# sourceMappingURL=types.d.ts.map

frontend/node_modules/@reactflow/node-toolbar/dist/umd/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/node-toolbar/src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC"}

frontend/node_modules/@reactflow/node-toolbar/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@reactflow/node-toolbar",
+  "version": "1.3.14",
+  "description": "A toolbar component for React Flow that can be attached to a node.",
+  "keywords": [
+    "react",
+    "node-based UI",
+    "graph",
+    "diagram",
+    "workflow",
+    "react-flow"
+  ],
+  "files": [
+    "dist"
+  ],
+  "source": "src/index.tsx",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/umd/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xyflow/xyflow.git",
+    "directory": "packages/node-toolbar"
+  },
+  "dependencies": {
+    "classcat": "^5.0.3",
+    "zustand": "^4.4.1",
+    "@reactflow/core": "11.11.4"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.16",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
+    "react": "^18.2.0",
+    "typescript": "^4.9.4",
+    "@reactflow/tsconfig": "0.0.0",
+    "@reactflow/eslint-config": "0.0.0",
+    "@reactflow/rollup-config": "0.0.0"
+  },
+  "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
+    "name": "ReactFlowNodeToolbar"
+  },
+  "scripts": {
+    "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  }
+}