fix: 2

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

@@ -26,6 +26,8 @@ export const Routing = () => {
           <Route path="/" element={<HomePage />} />
           <Route path="/themes" element={<ThemesPage />} />
           <Route path="/add-agents" element={<AddAgentsPage />} />
+          <Route path="/themes" element={<ThemesPage />} />
+          <Route path="/add-agents" element={<AddAgentsPage />} />
         </Route>
 
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/pages/test2.page.tsx

@@ -0,0 +1,534 @@
+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>
+  );
+};

frontend/src/shared/layouts/DefaultLayout.tsx

@@ -5,9 +5,9 @@ import { Layout } from "@/app/providers/layout/layout";
 export const DefaultLayout = () => {
   const { token } = useAuthStore();
 
-  if (!token) {
+  // if (!token) {
-    return <Navigate to="/auth" replace />;
+  //   return <Navigate to="/auth" replace />;
-  }
+  // }
 
   return (
     <Layout>