From e7f1ea238688c1353cd3db032f21b6fffdf9aff8 Mon Sep 17 00:00:00 2001
From: nikita <nikitalomieiko@gmail.com>
Date: Sat, 4 Apr 2026 12:38:21 +0300
Subject: [PATCH] fix: graphs

---
 .../app/providers/layout/sidebar/sidebar.tsx  | 537 ++++++++++--------
 frontend/src/modules/graph/Graph.tsx          |  38 +-
 .../modules/graph/components/ForceGraph.tsx   | 295 +++++-----
 .../graph/components/GraphControls.tsx        | 116 ++--
 .../modules/graph/components/GraphStats.tsx   |  23 +
 .../src/modules/graph/components/index.ts     |   1 +
 6 files changed, 544 insertions(+), 466 deletions(-)
 create mode 100644 frontend/src/modules/graph/components/GraphStats.tsx

diff --git a/frontend/src/app/providers/layout/sidebar/sidebar.tsx b/frontend/src/app/providers/layout/sidebar/sidebar.tsx
index 5685785..894824c 100644
--- a/frontend/src/app/providers/layout/sidebar/sidebar.tsx
+++ b/frontend/src/app/providers/layout/sidebar/sidebar.tsx
@@ -10,10 +10,11 @@ import {
   FaChevronDown,
   FaProjectDiagram,
   FaTrash,
+  FaArrowLeft,
 } 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";
+import { Graph, type GraphData } from "@/modules/graph";
 
 interface SidebarProps {
   isOpen?: boolean;
@@ -24,13 +25,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
   isOpen = true,
   onToggle,
 }) => {
-  const navigate = useNavigate();
   const { agents, isLoading, error, fetchAgents, removeAgent } =
     useAgentStore();
   const { token } = useAuthStore();
   const [searchQuery, setSearchQuery] = useState("");
   const [copied, setCopied] = useState(false);
   const [showTokenModal, setShowTokenModal] = useState(false);
+  const [showGraphs, setShowGraphs] = useState(false);
   const [expandedAgents, setExpandedAgents] = useState<Set<string>>(
     new Set(agents.map((a) => a.name)),
   );
@@ -54,6 +55,40 @@ export const Sidebar: React.FC<SidebarProps> = ({
     );
   }, [agents, searchQuery]);
 
+  const graphData: GraphData = useMemo(() => {
+    const nodes = [];
+    const links = [];
+
+    agents.forEach((agent) => {
+      nodes.push({
+        id: agent.name,
+        name: agent.name,
+        type: "agent" as const,
+        val: 8,
+        description: `Агент: ${agent.name}`,
+      });
+
+      agent.services.forEach((service) => {
+        const serviceId = `${agent.name}-${service.name}`;
+        nodes.push({
+          id: serviceId,
+          name: service.name,
+          type: "service" as const,
+          val: 12,
+          description: `Сервис: ${service.name} (${service.status})`,
+        });
+
+        links.push({
+          source: agent.name,
+          target: serviceId,
+          type: "hosts",
+        });
+      });
+    });
+
+    return { nodes, links };
+  }, [agents]);
+
   const handleCopyToken = () => {
     if (token) {
       navigator.clipboard.writeText(token);
@@ -87,10 +122,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
       />
 
       <aside
-        className={`fixed md:relative w-72 h-screen z-50 transition-transform duration-300 ease-in-out flex flex-col ${
+        className={`fixed md:relative z-50 transition-all duration-300 ease-in-out flex flex-col ${
           isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
         }`}
         style={{
+          width: showGraphs ? "500px" : "288px",
+          height: "100vh",
           backgroundColor: "var(--card-bg)",
           borderRight: "1px solid var(--border)",
         }}
@@ -127,220 +164,237 @@ export const Sidebar: React.FC<SidebarProps> = ({
           </button>
         </div>
 
-        {/* Поиск */}
-        <div className="px-3 py-2">
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Поиск агентов..."
-            className="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-all"
-            style={{
-              backgroundColor: "var(--input-bg)",
-              borderColor: "var(--border)",
-              color: "var(--text-primary)",
-            }}
-            onFocus={(e) => {
-              e.currentTarget.style.borderColor = "var(--border-focus)";
-              e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
-            }}
-            onBlur={(e) => {
-              e.currentTarget.style.borderColor = "var(--border)";
-              e.currentTarget.style.boxShadow = "none";
-            }}
-          />
-        </div>
-
-        {/* Список агентов */}
-        <div className="flex-1 overflow-y-auto px-2 py-2">
-          {isLoading && agents.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12">
-              <FaSpinner
-                className="animate-spin mb-3"
-                style={{ color: "var(--accent)", fontSize: "20px" }}
+        {/* Контент — либо список агентов, либо графы */}
+        {showGraphs ? (
+          <div className="flex-1 overflow-hidden relative">
+            <Graph initialData={graphData} />
+          </div>
+        ) : (
+          <>
+            {/* Поиск */}
+            <div className="px-3 py-2">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Поиск агентов..."
+                className="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-all"
+                style={{
+                  backgroundColor: "var(--input-bg)",
+                  borderColor: "var(--border)",
+                  color: "var(--text-primary)",
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = "var(--border-focus)";
+                  e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = "var(--border)";
+                  e.currentTarget.style.boxShadow = "none";
+                }}
               />
-              <p className="text-xs" style={{ color: "var(--text-secondary)" }}>
-                Загрузка агентов...
-              </p>
             </div>
-          ) : error ? (
-            <div className="text-center py-8">
-              <div
-                className="text-xs mb-2"
-                style={{ color: "var(--error-text)" }}
-              >
-                {error}
-              </div>
-              <button
-                onClick={fetchAgents}
-                className="text-xs hover:underline"
-                style={{ color: "var(--accent)" }}
-              >
-                Попробовать снова
-              </button>
-            </div>
-          ) : filteredAgents.length === 0 ? (
-            <div
-              className="text-center py-8"
-              style={{ color: "var(--text-muted)" }}
-            >
-              <FaMicrochip className="mx-auto mb-2 opacity-50" size={16} />
-              <p className="text-xs">
-                {searchQuery ? "Ничего не найдено" : "Нет агентов"}
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-1">
-              {filteredAgents.map((agent) => {
-                const isExpanded = expandedAgents.has(agent.name);
-                return (
-                  <div
-                    key={agent.name}
-                    className="rounded-lg border overflow-hidden transition-all group"
-                    style={{
-                      backgroundColor: "var(--bg-secondary)",
-                      borderColor: "var(--border)",
-                    }}
+
+            {/* Список агентов */}
+            <div className="flex-1 overflow-y-auto px-2 py-2">
+              {isLoading && agents.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12">
+                  <FaSpinner
+                    className="animate-spin mb-3"
+                    style={{ color: "var(--accent)", fontSize: "20px" }}
+                  />
+                  <p
+                    className="text-xs"
+                    style={{ color: "var(--text-secondary)" }}
                   >
-                    {/* Agent header — кликабельный для сворачивания */}
-                    <div
-                      className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:opacity-80 transition-opacity"
-                      onClick={() => toggleAgent(agent.name)}
-                    >
-                      <span style={{ color: "var(--text-muted)" }}>
-                        {isExpanded ? (
-                          <FaChevronDown size={10} />
-                        ) : (
-                          <FaChevronRight size={10} />
-                        )}
-                      </span>
-                      <FaMicrochip
-                        size={12}
-                        style={{ color: "var(--accent)" }}
-                      />
-                      <span
-                        className="text-sm font-medium flex-1 truncate"
-                        style={{ color: "var(--text-primary)" }}
-                      >
-                        {agent.name}
-                      </span>
-                      {/* Статус-индикатор агента (сколько сервисов запущено) */}
-                      <div className="flex items-center gap-1">
-                        {agent.services.filter((s) => s.status === "running")
-                          .length > 0 && (
-                          <span
-                            className="w-2 h-2 rounded-full"
-                            style={{ backgroundColor: "#4ade80" }}
-                          />
-                        )}
-                        <span
-                          className="text-[10px]"
-                          style={{ color: "var(--text-muted)" }}
-                        >
-                          {
-                            agent.services.filter((s) => s.status === "running")
-                              .length
-                          }
-                          /{agent.services.length}
-                        </span>
-                      </div>
-                      {/* Кнопка удаления — появляется при наведении */}
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          if (
-                            window.confirm(`Удалить агента "${agent.name}"?`)
-                          ) {
-                            removeAgent(agent.name);
-                          }
-                        }}
-                        className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all flex-shrink-0"
-                        style={{
-                          color: "var(--text-muted)",
-                        }}
-                        onMouseEnter={(e) => {
-                          e.currentTarget.style.color = "#f87171";
-                          e.currentTarget.style.backgroundColor =
-                            "rgba(248, 113, 113, 0.15)";
-                        }}
-                        onMouseLeave={(e) => {
-                          e.currentTarget.style.color = "var(--text-muted)";
-                          e.currentTarget.style.backgroundColor = "transparent";
-                        }}
-                        title="Удалить агента"
-                      >
-                        <FaTrash size={10} />
-                      </button>
-                    </div>
-
-                    {/* Services list — сворачивается */}
-                    {isExpanded && (
-                      <div
-                        className="px-3 pb-2"
-                        style={{ paddingLeft: "24px" }}
-                      >
-                        <div
-                          className="border-l-2 pl-3 space-y-1"
-                          style={{ borderColor: "var(--border)" }}
-                        >
-                          {agent.services.map((service) => {
-                            const isRunning = service.status === "running";
-                            const isError = service.status === "error";
-                            const isStopped =
-                              service.status === "stopped" || !isRunning;
-
-                            return (
-                              <div
-                                key={service.name}
-                                className="flex items-center justify-between py-1"
-                              >
-                                <span
-                                  className="text-xs"
-                                  style={{ color: "var(--text-secondary)" }}
-                                >
-                                  {service.name}
-                                </span>
-                                {/* Status indicator */}
-                                <div className="flex items-center gap-1.5">
-                                  <span
-                                    className="w-1.5 h-1.5 rounded-full flex-shrink-0"
-                                    style={{
-                                      backgroundColor: isRunning
-                                        ? "#4ade80"
-                                        : isError
-                                          ? "#f87171"
-                                          : "#555",
-                                    }}
-                                  />
-                                  <span
-                                    className="text-[10px] font-medium"
-                                    style={{
-                                      color: isRunning
-                                        ? "#4ade80"
-                                        : isError
-                                          ? "#f87171"
-                                          : "#777",
-                                    }}
-                                  >
-                                    {isRunning
-                                      ? "run"
-                                      : isError
-                                        ? "err"
-                                        : "stop"}
-                                  </span>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
+                    Загрузка агентов...
+                  </p>
+                </div>
+              ) : error ? (
+                <div className="text-center py-8">
+                  <div
+                    className="text-xs mb-2"
+                    style={{ color: "var(--error-text)" }}
+                  >
+                    {error}
                   </div>
-                );
-              })}
+                  <button
+                    onClick={fetchAgents}
+                    className="text-xs hover:underline"
+                    style={{ color: "var(--accent)" }}
+                  >
+                    Попробовать снова
+                  </button>
+                </div>
+              ) : filteredAgents.length === 0 ? (
+                <div
+                  className="text-center py-8"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  <FaMicrochip className="mx-auto mb-2 opacity-50" size={16} />
+                  <p className="text-xs">
+                    {searchQuery ? "Ничего не найдено" : "Нет агентов"}
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {filteredAgents.map((agent) => {
+                    const isExpanded = expandedAgents.has(agent.name);
+                    return (
+                      <div
+                        key={agent.name}
+                        className="rounded-lg border overflow-hidden transition-all group"
+                        style={{
+                          backgroundColor: "var(--bg-secondary)",
+                          borderColor: "var(--border)",
+                        }}
+                      >
+                        {/* Agent header — кликабельный для сворачивания */}
+                        <div
+                          className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:opacity-80 transition-opacity"
+                          onClick={() => toggleAgent(agent.name)}
+                        >
+                          <span style={{ color: "var(--text-muted)" }}>
+                            {isExpanded ? (
+                              <FaChevronDown size={10} />
+                            ) : (
+                              <FaChevronRight size={10} />
+                            )}
+                          </span>
+                          <FaMicrochip
+                            size={12}
+                            style={{ color: "var(--accent)" }}
+                          />
+                          <span
+                            className="text-sm font-medium flex-1 truncate"
+                            style={{ color: "var(--text-primary)" }}
+                          >
+                            {agent.name}
+                          </span>
+                          {/* Статус-индикатор агента (сколько сервисов запущено) */}
+                          <div className="flex items-center gap-1">
+                            {agent.services.filter(
+                              (s) => s.status === "running",
+                            ).length > 0 && (
+                              <span
+                                className="w-2 h-2 rounded-full"
+                                style={{ backgroundColor: "#4ade80" }}
+                              />
+                            )}
+                            <span
+                              className="text-[10px]"
+                              style={{ color: "var(--text-muted)" }}
+                            >
+                              {
+                                agent.services.filter(
+                                  (s) => s.status === "running",
+                                ).length
+                              }
+                              /{agent.services.length}
+                            </span>
+                          </div>
+                          {/* Кнопка удаления — появляется при наведении */}
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (
+                                window.confirm(
+                                  `Удалить агента "${agent.name}"?`,
+                                )
+                              ) {
+                                removeAgent(agent.name);
+                              }
+                            }}
+                            className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all flex-shrink-0"
+                            style={{
+                              color: "var(--text-muted)",
+                            }}
+                            onMouseEnter={(e) => {
+                              e.currentTarget.style.color = "#f87171";
+                              e.currentTarget.style.backgroundColor =
+                                "rgba(248, 113, 113, 0.15)";
+                            }}
+                            onMouseLeave={(e) => {
+                              e.currentTarget.style.color = "var(--text-muted)";
+                              e.currentTarget.style.backgroundColor =
+                                "transparent";
+                            }}
+                            title="Удалить агента"
+                          >
+                            <FaTrash size={10} />
+                          </button>
+                        </div>
+
+                        {/* Services list — сворачивается */}
+                        {isExpanded && (
+                          <div
+                            className="px-3 pb-2"
+                            style={{ paddingLeft: "24px" }}
+                          >
+                            <div
+                              className="border-l-2 pl-3 space-y-1"
+                              style={{ borderColor: "var(--border)" }}
+                            >
+                              {agent.services.map((service) => {
+                                const isRunning = service.status === "running";
+                                const isError = service.status === "error";
+                                const isStopped =
+                                  service.status === "stopped" || !isRunning;
+
+                                return (
+                                  <div
+                                    key={service.name}
+                                    className="flex items-center justify-between py-1"
+                                  >
+                                    <span
+                                      className="text-xs"
+                                      style={{ color: "var(--text-secondary)" }}
+                                    >
+                                      {service.name}
+                                    </span>
+                                    {/* Status indicator */}
+                                    <div className="flex items-center gap-1.5">
+                                      <span
+                                        className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                                        style={{
+                                          backgroundColor: isRunning
+                                            ? "#4ade80"
+                                            : isError
+                                              ? "#f87171"
+                                              : "#555",
+                                        }}
+                                      />
+                                      <span
+                                        className="text-[10px] font-medium"
+                                        style={{
+                                          color: isRunning
+                                            ? "#4ade80"
+                                            : isError
+                                              ? "#f87171"
+                                              : "#777",
+                                        }}
+                                      >
+                                        {isRunning
+                                          ? "run"
+                                          : isError
+                                            ? "err"
+                                            : "stop"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
             </div>
-          )}
-        </div>
+          </>
+        )}
 
         {/* Footer с кнопками */}
         <div
@@ -350,25 +404,46 @@ export const Sidebar: React.FC<SidebarProps> = ({
             backgroundColor: "var(--card-bg)",
           }}
         >
-          {/* Кнопка Графы */}
-          <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)",
-              color: "var(--text-secondary)",
-              border: "1px solid var(--border)",
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "var(--border)";
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
-            }}
-          >
-            <FaProjectDiagram size={10} />
-            Графы
-          </button>
+          {showGraphs ? (
+            /* Кнопка назад к агентам */
+            <button
+              onClick={() => setShowGraphs(false)}
+              className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs rounded transition-colors"
+              style={{
+                backgroundColor: "var(--bg-secondary)",
+                color: "var(--text-secondary)",
+                border: "1px solid var(--border)",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--border)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
+              }}
+            >
+              <FaArrowLeft size={10} />К агентам
+            </button>
+          ) : (
+            /* Кнопка Графы */
+            <button
+              onClick={() => setShowGraphs(true)}
+              className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs rounded transition-colors"
+              style={{
+                backgroundColor: "var(--bg-secondary)",
+                color: "var(--text-secondary)",
+                border: "1px solid var(--border)",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--border)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
+              }}
+            >
+              <FaProjectDiagram size={10} />
+              Графы
+            </button>
+          )}
           <button
             onClick={() => setShowTokenModal(true)}
             className="flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors"
diff --git a/frontend/src/modules/graph/Graph.tsx b/frontend/src/modules/graph/Graph.tsx
index 6d31673..6de6e30 100644
--- a/frontend/src/modules/graph/Graph.tsx
+++ b/frontend/src/modules/graph/Graph.tsx
@@ -11,6 +11,7 @@ import {
   GraphControls,
   GraphContextMenu,
   GraphStatusBar,
+  GraphStats,
 } from "./components";
 
 interface GraphProps {
@@ -25,7 +26,6 @@ export const Graph: React.FC<GraphProps> = ({
   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);
@@ -38,25 +38,6 @@ export const Graph: React.FC<GraphProps> = ({
     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);
@@ -89,16 +70,14 @@ export const Graph: React.FC<GraphProps> = ({
   }
 
   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%",
-        }}
-      >
+    <div className="bg-gray-900 p-4 h-full flex flex-col">
+      {/* Статистика сверху */}
+      <GraphStats data={data} />
+
+      {/* Граф */}
+      <div className="flex-1 border border-gray-800 rounded-lg overflow-hidden relative mt-2">
         <ForceGraph
+          ref={fgRef}
           data={data}
           onNodeRightClick={handleNodeRightClick}
           onLinkRightClick={handleLinkRightClick}
@@ -113,6 +92,7 @@ export const Graph: React.FC<GraphProps> = ({
         <GraphStatusBar isLinkMode={isLinkMode} selectedNode={selectedNode} />
       </div>
 
+      {/* Кнопки снизу */}
       <GraphControls
         fgRef={fgRef}
         onExport={onExport}
diff --git a/frontend/src/modules/graph/components/ForceGraph.tsx b/frontend/src/modules/graph/components/ForceGraph.tsx
index aa3239f..d80960b 100644
--- a/frontend/src/modules/graph/components/ForceGraph.tsx
+++ b/frontend/src/modules/graph/components/ForceGraph.tsx
@@ -1,4 +1,10 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React, {
+  useRef,
+  useEffect,
+  useCallback,
+  useState,
+  forwardRef,
+} from "react";
 import ForceGraph2D from "react-force-graph-2d";
 import type { GraphData, GraphNode, GraphLink } from "../types";
 import { useGraphStore } from "../store/useGraphStore";
@@ -9,154 +15,175 @@ interface ForceGraphProps {
   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);
+export const ForceGraph = forwardRef<any, ForceGraphProps>(
+  ({ data, onNodeRightClick, onLinkRightClick }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState({ width: 480, height: 600 });
 
-  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 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);
-      }
-    }
-  }, []);
+    // ResizeObserver для корректного отслеживания размеров
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
 
-  const handleNodeHover = (node: GraphNode | null) => {
-    const newHighlightNodes = new Set<string>();
-    const newHighlightLinks = new Set<GraphLink>();
+      const updateDimensions = () => {
+        setDimensions({
+          width: container.clientWidth,
+          height: container.clientHeight,
+        });
+      };
 
-    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);
+      updateDimensions();
+
+      const observer = new ResizeObserver(updateDimensions);
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, []);
+
+    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);
         }
-      });
-    }
+      }
+    }, []);
 
-    useGraphStore.getState().setHighlight(newHighlightNodes, newHighlightLinks);
-  };
+    const handleNodeHover = (node: GraphNode | null) => {
+      const newHighlightNodes = new Set<string>();
+      const newHighlightLinks = new Set<GraphLink>();
 
-  const getNodeColor = (node: GraphNode) => {
-    if (highlightNodes.has(node.id)) return "#fbbf24";
-    if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
+      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);
+          }
+        });
+      }
 
-    switch (node.type) {
-      case "service":
-        return "#3b82f6";
-      case "agent":
-        return "#8b5cf6";
-      default:
-        return "#6b7280";
-    }
-  };
+      useGraphStore
+        .getState()
+        .setHighlight(newHighlightNodes, newHighlightLinks);
+    };
 
-  const getNodeSize = (node: GraphNode) => {
-    switch (node.type) {
-      case "service":
-        return 3;
-      case "agent":
-        return 3;
-      default:
-        return 5;
-    }
-  };
+    const getNodeColor = (node: GraphNode) => {
+      if (highlightNodes.has(node.id)) return "#fbbf24";
+      if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
 
-  const renderNode = (
-    node: GraphNode,
-    ctx: CanvasRenderingContext2D,
-    globalScale: number,
-  ) => {
-    const size = getNodeSize(node);
-    const color = getNodeColor(node);
+      switch (node.type) {
+        case "service":
+          return "#3b82f6";
+        case "agent":
+          return "#8b5cf6";
+        default:
+          return "#6b7280";
+      }
+    };
 
-    if (!node.x || !node.y) return;
+    const getNodeSize = (node: GraphNode) => {
+      switch (node.type) {
+        case "service":
+          return 3;
+        case "agent":
+          return 3;
+        default:
+          return 5;
+      }
+    };
 
-    ctx.beginPath();
-    ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
-    ctx.fillStyle = color;
-    ctx.fill();
+    const renderNode = (
+      node: GraphNode,
+      ctx: CanvasRenderingContext2D,
+      globalScale: number,
+    ) => {
+      const size = getNodeSize(node);
+      const color = getNodeColor(node);
 
-    ctx.fillStyle = "#ffffff";
-    ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
+      if (!node.x || !node.y) return;
 
-    if (node.type === "service") {
-      ctx.fillText("S", node.x, node.y);
-    } else if (node.type === "agent") {
-      ctx.fillText("A", node.x, node.y);
-    }
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+      ctx.fillStyle = color;
+      ctx.fill();
 
-    if (globalScale > 0.5) {
-      ctx.fillStyle = "#e5e7eb";
-      ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
+      ctx.fillStyle = "#ffffff";
+      ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
       ctx.textAlign = "center";
-      ctx.fillText(node.name, node.x, node.y + size + 8);
-    }
-  };
+      ctx.textBaseline = "middle";
 
-  // Fit zoom on engine stop
-  useEffect(() => {
-    if (fgRef.current) {
-      const timer = setTimeout(() => {
-        fgRef.current?.zoomToFit(400);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [data]);
+      if (node.type === "service") {
+        ctx.fillText("S", node.x, node.y);
+      } else if (node.type === "agent") {
+        ctx.fillText("A", node.x, node.y);
+      }
 
-  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>
-  );
-};
+      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 (ref && typeof ref === "object" && ref.current) {
+        const timer = setTimeout(() => {
+          ref.current?.zoomToFit(400);
+        }, 100);
+        return () => clearTimeout(timer);
+      }
+    }, [data, ref]);
+
+    return (
+      <div ref={containerRef} className="w-full h-full relative">
+        <ForceGraph2D
+          ref={ref}
+          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={onNodeRightClick}
+          onLinkRightClick={onLinkRightClick}
+          onNodeHover={handleNodeHover}
+          cooldownTicks={50}
+          cooldownTime={2000}
+          d3AlphaDecay={0.03}
+          d3VelocityDecay={0.4}
+          warmupTicks={50}
+        />
+      </div>
+    );
+  },
+);
+
+ForceGraph.displayName = "ForceGraph";
diff --git a/frontend/src/modules/graph/components/GraphControls.tsx b/frontend/src/modules/graph/components/GraphControls.tsx
index 5dd52cd..df0b732 100644
--- a/frontend/src/modules/graph/components/GraphControls.tsx
+++ b/frontend/src/modules/graph/components/GraphControls.tsx
@@ -68,82 +68,54 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
   };
 
   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 items-center justify-end gap-2 mt-2">
+      {/* Режим создания связи */}
+      <button
+        onClick={toggleLinkMode}
+        className={`flex w-full 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>
 
-      <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={handleZoomIn}
+        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+      >
+        <FiZoomIn />
+      </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={handleZoomOut}
+        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+      >
+        <FiZoomOut />
+      </button>
 
-        {/* Зум + */}
-        <button
-          onClick={handleZoomIn}
-          className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
-        >
-          <FiZoomIn />
-        </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={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>
+      {/* Экспорт */}
+      <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>
   );
 };
diff --git a/frontend/src/modules/graph/components/GraphStats.tsx b/frontend/src/modules/graph/components/GraphStats.tsx
new file mode 100644
index 0000000..f3ab918
--- /dev/null
+++ b/frontend/src/modules/graph/components/GraphStats.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { GraphData } from "../types";
+
+interface GraphStatsProps {
+  data: GraphData;
+}
+
+export const GraphStats: React.FC<GraphStatsProps> = ({ data }) => {
+  return (
+    <div className="flex gap-4 text-xs text-gray-400">
+      <span>
+        Сервисы: {data.nodes.filter((n) => n.type === "service").length}
+      </span>
+      <span>
+        Агенты: {data.nodes.filter((n) => n.type === "agent").length}
+      </span>
+      <div className="flex items-center gap-1.5">
+        <div className="w-2 h-2 bg-gray-500 rounded-sm"></div>
+        <span>Связи: {data.links.length}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/modules/graph/components/index.ts b/frontend/src/modules/graph/components/index.ts
index 7fd486a..076d0b7 100644
--- a/frontend/src/modules/graph/components/index.ts
+++ b/frontend/src/modules/graph/components/index.ts
@@ -2,3 +2,4 @@ export { ForceGraph } from "./ForceGraph";
 export { GraphControls } from "./GraphControls";
 export { GraphContextMenu } from "./GraphContextMenu";
 export { GraphStatusBar } from "./GraphStatusBar";
+export { GraphStats } from "./GraphStats";