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/minimap/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/minimap/README.md

@@ -0,0 +1,10 @@
+# @reactflow/minimap
+
+Mini map component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @reactflow/minimap
+```
+

frontend/node_modules/@reactflow/minimap/dist/esm/MiniMap.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MiniMapProps } from './types';
+declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, inversePan, zoomStep, offsetScale, }: MiniMapProps): JSX.Element;
+declare namespace MiniMap {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof MiniMap>;
+export default _default;
+//# sourceMappingURL=MiniMap.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/esm/MiniMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/MiniMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAUvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAuB5C,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,eAA+B,EAC/B,SAAqB,EACrB,aAAkB,EAClB,gBAAoB,EACpB,eAAmB,EAGnB,aAAa,EACb,SAAqC,EACrC,eAAwB,EACxB,eAAmB,EACnB,QAAyB,EACzB,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,SAAiC,EACjC,UAAkB,EAClB,QAAa,EACb,WAAe,GAChB,EAAE,YAAY,eAqId;kBA5JQ,OAAO;;;;AAgKhB,wBAA6B"}

frontend/node_modules/@reactflow/minimap/dist/esm/MiniMapNode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MiniMapNodeProps } from './types';
+declare const _default: React.MemoExoticComponent<{
+    ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, selected, }: MiniMapNodeProps): JSX.Element;
+    displayName: string;
+}>;
+export default _default;
+//# sourceMappingURL=MiniMapNode.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/esm/MiniMapNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMapNode.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/MiniMapNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;;;AAyChD,wBAAiC"}

frontend/node_modules/@reactflow/minimap/dist/esm/MiniMapNodes.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MiniMapNodes } from './types';
+declare function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent: NodeComponent, onClick, }: MiniMapNodes): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MiniMapNodes>;
+export default _default;
+//# sourceMappingURL=MiniMapNodes.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/esm/MiniMapNodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMapNodes.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/MiniMapNodes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAe,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EAAE,YAAY,EAA2B,MAAM,SAAS,CAAC;AAQrE,iBAAS,YAAY,CAAC,EACpB,eAA+B,EAC/B,SAAqB,EACrB,aAAkB,EAClB,gBAAoB,EACpB,eAAmB,EAGnB,aAAa,EAAE,aAA2B,EAC1C,OAAO,GACR,EAAE,YAAY,eAoCd;;AAED,wBAAkC"}

frontend/node_modules/@reactflow/minimap/dist/esm/index.d.ts

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

frontend/node_modules/@reactflow/minimap/dist/esm/index.d.ts.map

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

frontend/node_modules/@reactflow/minimap/dist/esm/index.js

@@ -0,0 +1,143 @@
+import React, { memo, useRef, useEffect } from 'react';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import { zoom, zoomIdentity } from 'd3-zoom';
+import { select, pointer } from 'd3-selection';
+import { useStore, getNodePositionWithOrigin, useStoreApi, Panel, getBoundsOfRects, getNodesBounds } from '@reactflow/core';
+
+const MiniMapNode = ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, selected, }) => {
+    const { background, backgroundColor } = style || {};
+    const fill = (color || background || backgroundColor);
+    return (React.createElement("rect", { className: cc(['react-flow__minimap-node', { selected }, className]), x: x, y: y, rx: borderRadius, ry: borderRadius, width: width, height: height, fill: fill, stroke: strokeColor, strokeWidth: strokeWidth, shapeRendering: shapeRendering, onClick: onClick ? (event) => onClick(event, id) : undefined }));
+};
+MiniMapNode.displayName = 'MiniMapNode';
+var MiniMapNode$1 = memo(MiniMapNode);
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const selector$1 = (s) => s.nodeOrigin;
+const selectorNodes = (s) => s.getNodes().filter((node) => !node.hidden && node.width && node.height);
+const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
+function MiniMapNodes({ nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 
+// We need to rename the prop to be `CapitalCase` so that JSX will render it as
+// a component properly.
+nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
+    const nodes = useStore(selectorNodes, shallow);
+    const nodeOrigin = useStore(selector$1);
+    const nodeColorFunc = getAttrFunction(nodeColor);
+    const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
+    const nodeClassNameFunc = getAttrFunction(nodeClassName);
+    const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+    return (React.createElement(React.Fragment, null, nodes.map((node) => {
+        const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+        return (React.createElement(NodeComponent, { key: node.id, x: x, y: y, width: node.width, height: node.height, style: node.style, selected: node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
+    })));
+}
+var MiniMapNodes$1 = memo(MiniMapNodes);
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const defaultWidth = 200;
+const defaultHeight = 150;
+const selector = (s) => {
+    const nodes = s.getNodes();
+    const viewBB = {
+        x: -s.transform[0] / s.transform[2],
+        y: -s.transform[1] / s.transform[2],
+        width: s.width / s.transform[2],
+        height: s.height / s.transform[2],
+    };
+    return {
+        viewBB,
+        boundingRect: nodes.length > 0 ? getBoundsOfRects(getNodesBounds(nodes, s.nodeOrigin), viewBB) : viewBB,
+        rfId: s.rfId,
+    };
+};
+const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
+function MiniMap({ style, className, nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 
+// We need to rename the prop to be `CapitalCase` so that JSX will render it as
+// a component properly.
+nodeComponent, maskColor = 'rgb(240, 240, 240, 0.6)', maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan = false, zoomStep = 10, offsetScale = 5, }) {
+    const store = useStoreApi();
+    const svg = useRef(null);
+    const { boundingRect, viewBB, rfId } = useStore(selector, shallow);
+    const elementWidth = style?.width ?? defaultWidth;
+    const elementHeight = style?.height ?? defaultHeight;
+    const scaledWidth = boundingRect.width / elementWidth;
+    const scaledHeight = boundingRect.height / elementHeight;
+    const viewScale = Math.max(scaledWidth, scaledHeight);
+    const viewWidth = viewScale * elementWidth;
+    const viewHeight = viewScale * elementHeight;
+    const offset = offsetScale * viewScale;
+    const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+    const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+    const width = viewWidth + offset * 2;
+    const height = viewHeight + offset * 2;
+    const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
+    const viewScaleRef = useRef(0);
+    viewScaleRef.current = viewScale;
+    useEffect(() => {
+        if (svg.current) {
+            const selection = select(svg.current);
+            const zoomHandler = (event) => {
+                const { transform, d3Selection, d3Zoom } = store.getState();
+                if (event.sourceEvent.type !== 'wheel' || !d3Selection || !d3Zoom) {
+                    return;
+                }
+                const pinchDelta = -event.sourceEvent.deltaY *
+                    (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
+                    zoomStep;
+                const zoom = transform[2] * Math.pow(2, pinchDelta);
+                d3Zoom.scaleTo(d3Selection, zoom);
+            };
+            const panHandler = (event) => {
+                const { transform, d3Selection, d3Zoom, translateExtent, width, height } = store.getState();
+                if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) {
+                    return;
+                }
+                // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
+                const moveScale = viewScaleRef.current * Math.max(1, transform[2]) * (inversePan ? -1 : 1);
+                const position = {
+                    x: transform[0] - event.sourceEvent.movementX * moveScale,
+                    y: transform[1] - event.sourceEvent.movementY * moveScale,
+                };
+                const extent = [
+                    [0, 0],
+                    [width, height],
+                ];
+                const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]);
+                const constrainedTransform = d3Zoom.constrain()(nextTransform, extent, translateExtent);
+                d3Zoom.transform(d3Selection, constrainedTransform);
+            };
+            const zoomAndPanHandler = zoom()
+                // @ts-ignore
+                .on('zoom', pannable ? panHandler : null)
+                // @ts-ignore
+                .on('zoom.wheel', zoomable ? zoomHandler : null);
+            selection.call(zoomAndPanHandler);
+            return () => {
+                selection.on('zoom', null);
+            };
+        }
+    }, [pannable, zoomable, inversePan, zoomStep]);
+    const onSvgClick = onClick
+        ? (event) => {
+            const rfCoord = pointer(event);
+            onClick(event, { x: rfCoord[0], y: rfCoord[1] });
+        }
+        : undefined;
+    const onSvgNodeClick = onNodeClick
+        ? (event, nodeId) => {
+            const node = store.getState().nodeInternals.get(nodeId);
+            onNodeClick(event, node);
+        }
+        : undefined;
+    return (React.createElement(Panel, { position: position, style: style, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap" },
+        React.createElement("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick },
+            ariaLabel && React.createElement("title", { id: labelledBy }, ariaLabel),
+            React.createElement(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }),
+            React.createElement("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fill: maskColor, fillRule: "evenodd", stroke: maskStrokeColor, strokeWidth: maskStrokeWidth, pointerEvents: "none" }))));
+}
+MiniMap.displayName = 'MiniMap';
+var MiniMap$1 = memo(MiniMap);
+
+export { MiniMap$1 as MiniMap };

frontend/node_modules/@reactflow/minimap/dist/esm/index.mjs

@@ -0,0 +1,143 @@
+import React, { memo, useRef, useEffect } from 'react';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import { zoom, zoomIdentity } from 'd3-zoom';
+import { select, pointer } from 'd3-selection';
+import { useStore, getNodePositionWithOrigin, useStoreApi, Panel, getBoundsOfRects, getNodesBounds } from '@reactflow/core';
+
+const MiniMapNode = ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, selected, }) => {
+    const { background, backgroundColor } = style || {};
+    const fill = (color || background || backgroundColor);
+    return (React.createElement("rect", { className: cc(['react-flow__minimap-node', { selected }, className]), x: x, y: y, rx: borderRadius, ry: borderRadius, width: width, height: height, fill: fill, stroke: strokeColor, strokeWidth: strokeWidth, shapeRendering: shapeRendering, onClick: onClick ? (event) => onClick(event, id) : undefined }));
+};
+MiniMapNode.displayName = 'MiniMapNode';
+var MiniMapNode$1 = memo(MiniMapNode);
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const selector$1 = (s) => s.nodeOrigin;
+const selectorNodes = (s) => s.getNodes().filter((node) => !node.hidden && node.width && node.height);
+const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
+function MiniMapNodes({ nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 
+// We need to rename the prop to be `CapitalCase` so that JSX will render it as
+// a component properly.
+nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
+    const nodes = useStore(selectorNodes, shallow);
+    const nodeOrigin = useStore(selector$1);
+    const nodeColorFunc = getAttrFunction(nodeColor);
+    const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
+    const nodeClassNameFunc = getAttrFunction(nodeClassName);
+    const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+    return (React.createElement(React.Fragment, null, nodes.map((node) => {
+        const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+        return (React.createElement(NodeComponent, { key: node.id, x: x, y: y, width: node.width, height: node.height, style: node.style, selected: node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
+    })));
+}
+var MiniMapNodes$1 = memo(MiniMapNodes);
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const defaultWidth = 200;
+const defaultHeight = 150;
+const selector = (s) => {
+    const nodes = s.getNodes();
+    const viewBB = {
+        x: -s.transform[0] / s.transform[2],
+        y: -s.transform[1] / s.transform[2],
+        width: s.width / s.transform[2],
+        height: s.height / s.transform[2],
+    };
+    return {
+        viewBB,
+        boundingRect: nodes.length > 0 ? getBoundsOfRects(getNodesBounds(nodes, s.nodeOrigin), viewBB) : viewBB,
+        rfId: s.rfId,
+    };
+};
+const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
+function MiniMap({ style, className, nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 
+// We need to rename the prop to be `CapitalCase` so that JSX will render it as
+// a component properly.
+nodeComponent, maskColor = 'rgb(240, 240, 240, 0.6)', maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan = false, zoomStep = 10, offsetScale = 5, }) {
+    const store = useStoreApi();
+    const svg = useRef(null);
+    const { boundingRect, viewBB, rfId } = useStore(selector, shallow);
+    const elementWidth = style?.width ?? defaultWidth;
+    const elementHeight = style?.height ?? defaultHeight;
+    const scaledWidth = boundingRect.width / elementWidth;
+    const scaledHeight = boundingRect.height / elementHeight;
+    const viewScale = Math.max(scaledWidth, scaledHeight);
+    const viewWidth = viewScale * elementWidth;
+    const viewHeight = viewScale * elementHeight;
+    const offset = offsetScale * viewScale;
+    const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+    const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+    const width = viewWidth + offset * 2;
+    const height = viewHeight + offset * 2;
+    const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
+    const viewScaleRef = useRef(0);
+    viewScaleRef.current = viewScale;
+    useEffect(() => {
+        if (svg.current) {
+            const selection = select(svg.current);
+            const zoomHandler = (event) => {
+                const { transform, d3Selection, d3Zoom } = store.getState();
+                if (event.sourceEvent.type !== 'wheel' || !d3Selection || !d3Zoom) {
+                    return;
+                }
+                const pinchDelta = -event.sourceEvent.deltaY *
+                    (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
+                    zoomStep;
+                const zoom = transform[2] * Math.pow(2, pinchDelta);
+                d3Zoom.scaleTo(d3Selection, zoom);
+            };
+            const panHandler = (event) => {
+                const { transform, d3Selection, d3Zoom, translateExtent, width, height } = store.getState();
+                if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) {
+                    return;
+                }
+                // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
+                const moveScale = viewScaleRef.current * Math.max(1, transform[2]) * (inversePan ? -1 : 1);
+                const position = {
+                    x: transform[0] - event.sourceEvent.movementX * moveScale,
+                    y: transform[1] - event.sourceEvent.movementY * moveScale,
+                };
+                const extent = [
+                    [0, 0],
+                    [width, height],
+                ];
+                const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]);
+                const constrainedTransform = d3Zoom.constrain()(nextTransform, extent, translateExtent);
+                d3Zoom.transform(d3Selection, constrainedTransform);
+            };
+            const zoomAndPanHandler = zoom()
+                // @ts-ignore
+                .on('zoom', pannable ? panHandler : null)
+                // @ts-ignore
+                .on('zoom.wheel', zoomable ? zoomHandler : null);
+            selection.call(zoomAndPanHandler);
+            return () => {
+                selection.on('zoom', null);
+            };
+        }
+    }, [pannable, zoomable, inversePan, zoomStep]);
+    const onSvgClick = onClick
+        ? (event) => {
+            const rfCoord = pointer(event);
+            onClick(event, { x: rfCoord[0], y: rfCoord[1] });
+        }
+        : undefined;
+    const onSvgNodeClick = onNodeClick
+        ? (event, nodeId) => {
+            const node = store.getState().nodeInternals.get(nodeId);
+            onNodeClick(event, node);
+        }
+        : undefined;
+    return (React.createElement(Panel, { position: position, style: style, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap" },
+        React.createElement("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick },
+            ariaLabel && React.createElement("title", { id: labelledBy }, ariaLabel),
+            React.createElement(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }),
+            React.createElement("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fill: maskColor, fillRule: "evenodd", stroke: maskStrokeColor, strokeWidth: maskStrokeWidth, pointerEvents: "none" }))));
+}
+MiniMap.displayName = 'MiniMap';
+var MiniMap$1 = memo(MiniMap);
+
+export { MiniMap$1 as MiniMap };

frontend/node_modules/@reactflow/minimap/dist/esm/types.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
+import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
+export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
+export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
+    nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+    nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+    nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
+    nodeBorderRadius?: number;
+    nodeStrokeWidth?: number;
+    nodeComponent?: ComponentType<MiniMapNodeProps>;
+    maskColor?: string;
+    maskStrokeColor?: string;
+    maskStrokeWidth?: number;
+    position?: PanelPosition;
+    onClick?: (event: MouseEvent, position: XYPosition) => void;
+    onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
+    pannable?: boolean;
+    zoomable?: boolean;
+    ariaLabel?: string | null;
+    inversePan?: boolean;
+    zoomStep?: number;
+    offsetScale?: number;
+};
+export type MiniMapNodes = Pick<MiniMapProps, 'nodeColor' | 'nodeStrokeColor' | 'nodeClassName' | 'nodeBorderRadius' | 'nodeStrokeWidth' | 'nodeComponent'> & {
+    onClick?: (event: MouseEvent, nodeId: string) => void;
+};
+export type MiniMapNodeProps = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+    className: string;
+    color: string;
+    shapeRendering: string;
+    strokeColor: string;
+    strokeWidth: number;
+    selected?: boolean;
+    style?: CSSProperties;
+    onClick?: (event: MouseEvent, id: string) => void;
+};
+//# sourceMappingURL=types.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,uBAAuB,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC;AAEvF,MAAM,MAAM,YAAY,CAAC,QAAQ,GAAG,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;IAC1F,SAAS,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC7D,aAAa,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,YAAY,EACZ,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,eAAe,CAC7G,GAAG;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC"}

frontend/node_modules/@reactflow/minimap/dist/style.css

@@ -0,0 +1,7 @@
+.react-flow__minimap {
+  background-color: #fff;
+}
+
+.react-flow__minimap svg {
+  display: block;
+}

frontend/node_modules/@reactflow/minimap/dist/umd/MiniMap.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MiniMapProps } from './types';
+declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, inversePan, zoomStep, offsetScale, }: MiniMapProps): JSX.Element;
+declare namespace MiniMap {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof MiniMap>;
+export default _default;
+//# sourceMappingURL=MiniMap.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/umd/MiniMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/MiniMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAUvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAuB5C,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,eAA+B,EAC/B,SAAqB,EACrB,aAAkB,EAClB,gBAAoB,EACpB,eAAmB,EAGnB,aAAa,EACb,SAAqC,EACrC,eAAwB,EACxB,eAAmB,EACnB,QAAyB,EACzB,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,SAAiC,EACjC,UAAkB,EAClB,QAAa,EACb,WAAe,GAChB,EAAE,YAAY,eAqId;kBA5JQ,OAAO;;;;AAgKhB,wBAA6B"}

frontend/node_modules/@reactflow/minimap/dist/umd/MiniMapNode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MiniMapNodeProps } from './types';
+declare const _default: React.MemoExoticComponent<{
+    ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, selected, }: MiniMapNodeProps): JSX.Element;
+    displayName: string;
+}>;
+export default _default;
+//# sourceMappingURL=MiniMapNode.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/umd/MiniMapNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMapNode.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/MiniMapNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;;;AAyChD,wBAAiC"}

frontend/node_modules/@reactflow/minimap/dist/umd/MiniMapNodes.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MiniMapNodes } from './types';
+declare function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent: NodeComponent, onClick, }: MiniMapNodes): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MiniMapNodes>;
+export default _default;
+//# sourceMappingURL=MiniMapNodes.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/umd/MiniMapNodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMapNodes.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/MiniMapNodes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAe,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EAAE,YAAY,EAA2B,MAAM,SAAS,CAAC;AAQrE,iBAAS,YAAY,CAAC,EACpB,eAA+B,EAC/B,SAAqB,EACrB,aAAkB,EAClB,gBAAoB,EACpB,eAAmB,EAGnB,aAAa,EAAE,aAA2B,EAC1C,OAAO,GACR,EAAE,YAAY,eAoCd;;AAED,wBAAkC"}

frontend/node_modules/@reactflow/minimap/dist/umd/index.d.ts

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

frontend/node_modules/@reactflow/minimap/dist/umd/index.d.ts.map

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

frontend/node_modules/@reactflow/minimap/dist/umd/types.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
+import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
+export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
+export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
+    nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+    nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+    nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
+    nodeBorderRadius?: number;
+    nodeStrokeWidth?: number;
+    nodeComponent?: ComponentType<MiniMapNodeProps>;
+    maskColor?: string;
+    maskStrokeColor?: string;
+    maskStrokeWidth?: number;
+    position?: PanelPosition;
+    onClick?: (event: MouseEvent, position: XYPosition) => void;
+    onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
+    pannable?: boolean;
+    zoomable?: boolean;
+    ariaLabel?: string | null;
+    inversePan?: boolean;
+    zoomStep?: number;
+    offsetScale?: number;
+};
+export type MiniMapNodes = Pick<MiniMapProps, 'nodeColor' | 'nodeStrokeColor' | 'nodeClassName' | 'nodeBorderRadius' | 'nodeStrokeWidth' | 'nodeComponent'> & {
+    onClick?: (event: MouseEvent, nodeId: string) => void;
+};
+export type MiniMapNodeProps = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+    className: string;
+    color: string;
+    shapeRendering: string;
+    strokeColor: string;
+    strokeWidth: number;
+    selected?: boolean;
+    style?: CSSProperties;
+    onClick?: (event: MouseEvent, id: string) => void;
+};
+//# sourceMappingURL=types.d.ts.map

frontend/node_modules/@reactflow/minimap/dist/umd/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/minimap/src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,uBAAuB,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC;AAEvF,MAAM,MAAM,YAAY,CAAC,QAAQ,GAAG,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;IAC1F,SAAS,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC7D,aAAa,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,YAAY,EACZ,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,eAAe,CAC7G,GAAG;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC"}

frontend/node_modules/@reactflow/minimap/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@reactflow/minimap",
+  "version": "11.7.14",
+  "description": "Minimap component for React Flow.",
+  "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"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xyflow/xyflow.git",
+    "directory": "packages/minimap"
+  },
+  "dependencies": {
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1",
+    "classcat": "^5.0.3",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
+    "zustand": "^4.4.1",
+    "@reactflow/core": "11.11.4"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.16",
+    "@types/react": ">=17",
+    "react": "^18.2.0",
+    "typescript": "^4.9.4",
+    "@reactflow/rollup-config": "0.0.0",
+    "@reactflow/tsconfig": "0.0.0",
+    "@reactflow/eslint-config": "0.0.0"
+  },
+  "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
+    "name": "ReactFlowMinimap"
+  },
+  "scripts": {
+    "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css",
+    "css": "postcss src/*.css --config ../../tooling/postcss-config/postcss.config.js --dir dist",
+    "css-watch": "pnpm css --watch",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  }
+}