feat: graph-page

frontend/.qwen/settings.json

@@ -7,7 +7,8 @@
       "Bash(type *)",
       "Bash(dir)",
       "Bash(move *)",
-      "Bash(findstr *)"
+      "Bash(findstr *)",
+      "Bash(del *)"
     ]
   },
   "$version": 3

frontend/src/app/providers/layout/sidebar/sidebar.tsx

@@ -11,6 +11,7 @@ import {
   FaProjectDiagram,
   FaTrash,
 } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
@@ -23,6 +24,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
   isOpen = true,
   onToggle,
 }) => {
+  const navigate = useNavigate();
   const { agents, isLoading, error, fetchAgents, removeAgent } =
     useAgentStore();
   const { token } = useAuthStore();
@@ -350,6 +352,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
         >
           {/* Кнопка Графы */}
           <button
+            onClick={() => navigate("/graphs")}
             className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs rounded transition-colors"
             style={{
               backgroundColor: "var(--bg-secondary)",

frontend/src/app/providers/routing/routing.tsx

@@ -3,7 +3,7 @@ import { Routes as ReactRoutes, Route, Navigate } from "react-router-dom";
 import { HomePage } from "@/pages/home.page";
 import { ThemesPage } from "@/pages/themes.page";
 import { TestPage } from "@/pages/test.page";
-import { Test2Page, type GraphData } from "@/pages/test2.page";
+import { Graph, type GraphData } from "@/modules/graph";
 import { AuthPage } from "@/pages/auth.page";
 import { RegisterPage } from "@/pages/register.page";
 import { DefaultLayout } from "@/shared/layouts/DefaultLayout";
@@ -13,6 +13,7 @@ import { TemplatesPage } from "@/pages/templates.page";
 import { AdminPage } from "@/pages/admin.page";
 import { RegistrationTokenPage } from "@/pages/registration.page";
 import { LogsPage } from "@/pages/logs.page";
+import { GraphsPage } from "@/pages/graphs.page";
 
 export const mockGraphData: GraphData = {
   nodes: [
@@ -128,11 +129,12 @@ export const Routing = () => {
           <Route path="/admin" element={<AdminPage />} />
           <Route path="/IDE" element={<IDEPage />} />
           <Route path="/templates" element={<TemplatesPage />} />
+          <Route path="/graphs" element={<GraphsPage />} />
         </Route>
 
         <Route path="/test" element={<TestPage />} />
 
-        <Route path="/test2" element={<Test2Page data={mockGraphData} />} />
+        <Route path="/test2" element={<Graph initialData={mockGraphData} />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </ReactRoutes>

frontend/src/modules/graph/Graph.tsx

@@ -0,0 +1,125 @@
+import React, { useRef, useEffect, useState } from "react";
+import type {
+  GraphData,
+  GraphNode,
+  GraphLink,
+  ContextMenuState,
+} from "./types";
+import { useGraphStore } from "./store/useGraphStore";
+import {
+  ForceGraph,
+  GraphControls,
+  GraphContextMenu,
+  GraphStatusBar,
+} from "./components";
+
+interface GraphProps {
+  initialData?: GraphData;
+  onExport?: () => void;
+  onDataChange?: (data: GraphData) => void;
+}
+
+export const Graph: React.FC<GraphProps> = ({
+  initialData,
+  onExport,
+  onDataChange,
+}) => {
+  const fgRef = useRef<any>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+
+  const data = useGraphStore((s) => s.data);
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+  const selectedNode = useGraphStore((s) => s.selectedNode);
+  const setData = useGraphStore((s) => s.setData);
+
+  // Инициализация данных
+  useEffect(() => {
+    if (initialData) setData(initialData);
+  }, [initialData, setData]);
+
+  // Отслеживаем размеры контейнера
+  useEffect(() => {
+    const container = fgRef.current?.parentElement;
+    if (!container) return;
+
+    const updateDimensions = () => {
+      setDimensions({
+        width: container.clientWidth,
+        height: container.clientHeight || window.innerHeight - 160,
+      });
+    };
+
+    updateDimensions();
+
+    const observer = new ResizeObserver(updateDimensions);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  // Закрыть контекстное меню по клику вне
+  useEffect(() => {
+    const handleClickOutside = () => setContextMenu(null);
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, []);
+
+  const handleNodeRightClick = (node: GraphNode, event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ x: event.clientX, y: event.clientY, node, link: null });
+  };
+
+  const handleLinkRightClick = (link: GraphLink, event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ x: event.clientX, y: event.clientY, node: null, link });
+  };
+
+  if (!data || data.nodes.length === 0) {
+    return (
+      <div className="bg-gray-900 rounded-xl shadow-lg p-6">
+        <div className="flex items-center justify-center h-96">
+          <div className="text-center">
+            <p className="text-gray-400 mb-4">Нет данных для отображения</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-900 rounded-xl shadow-lg p-6">
+      <div
+        className="border border-gray-800 rounded-lg overflow-hidden relative"
+        style={{
+          height: "calc(100vh - 200px)",
+          position: "relative",
+          width: "100%",
+        }}
+      >
+        <ForceGraph
+          data={data}
+          onNodeRightClick={handleNodeRightClick}
+          onLinkRightClick={handleLinkRightClick}
+        />
+
+        <GraphContextMenu
+          menu={contextMenu}
+          data={data}
+          onClose={() => setContextMenu(null)}
+        />
+
+        <GraphStatusBar isLinkMode={isLinkMode} selectedNode={selectedNode} />
+      </div>
+
+      <GraphControls
+        fgRef={fgRef}
+        onExport={onExport}
+        onDataChange={onDataChange}
+      />
+    </div>
+  );
+};
+
+export default Graph;

frontend/src/modules/graph/components/ForceGraph.tsx

@@ -0,0 +1,162 @@
+import React, { useRef, useEffect, useCallback } from "react";
+import ForceGraph2D from "react-force-graph-2d";
+import type { GraphData, GraphNode, GraphLink } from "../types";
+import { useGraphStore } from "../store/useGraphStore";
+
+interface ForceGraphProps {
+  data: GraphData;
+  onNodeRightClick: (node: GraphNode, event: MouseEvent) => void;
+  onLinkRightClick: (link: GraphLink, event: MouseEvent) => void;
+}
+
+export const ForceGraph: React.FC<ForceGraphProps> = ({
+  data,
+  onNodeRightClick,
+  onLinkRightClick,
+}) => {
+  const fgRef = useRef<any>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const highlightNodes = useGraphStore((s) => s.highlightNodes);
+  const highlightLinks = useGraphStore((s) => s.highlightLinks);
+  const selectedNode = useGraphStore((s) => s.selectedNode);
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+
+  const handleNodeClick = useCallback((node: GraphNode) => {
+    const store = useGraphStore.getState();
+    if (store.isLinkMode) {
+      if (store.selectedNode === null) {
+        store.setSelectedNode(node);
+      } else if (store.selectedNode.id !== node.id) {
+        store.createLink(store.selectedNode.id, node.id);
+        store.setSelectedNode(null);
+        store.toggleLinkMode();
+      } else {
+        store.setSelectedNode(null);
+      }
+    }
+  }, []);
+
+  const handleNodeHover = (node: GraphNode | null) => {
+    const newHighlightNodes = new Set<string>();
+    const newHighlightLinks = new Set<GraphLink>();
+
+    if (node) {
+      newHighlightNodes.add(node.id);
+      data.links.forEach((link) => {
+        if (link.source === node.id || link.target === node.id) {
+          newHighlightLinks.add(link);
+          newHighlightNodes.add(link.source as string);
+          newHighlightNodes.add(link.target as string);
+        }
+      });
+    }
+
+    useGraphStore.getState().setHighlight(newHighlightNodes, newHighlightLinks);
+  };
+
+  const getNodeColor = (node: GraphNode) => {
+    if (highlightNodes.has(node.id)) return "#fbbf24";
+    if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
+
+    switch (node.type) {
+      case "service":
+        return "#3b82f6";
+      case "agent":
+        return "#8b5cf6";
+      default:
+        return "#6b7280";
+    }
+  };
+
+  const getNodeSize = (node: GraphNode) => {
+    switch (node.type) {
+      case "service":
+        return 3;
+      case "agent":
+        return 3;
+      default:
+        return 5;
+    }
+  };
+
+  const renderNode = (
+    node: GraphNode,
+    ctx: CanvasRenderingContext2D,
+    globalScale: number,
+  ) => {
+    const size = getNodeSize(node);
+    const color = getNodeColor(node);
+
+    if (!node.x || !node.y) return;
+
+    ctx.beginPath();
+    ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+
+    ctx.fillStyle = "#ffffff";
+    ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+
+    if (node.type === "service") {
+      ctx.fillText("S", node.x, node.y);
+    } else if (node.type === "agent") {
+      ctx.fillText("A", node.x, node.y);
+    }
+
+    if (globalScale > 0.5) {
+      ctx.fillStyle = "#e5e7eb";
+      ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
+      ctx.textAlign = "center";
+      ctx.fillText(node.name, node.x, node.y + size + 8);
+    }
+  };
+
+  // Fit zoom on engine stop
+  useEffect(() => {
+    if (fgRef.current) {
+      const timer = setTimeout(() => {
+        fgRef.current?.zoomToFit(400);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [data]);
+
+  return (
+    <div ref={containerRef} className="w-full h-full relative">
+      <ForceGraph2D
+        ref={fgRef}
+        graphData={data}
+        width={containerRef.current?.clientWidth}
+        height={containerRef.current?.clientHeight || 600}
+        nodeCanvasObject={renderNode}
+        nodeLabel={(node: GraphNode) => {
+          return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
+        }}
+        linkLabel={(link: GraphLink) => {
+          const sourceName =
+            data.nodes.find((n) => n.id === link.source)?.name || link.source;
+          const targetName =
+            data.nodes.find((n) => n.id === link.target)?.name || link.target;
+          return `Связь: ${sourceName} → ${targetName}\nПКМ для удаления`;
+        }}
+        linkColor={(link: any) => {
+          return highlightLinks.has(link) ? "#fbbf24" : "#4b5563";
+        }}
+        linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1.5)}
+        linkDirectionalParticles={0}
+        onNodeClick={handleNodeClick}
+        onNodeRightClick={onNodeRightClick}
+        onLinkRightClick={onLinkRightClick}
+        onNodeHover={handleNodeHover}
+        cooldownTicks={50}
+        cooldownTime={2000}
+        d3AlphaDecay={0.03}
+        d3VelocityDecay={0.4}
+        warmupTicks={50}
+      />
+    </div>
+  );
+};

frontend/src/modules/graph/components/GraphContextMenu.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { FiLink, FiTrash2, FiMinusCircle } from "react-icons/fi";
+import type { ContextMenuState, GraphNode, GraphLink, GraphData } from "../types";
+import { useGraphStore } from "../store/useGraphStore";
+
+interface GraphContextMenuProps {
+  menu: ContextMenuState | null;
+  data: GraphData;
+  onClose: () => void;
+}
+
+export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
+  menu,
+  data,
+  onClose,
+}) => {
+  const removeNode = useGraphStore((s) => s.removeNode);
+  const removeLink = useGraphStore((s) => s.removeLink);
+  const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
+  const setSelectedNode = useGraphStore((s) => s.setSelectedNode);
+
+  if (!menu) return null;
+
+  const handleDeleteNode = (node: GraphNode) => {
+    removeNode(node.id);
+    onClose();
+  };
+
+  const handleDeleteLink = (link: GraphLink) => {
+    removeLink(link);
+    onClose();
+  };
+
+  const handleCreateLink = (node: GraphNode) => {
+    toggleLinkMode();
+    setSelectedNode(node);
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1 z-50"
+      style={{ top: menu.y, left: menu.x }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {menu.node && (
+        <>
+          <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
+            {menu.node.name}
+          </div>
+          <button
+            onClick={() => handleCreateLink(menu.node!)}
+            className="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2"
+          >
+            <FiLink size={14} /> Создать связь
+          </button>
+          <button
+            onClick={() => handleDeleteNode(menu.node!)}
+            className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
+          >
+            <FiTrash2 size={14} /> Удалить узел
+          </button>
+        </>
+      )}
+      {menu.link && (
+        <>
+          <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
+            Связь:{" "}
+            {typeof menu.link.source === "string"
+              ? menu.link.source
+              : (menu.link.source as any).name || (menu.link.source as any).id}{" "}
+            →{" "}
+            {typeof menu.link.target === "string"
+              ? menu.link.target
+              : (menu.link.target as any).name || (menu.link.target as any).id}
+          </div>
+          <button
+            onClick={() => handleDeleteLink(menu.link!)}
+            className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
+          >
+            <FiMinusCircle size={14} /> Удалить связь
+          </button>
+        </>
+      )}
+    </div>
+  );
+};

frontend/src/modules/graph/components/GraphControls.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import {
+  FiDownload,
+  FiZoomIn,
+  FiZoomOut,
+  FiMove,
+  FiPlus,
+  FiLink,
+} from "react-icons/fi";
+import { useGraphStore } from "../store/useGraphStore";
+import type { GraphData } from "../types";
+
+interface GraphControlsProps {
+  fgRef: React.RefObject<any>;
+  onExport?: () => void;
+  onDataChange?: (data: GraphData) => void;
+}
+
+export const GraphControls: React.FC<GraphControlsProps> = ({
+  fgRef,
+  onExport,
+  onDataChange,
+}) => {
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+  const selectedNode = useGraphStore((s) => s.selectedNode);
+  const data = useGraphStore((s) => s.data);
+  const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
+  const addNode = useGraphStore((s) => s.addNode);
+  const exportData = useGraphStore((s) => s.exportData);
+
+  const handleAddNode = () => {
+    const newNodeName = prompt(
+      "Введите имя узла:",
+      `Node ${data.nodes.length + 1}`,
+    );
+    if (newNodeName) {
+      const isService = window.confirm(
+        "Выберите тип: OK - Сервис, Отмена - Агент",
+      );
+      addNode({
+        id: `node-${Date.now()}`,
+        name: newNodeName,
+        type: isService ? "service" : "agent",
+        val: isService ? 12 : 8,
+        description: "Новый узел",
+      });
+    }
+  };
+
+  const handleZoomIn = () => {
+    if (fgRef.current) {
+      const currentZoom = fgRef.current.zoom();
+      fgRef.current.zoom(currentZoom * 1.2);
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (fgRef.current) {
+      const currentZoom = fgRef.current.zoom();
+      fgRef.current.zoom(currentZoom / 1.2);
+    }
+  };
+
+  const handleFit = () => {
+    if (fgRef.current) {
+      fgRef.current.zoomToFit(400);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between mt-4 text-sm text-gray-400">
+      <div className="flex gap-6">
+        <div className="flex items-center gap-2">
+          <span>
+            Сервисы: {data.nodes.filter((n) => n.type === "service").length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span>
+            Агенты: {data.nodes.filter((n) => n.type === "agent").length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-gray-500 rounded-sm"></div>
+          <span>Связи: {data.links.length}</span>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        {/* Режим создания связи */}
+        <button
+          onClick={toggleLinkMode}
+          className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
+            isLinkMode
+              ? "bg-green-600 hover:bg-green-700 text-white"
+              : "bg-gray-800 hover:bg-gray-700 text-gray-300"
+          }`}
+        >
+          <FiLink />
+          <span className="text-sm">
+            {isLinkMode ? "Создание связи..." : "Добавить связь"}
+          </span>
+        </button>
+
+        {/* Добавить узел */}
+        <button
+          onClick={handleAddNode}
+          className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiPlus />
+          <span className="text-sm">Узел</span>
+        </button>
+
+        {/* Зум + */}
+        <button
+          onClick={handleZoomIn}
+          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiZoomIn />
+        </button>
+
+        {/* Зум - */}
+        <button
+          onClick={handleZoomOut}
+          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiZoomOut />
+        </button>
+
+        {/* Fit */}
+        <button
+          onClick={handleFit}
+          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiMove />
+        </button>
+
+        {/* Экспорт */}
+        <button
+          onClick={onExport || exportData}
+          className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        >
+          <FiDownload />
+          <span className="text-sm">Экспорт</span>
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/modules/graph/components/GraphStatusBar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { FiLink } from "react-icons/fi";
+import type { GraphNode } from "../types";
+
+interface GraphStatusBarProps {
+  isLinkMode: boolean;
+  selectedNode: GraphNode | null;
+}
+
+export const GraphStatusBar: React.FC<GraphStatusBarProps> = ({
+  isLinkMode,
+  selectedNode,
+}) => {
+  if (!isLinkMode) return null;
+
+  return (
+    <div className="absolute bottom-4 left-4 bg-green-600 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2">
+      <FiLink /> Режим создания связей: кликните на два узла для соединения
+      {selectedNode && (
+        <span className="ml-2">Выбран: {selectedNode.name}</span>
+      )}
+    </div>
+  );
+};

frontend/src/modules/graph/components/index.ts

@@ -0,0 +1,4 @@
+export { ForceGraph } from "./ForceGraph";
+export { GraphControls } from "./GraphControls";
+export { GraphContextMenu } from "./GraphContextMenu";
+export { GraphStatusBar } from "./GraphStatusBar";

frontend/src/modules/graph/index.ts

@@ -0,0 +1,3 @@
+export { Graph } from "./Graph";
+export { useGraphStore } from "./store/useGraphStore";
+export type { GraphData, GraphNode, GraphLink } from "./types";

frontend/src/modules/graph/store/useGraphStore.ts

@@ -0,0 +1,113 @@
+import { create } from "zustand";
+import type { GraphData, GraphNode, GraphLink } from "../types";
+
+interface GraphState {
+  data: GraphData;
+  highlightNodes: Set<string>;
+  highlightLinks: Set<GraphLink>;
+  isLinkMode: boolean;
+  selectedNode: GraphNode | null;
+
+  // Действия с данными
+  setData: (data: GraphData) => void;
+  addNode: (node: GraphNode) => void;
+  removeNode: (nodeId: string) => void;
+  addLink: (link: GraphLink) => void;
+  removeLink: (link: GraphLink) => void;
+
+  // Подсветка
+  setHighlight: (nodeIds: Set<string>, links: Set<GraphLink>) => void;
+
+  // Режим связи
+  toggleLinkMode: () => void;
+  setSelectedNode: (node: GraphNode | null) => void;
+  createLink: (sourceId: string, targetId: string) => void;
+
+  // Экспорт
+  exportData: () => void;
+}
+
+export const useGraphStore = create<GraphState>((set, get) => ({
+  data: { nodes: [], links: [] },
+  highlightNodes: new Set(),
+  highlightLinks: new Set(),
+  isLinkMode: false,
+  selectedNode: null,
+
+  setData: (data) => set({ data }),
+
+  addNode: (node) => {
+    set((state) => ({
+      data: {
+        ...state.data,
+        nodes: [...state.data.nodes, node],
+      },
+    }));
+  },
+
+  removeNode: (nodeId) => {
+    set((state) => ({
+      data: {
+        nodes: state.data.nodes.filter((n) => n.id !== nodeId),
+        links: state.data.links.filter(
+          (l) => l.source !== nodeId && l.target !== nodeId,
+        ),
+      },
+    }));
+  },
+
+  addLink: (link) => {
+    set((state) => ({
+      data: {
+        ...state.data,
+        links: [...state.data.links, link],
+      },
+    }));
+  },
+
+  removeLink: (linkToRemove) => {
+    set((state) => ({
+      data: {
+        ...state.data,
+        links: state.data.links.filter((l) => l !== linkToRemove),
+      },
+    }));
+  },
+
+  setHighlight: (nodeIds, links) =>
+    set({ highlightNodes: nodeIds, highlightLinks: links }),
+
+  toggleLinkMode: () =>
+    set((state) => ({
+      isLinkMode: !state.isLinkMode,
+      selectedNode: null,
+    })),
+
+  setSelectedNode: (node) => set({ selectedNode: node }),
+
+  createLink: (sourceId, targetId) => {
+    const { data, addLink } = get();
+
+    const linkExists = data.links.some(
+      (link) =>
+        (link.source === sourceId && link.target === targetId) ||
+        (link.source === targetId && link.target === sourceId),
+    );
+
+    if (!linkExists) {
+      addLink({ source: sourceId, target: targetId, type: "custom" });
+    }
+  },
+
+  exportData: () => {
+    const { data } = get();
+    const dataStr = JSON.stringify(data, null, 2);
+    const blob = new Blob([dataStr], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "graph-data.json";
+    link.click();
+    URL.revokeObjectURL(url);
+  },
+}));

frontend/src/modules/graph/types.ts

@@ -0,0 +1,27 @@
+export interface GraphNode {
+  id: string;
+  name: string;
+  type: "agent" | "service";
+  val?: number;
+  description?: string;
+  x?: number;
+  y?: number;
+}
+
+export interface GraphLink {
+  source: string;
+  target: string;
+  type?: string;
+}
+
+export interface GraphData {
+  nodes: GraphNode[];
+  links: GraphLink[];
+}
+
+export interface ContextMenuState {
+  x: number;
+  y: number;
+  node: GraphNode | null;
+  link: GraphLink | null;
+}

frontend/src/pages/graphs.page.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { Graph, type GraphData, type GraphNode, type GraphLink } from "@/modules/graph";
+import { useAgentStore } from "@/app/providers/layout/store/agent.store";
+
+const buildGraphFromAgents = (): GraphData => {
+  const agents = useAgentStore.getState().agents;
+  const nodes: GraphNode[] = [];
+  const links: GraphLink[] = [];
+
+  agents.forEach((agent) => {
+    // Агент как узел
+    nodes.push({
+      id: agent.name,
+      name: agent.name,
+      type: "agent",
+      val: 8,
+      description: `Агент: ${agent.name}`,
+    });
+
+    // Сервисы агента как узлы + связи
+    agent.services.forEach((service) => {
+      const serviceId = `${agent.name}-${service.name}`;
+      nodes.push({
+        id: serviceId,
+        name: service.name,
+        type: "service",
+        val: 12,
+        description: `Сервис: ${service.name} (${service.status})`,
+      });
+
+      links.push({
+        source: agent.name,
+        target: serviceId,
+        type: "hosts",
+      });
+    });
+  });
+
+  return { nodes, links };
+};
+
+export const GraphsPage = () => {
+  const agents = useAgentStore((s) => s.agents);
+
+  const graphData: GraphData = useMemo(() => {
+    return buildGraphFromAgents();
+  }, [agents]);
+
+  return (
+    <div className="h-full">
+      <Graph initialData={graphData} />
+    </div>
+  );
+};

frontend/src/pages/test2.page.tsx

@@ -1,534 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import ForceGraph2D from "react-force-graph-2d";
-import {
-  FiDownload,
-  FiZoomIn,
-  FiZoomOut,
-  FiMove,
-  FiCpu,
-  FiServer,
-  FiPlus,
-  FiTrash2,
-  FiLink,
-  FiMinusCircle,
-} from "react-icons/fi";
-
-interface GraphNode {
-  id: string;
-  name: string;
-  type: "agent" | "service";
-  val?: number;
-  description?: string;
-  x?: number;
-  y?: number;
-}
-
-interface GraphLink {
-  source: string;
-  target: string;
-  type?: string;
-}
-
-export interface GraphData {
-  nodes: GraphNode[];
-  links: GraphLink[];
-}
-
-interface CustomGraphProps {
-  data: GraphData;
-  onExport?: () => void;
-  onDataChange?: (newData: GraphData) => void;
-}
-
-export const Test2Page: React.FC<CustomGraphProps> = ({
-  data: initialData,
-  onExport,
-  onDataChange,
-}) => {
-  const fgRef = useRef<any>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [data, setData] = useState<GraphData>(initialData);
-  const [highlightNodes, setHighlightNodes] = useState<Set<string>>(new Set());
-  const [highlightLinks, setHighlightLinks] = useState<Set<any>>(new Set());
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-  const [isLinkMode, setIsLinkMode] = useState(false);
-  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
-  const [contextMenu, setContextMenu] = useState<{
-    x: number;
-    y: number;
-    node: GraphNode | null;
-    link: GraphLink | null;
-  } | null>(null);
-
-  useEffect(() => {
-    if (initialData) setData(initialData);
-  }, [initialData]);
-
-  // Отслеживаем размеры контейнера через ResizeObserver
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const updateDimensions = () => {
-      setDimensions({
-        width: container.clientWidth,
-        height: container.clientHeight || window.innerHeight - 160,
-      });
-    };
-
-    updateDimensions();
-
-    const observer = new ResizeObserver(updateDimensions);
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, []);
-
-  // Функция для подсветки связанных элементов
-  const handleNodeHover = (node: GraphNode | null) => {
-    const newHighlightNodes = new Set<string>();
-    const newHighlightLinks = new Set<any>();
-
-    if (node) {
-      newHighlightNodes.add(node.id);
-      data.links.forEach((link) => {
-        if (link.source === node.id || link.target === node.id) {
-          newHighlightLinks.add(link);
-          newHighlightNodes.add(link.source as string);
-          newHighlightNodes.add(link.target as string);
-        }
-      });
-    }
-
-    setHighlightNodes(newHighlightNodes);
-    setHighlightLinks(newHighlightLinks);
-  };
-
-  // Обработчик клика по узлу для создания связей
-  const handleNodeClick = (node: GraphNode) => {
-    if (isLinkMode) {
-      if (selectedNode === null) {
-        setSelectedNode(node);
-      } else if (selectedNode.id !== node.id) {
-        const newLink: GraphLink = {
-          source: selectedNode.id,
-          target: node.id,
-          type: "custom",
-        };
-
-        const linkExists = data.links.some(
-          (link) =>
-            (link.source === selectedNode.id && link.target === node.id) ||
-            (link.source === node.id && link.target === selectedNode.id),
-        );
-
-        if (!linkExists) {
-          const newData = {
-            nodes: [...data.nodes],
-            links: [...data.links, newLink],
-          };
-          setData(newData);
-          onDataChange?.(newData);
-        }
-        setSelectedNode(null);
-        setIsLinkMode(false);
-      } else {
-        setSelectedNode(null);
-      }
-    }
-  };
-
-  // УДАЛЕНИЕ СВЯЗИ
-  const handleDeleteLink = (linkToDelete: GraphLink) => {
-    const filteredLinks = data.links.filter((link) => link !== linkToDelete);
-    const newData = {
-      nodes: [...data.nodes],
-      links: filteredLinks,
-    };
-    setData(newData);
-    onDataChange?.(newData);
-    setContextMenu(null);
-  };
-
-  // УДАЛЕНИЕ УЗЛА
-  const handleDeleteNode = (nodeToDelete: GraphNode) => {
-    const filteredNodes = data.nodes.filter(
-      (node) => node.id !== nodeToDelete.id,
-    );
-    const filteredLinks = data.links.filter(
-      (link) =>
-        link.source !== nodeToDelete.id && link.target !== nodeToDelete.id,
-    );
-    const newData = {
-      nodes: filteredNodes,
-      links: filteredLinks,
-    };
-    setData(newData);
-    onDataChange?.(newData);
-    setContextMenu(null);
-  };
-
-  // Добавление нового узла
-  const handleAddNode = () => {
-    const newNodeName = prompt(
-      "Введите имя узла:",
-      `Node ${data.nodes.length + 1}`,
-    );
-    if (newNodeName) {
-      const isService = window.confirm(
-        "Выберите тип: OK - Сервис, Отмена - Агент",
-      );
-      const newNode: GraphNode = {
-        id: `node-${Date.now()}`,
-        name: newNodeName,
-        type: isService ? "service" : "agent",
-        val: isService ? 12 : 8,
-        description: "Новый узел",
-      };
-
-      const newData = {
-        nodes: [...data.nodes, newNode],
-        links: [...data.links],
-      };
-      setData(newData);
-      onDataChange?.(newData);
-    }
-  };
-
-  // Открытие контекстного меню
-  const openContextMenu = (
-    e: React.MouseEvent,
-    node?: GraphNode,
-    link?: GraphLink,
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (node) {
-      setContextMenu({ x: e.clientX, y: e.clientY, node, link: null });
-    } else if (link) {
-      setContextMenu({ x: e.clientX, y: e.clientY, node: null, link });
-    }
-  };
-
-  // Закрыть контекстное меню
-  useEffect(() => {
-    const handleClickOutside = () => setContextMenu(null);
-    document.addEventListener("click", handleClickOutside);
-    return () => document.removeEventListener("click", handleClickOutside);
-  }, []);
-
-  // Функция для определения цвета узла
-  const getNodeColor = (node: GraphNode) => {
-    if (highlightNodes.has(node.id)) return "#fbbf24";
-    if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
-
-    switch (node.type) {
-      case "service":
-        return "#3b82f6";
-      case "agent":
-        return "#8b5cf6";
-      default:
-        return "#6b7280";
-    }
-  };
-
-  // Функция для размера узла
-  const getNodeSize = (node: GraphNode) => {
-    switch (node.type) {
-      case "service":
-        return 3;
-      case "agent":
-        return 3;
-      default:
-        return 5;
-    }
-  };
-
-  // Кастомный рендер узла
-  const renderNode = (
-    node: GraphNode,
-    ctx: CanvasRenderingContext2D,
-    globalScale: number,
-  ) => {
-    const size = getNodeSize(node);
-    const color = getNodeColor(node);
-
-    if (!node.x || !node.y) return;
-
-    ctx.beginPath();
-    ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
-    ctx.fillStyle = color;
-    ctx.fill();
-
-    ctx.fillStyle = "#ffffff";
-    ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-
-    if (node.type === "service") {
-      ctx.fillText("S", node.x, node.y);
-    } else if (node.type === "agent") {
-      ctx.fillText("A", node.x, node.y);
-    }
-
-    if (globalScale > 0.5) {
-      ctx.fillStyle = "#e5e7eb";
-      ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
-      ctx.textAlign = "center";
-      ctx.fillText(node.name, node.x, node.y + size + 8);
-    }
-  };
-
-  const handleExport = () => {
-    if (onExport) {
-      onExport();
-    } else {
-      const dataStr = JSON.stringify(data, null, 2);
-      const blob = new Blob([dataStr], { type: "application/json" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = "graph-data.json";
-      link.click();
-      URL.revokeObjectURL(url);
-    }
-  };
-
-  const handleZoomIn = () => {
-    if (fgRef.current) {
-      const currentZoom = fgRef.current.zoom();
-      fgRef.current.zoom(currentZoom * 1.2);
-    }
-  };
-
-  const handleZoomOut = () => {
-    if (fgRef.current) {
-      const currentZoom = fgRef.current.zoom();
-      fgRef.current.zoom(currentZoom / 1.2);
-    }
-  };
-
-  const handleFit = () => {
-    if (fgRef.current) {
-      fgRef.current.zoomToFit(400);
-    }
-  };
-
-  if (!data || data.nodes.length === 0) {
-    return (
-      <div className="bg-gray-900 rounded-xl shadow-lg p-6">
-        <div className="flex items-center justify-center h-96">
-          <div className="text-center">
-            <p className="text-gray-400 mb-4">Нет данных для отображения</p>
-            <button
-              onClick={handleAddNode}
-              className="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors text-white mx-auto"
-            >
-              <FiPlus /> Добавить первый узел
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bg-gray-900 rounded-xl shadow-lg p-6">
-      <div
-        ref={containerRef}
-        className="graph-container border border-gray-800 rounded-lg overflow-hidden relative"
-        style={{
-          height: "calc(100vh - 200px)",
-          position: "relative",
-          width: "100%",
-        }}
-      >
-        <ForceGraph2D
-          ref={fgRef}
-          graphData={data}
-          width={dimensions.width}
-          height={dimensions.height}
-          nodeCanvasObject={renderNode}
-          nodeLabel={(node: GraphNode) => {
-            return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
-          }}
-          linkLabel={(link: GraphLink) => {
-            // ВОЗВРАЩАЕМ СТРОКУ
-            const sourceName =
-              data.nodes.find((n) => n.id === link.source)?.name || link.source;
-            const targetName =
-              data.nodes.find((n) => n.id === link.target)?.name || link.target;
-            return `Связь: ${sourceName} → ${targetName}\nПКМ для удаления`;
-          }}
-          linkColor={(link: any) => {
-            return highlightLinks.has(link) ? "#fbbf24" : "#4b5563";
-          }}
-          linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1.5)}
-          linkDirectionalParticles={0}
-          onNodeClick={handleNodeClick}
-          onNodeRightClick={(node, event) =>
-            openContextMenu(event as any, node, undefined)
-          }
-          onLinkRightClick={(link, event) =>
-            openContextMenu(event as any, undefined, link)
-          }
-          onNodeHover={handleNodeHover}
-          cooldownTicks={50}
-          cooldownTime={2000}
-          d3AlphaDecay={0.03}
-          d3VelocityDecay={0.4}
-          warmupTicks={50}
-          onEngineStop={() => {
-            if (fgRef.current) {
-              setTimeout(() => {
-                if (fgRef.current) {
-                  fgRef.current.zoomToFit(400);
-                }
-              }, 100);
-            }
-          }}
-        />
-
-        {contextMenu && (
-          <div
-            className="fixed bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1 z-50"
-            style={{ top: contextMenu.y, left: contextMenu.x }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {contextMenu.node && (
-              <>
-                <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
-                  {contextMenu.node.name}
-                </div>
-                <button
-                  onClick={() => {
-                    setIsLinkMode(true);
-                    setSelectedNode(contextMenu.node);
-                    setContextMenu(null);
-                  }}
-                  className="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2"
-                >
-                  <FiLink size={14} /> Создать связь
-                </button>
-                <button
-                  onClick={() => handleDeleteNode(contextMenu.node!)}
-                  className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
-                >
-                  <FiTrash2 size={14} /> Удалить узел
-                </button>
-              </>
-            )}
-            {contextMenu.link && (
-              <>
-                <div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
-                  Связь:{" "}
-                  {typeof contextMenu.link.source === "string"
-                    ? contextMenu.link.source
-                    : (contextMenu.link.source as any).name ||
-                      (contextMenu.link.source as any).id}{" "}
-                  →{" "}
-                  {typeof contextMenu.link.target === "string"
-                    ? contextMenu.link.target
-                    : (contextMenu.link.target as any).name ||
-                      (contextMenu.link.target as any).id}
-                </div>
-                <button
-                  onClick={() => handleDeleteLink(contextMenu.link!)}
-                  className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
-                >
-                  <FiMinusCircle size={14} /> Удалить связь
-                </button>
-              </>
-            )}
-          </div>
-        )}
-
-        {isLinkMode && (
-          <div className="absolute bottom-4 left-4 bg-green-600 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2">
-            <FiLink /> Режим создания связей: кликните на два узла для
-            соединения
-            {selectedNode && (
-              <span className="ml-2">Выбран: {selectedNode.name}</span>
-            )}
-          </div>
-        )}
-      </div>
-
-      <div className="mt-4 text-sm text-gray-500 flex justify-between items-center">
-        <div className="flex gap-6">
-          <div className="flex items-center gap-2">
-            <FiServer className="text-gray-400" />
-            <span>
-              Сервисы: {data.nodes.filter((n) => n.type === "service").length}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <FiCpu className="text-gray-400" />
-            <span>
-              Агенты: {data.nodes.filter((n) => n.type === "agent").length}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 bg-gray-500 rounded-sm"></div>
-            <span>Связи: {data.links.length}</span>
-          </div>
-        </div>
-        <div className="flex gap-2">
-          <button
-            onClick={() => {
-              setIsLinkMode(!isLinkMode);
-              setSelectedNode(null);
-            }}
-            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
-              isLinkMode
-                ? "bg-green-600 hover:bg-green-700 text-white"
-                : "bg-gray-800 hover:bg-gray-700 text-gray-300"
-            }`}
-          >
-            <FiLink />
-            <span className="text-sm">
-              {isLinkMode ? "Создание связи..." : "Добавить связь"}
-            </span>
-          </button>
-
-          <button
-            onClick={handleAddNode}
-            className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
-          >
-            <FiPlus />
-            <span className="text-sm">Узел</span>
-          </button>
-
-          <button
-            onClick={handleZoomIn}
-            className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
-          >
-            <FiZoomIn />
-          </button>
-
-          <button
-            onClick={handleZoomOut}
-            className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
-          >
-            <FiZoomOut />
-          </button>
-
-          <button
-            onClick={handleFit}
-            className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
-          >
-            <FiMove />
-          </button>
-
-          <button
-            onClick={handleExport}
-            className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
-          >
-            <FiDownload />
-            <span className="text-sm">Экспорт</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};