super fix

frontend/.qwen/settings.json

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

frontend/src/app/App.tsx

@@ -1,11 +1,24 @@
+import { useState, useEffect } from "react";
 import "@/shared/styles/index.css";
 import "primereact/resources/themes/lara-light-cyan/theme.css";
 import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
 import { PrimeReactProvider } from "primereact/api";
 import { Routing } from "./providers/routing/routing";
+import { AppLoader } from "./components/AppLoader";
 
 function App() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 1800);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return <AppLoader />;
+  }
+
   return (
     <PrimeReactProvider>
       <Routing />

frontend/src/app/components/AppLoader.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useState } from "react";
+import { FaMicrochip, FaCode, FaNetworkWired, FaAtom } from "react-icons/fa";
+
+export const AppLoader = () => {
+  const [progress, setProgress] = useState(0);
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    const phases = [
+      { progress: 25, delay: 400 },
+      { progress: 50, delay: 300 },
+      { progress: 75, delay: 400 },
+      { progress: 100, delay: 300 },
+    ];
+
+    let timeouts: NodeJS.Timeout[] = [];
+    let currentDelay = 0;
+
+    phases.forEach((p, i) => {
+      currentDelay += p.delay;
+      timeouts.push(
+        setTimeout(() => {
+          setProgress(p.progress);
+          setPhase(i);
+        }, currentDelay),
+      );
+    });
+
+    return () => timeouts.forEach(clearTimeout);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "#0a0a0f",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999,
+        overflow: "hidden",
+      }}
+    >
+      {/* Background grid effect */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage: `
+            linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px)
+          `,
+          backgroundSize: "40px 40px",
+          animation: "gridMove 20s linear infinite",
+        }}
+      />
+
+      {/* Glowing orbs */}
+      <div
+        style={{
+          position: "absolute",
+          width: "300px",
+          height: "300px",
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%)",
+          filter: "blur(40px)",
+          animation: "orbFloat 6s ease-in-out infinite",
+          top: "20%",
+          left: "30%",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          width: "250px",
+          height: "250px",
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%)",
+          filter: "blur(40px)",
+          animation: "orbFloat 8s ease-in-out infinite reverse",
+          bottom: "20%",
+          right: "30%",
+        }}
+      />
+
+      {/* Main content */}
+      <div style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
+        {/* Logo with animation */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "16px",
+            marginBottom: "40px",
+          }}
+        >
+          <div
+            style={{
+              animation: "logoSpin 3s ease-in-out infinite",
+            }}
+          >
+            <FaAtom size={48} style={{ color: "#3b82f6" }} />
+          </div>
+          <h1
+            style={{
+              fontSize: "42px",
+              fontWeight: 800,
+              background:
+                "linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              letterSpacing: "4px",
+              animation: "titleGlow 2s ease-in-out infinite",
+            }}
+          >
+            HellreigN
+          </h1>
+        </div>
+
+        {/* Loading icons animation */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "24px",
+            marginBottom: "40px",
+          }}
+        >
+          {[
+            { icon: FaMicrochip, delay: "0s" },
+            { icon: FaNetworkWired, delay: "0.2s" },
+            { icon: FaCode, delay: "0.4s" },
+          ].map(({ icon: Icon, delay }, i) => (
+            <div
+              key={i}
+              style={{
+                width: "50px",
+                height: "50px",
+                borderRadius: "12px",
+                border: `2px solid ${
+                  phase >= i
+                    ? "rgba(59, 130, 246, 0.6)"
+                    : "rgba(255,255,255,0.1)"
+                }`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor:
+                  phase >= i ? "rgba(59, 130, 246, 0.1)" : "transparent",
+                animation: `iconPop 0.5s ease-out ${delay} both`,
+                transition: "all 0.3s ease",
+              }}
+            >
+              <Icon
+                size={22}
+                style={{
+                  color: phase >= i ? "#3b82f6" : "#555",
+                  transition: "color 0.3s ease",
+                }}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Progress bar */}
+        <div
+          style={{
+            width: "320px",
+            height: "4px",
+            backgroundColor: "rgba(255,255,255,0.1)",
+            borderRadius: "2px",
+            overflow: "hidden",
+            marginBottom: "16px",
+          }}
+        >
+          <div
+            style={{
+              height: "100%",
+              width: `${progress}%`,
+              background:
+                "linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%)",
+              borderRadius: "2px",
+              transition: "width 0.4s ease",
+              boxShadow: "0 0 20px rgba(59, 130, 246, 0.5)",
+            }}
+          />
+        </div>
+
+        {/* Status text */}
+        <div
+          style={{
+            fontSize: "13px",
+            color: "rgba(255,255,255,0.5)",
+            fontFamily: "monospace",
+            letterSpacing: "2px",
+          }}
+        >
+          {phase === 0 && "INITIALIZING CORE..."}
+          {phase === 1 && "LOADING AGENTS..."}
+          {phase === 2 && "ESTABLISHING CONNECTIONS..."}
+          {phase === 3 && "READY"}
+        </div>
+      </div>
+
+      {/* CSS Animations */}
+      <style>{`
+        @keyframes gridMove {
+          0% { transform: translate(0, 0); }
+          100% { transform: translate(40px, 40px); }
+        }
+
+        @keyframes orbFloat {
+          0%, 100% { transform: translate(0, 0) scale(1); }
+          50% { transform: translate(30px, -30px) scale(1.1); }
+        }
+
+        @keyframes logoSpin {
+          0%, 100% { transform: rotate(0deg) scale(1); }
+          25% { transform: rotate(-10deg) scale(1.05); }
+          75% { transform: rotate(10deg) scale(1.05); }
+        }
+
+        @keyframes titleGlow {
+          0%, 100% { filter: brightness(1); }
+          50% { filter: brightness(1.3); }
+        }
+
+        @keyframes iconPop {
+          0% { transform: scale(0.5) translateY(10px); opacity: 0; }
+          100% { transform: scale(1) translateY(0); opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+};

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

@@ -1,12 +1,44 @@
 import { useState, useEffect, type ReactNode } from "react";
 import { Sidebar } from "@/app/providers/layout/sidebar/sidebar";
-import { Navigation } from "@/app/providers/layout/navigation/navigation";
+import {
+  Navigation,
+  BottomNav,
+} from "@/app/providers/layout/navigation/navigation";
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 
 export const Layout = ({ children }: { children: ReactNode }) => {
-  const [isOpen, setOpen] = useState(true);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== "undefined" ? window.innerWidth < 856 : false,
+  );
+  const [isVerySmall, setIsVerySmall] = useState(() =>
+    typeof window !== "undefined" ? window.innerWidth < 600 : false,
+  );
   const { fetchAgents } = useAgentStore();
 
+  const sidebarOpen = isMobile ? mobileOpen : true;
+
+  useEffect(() => {
+    const handleResize = () => {
+      const mobile = window.innerWidth < 856;
+      setIsMobile(mobile);
+      if (!mobile) {
+        setMobileOpen(false);
+      }
+      setIsVerySmall(window.innerWidth < 600);
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const toggleSidebar = () => {
+    if (isMobile) {
+      setMobileOpen((prev) => !prev);
+    }
+  };
+
   useEffect(() => {
     fetchAgents();
   }, [fetchAgents]);
@@ -20,11 +52,23 @@ export const Layout = ({ children }: { children: ReactNode }) => {
   }, [fetchAgents]);
 
   return (
-    <div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--bg-primary)" }}>
+    <div
-      <Sidebar isOpen={isOpen} onToggle={() => setOpen(!isOpen)} />
+      className="flex h-screen overflow-hidden"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <Sidebar
+        isOpen={sidebarOpen}
+        onToggle={toggleSidebar}
+        isMobile={isMobile}
+      />
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-        <Navigation />
+        <Navigation
+          onToggleSidebar={toggleSidebar}
+          isMobile={isMobile}
+          isVerySmall={isVerySmall}
+        />
         <div className="flex-1 overflow-auto p-4">{children}</div>
+        {isVerySmall && <BottomNav />}
       </div>
     </div>
   );

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

@@ -1,138 +1,444 @@
+import { useState, useRef, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { FaBars, FaCode, FaChevronDown } from "react-icons/fa";
 import {
   FaHome,
   FaServer,
-  FaPalette,
   FaUser,
   FaUsers,
   FaRocket,
   FaKey,
   FaFileAlt,
+  FaPalette,
+  FaSignOutAlt,
+  FaShieldAlt,
 } from "react-icons/fa";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
+import { themes } from "@/modules/theme-changer/config/theme.config";
+import {
+  applyTheme,
+  getCurrentTheme,
+} from "@/modules/theme-changer/utils/apply.theme";
 
-export const Navigation = () => {
+interface NavigationProps {
+  onToggleSidebar?: () => void;
+  isMobile?: boolean;
+  isVerySmall?: boolean;
+}
+
+export const Navigation: React.FC<NavigationProps> = ({
+  onToggleSidebar,
+  isMobile,
+  isVerySmall = false,
+}) => {
   const navigate = useNavigate();
   const location = useLocation();
   const { user, logout } = useAuthStore();
+  const { setTheme } = useThemeStore();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [themePickerOpen, setThemePickerOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const currentTheme = getCurrentTheme();
 
   const navItems = [
-    { path: "/", label: "Главная", icon: FaHome },
+    { path: "/templates", label: "Шаблоны", icon: FaCode, requireView: true },
-    { path: "/add-agents", label: "Деплой", icon: FaRocket },
+    {
-    { path: "/registration", label: "Регистрация", icon: FaKey },
+      path: "/add-agents",
-    { path: "/logs", label: "Логи", icon: FaFileAlt },
+      label: "Деплой",
-    { path: "/admin", label: "Админка", icon: FaUsers, adminOnly: true },
+      icon: FaRocket,
-    { path: "/themes", label: "Темы", icon: FaPalette },
+      requireManageAgent: true,
+    },
+    {
+      path: "/registration",
+      label: "Регистрация",
+      icon: FaKey,
+      requireManageAgent: true,
+    },
+    { path: "/logs", label: "Логи", icon: FaFileAlt, requireView: true },
   ];
 
   const isActive = (path: string) => location.pathname === path;
 
+  // Filter nav items based on user permissions
+  const filteredNavItems = navItems.filter((item) => {
+    if (item.requireView && !user?.permission_view) return false;
+    if (item.requireManageAgent && !user?.permission_manage_agent) return false;
+    return true;
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setDropdownOpen(false);
+        setThemePickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleLogout = () => {
+    logout();
+    navigate("/auth");
+  };
+
+  const handleThemeChange = (themeId: string) => {
+    applyTheme(themeId);
+    setTheme(themeId as any);
+    setThemePickerOpen(false);
+  };
+
+  const renderNavItems = (showLabels: boolean, iconSize: number) => (
+    <div className="flex items-center gap-1 whitespace-nowrap">
+      {filteredNavItems.map((item) => {
+        const Icon = item.icon;
+        const active = isActive(item.path);
+        return (
+          <button
+            key={item.path}
+            onClick={() => navigate(item.path)}
+            className="flex items-center gap-1.5 px-3 py-2 rounded-lg font-medium transition-all flex-shrink-0"
+            style={{
+              backgroundColor: active ? "var(--accent)" : "transparent",
+              color: active ? "var(--accent-text)" : "var(--text-secondary)",
+            }}
+            onMouseEnter={(e) => {
+              if (!active) {
+                e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
+                e.currentTarget.style.color = "var(--text-primary)";
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!active) {
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.color = "var(--text-secondary)";
+              }
+            }}
+            title={item.label}
+          >
+            <Icon size={iconSize} />
+            {showLabels && <span className="text-xs">{item.label}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <>
+      {/* Верхний бар */}
+      <div
+        className="flex-shrink-0 border-b"
+        style={{
+          backgroundColor: "var(--card-bg)",
+          borderColor: "var(--border)",
+        }}
+      >
+        <div className="flex items-center justify-between px-4 py-2.5">
+          {/* Бургер — только на мобильных */}
+          {isMobile && (
+            <button
+              onClick={onToggleSidebar}
+              className="p-1.5 mr-2 rounded-lg transition-colors flex-shrink-0"
+              style={{
+                backgroundColor: "transparent",
+                color: "var(--text-secondary)",
+                border: "1px solid var(--border)",
+              }}
+              aria-label="Открыть sidebar"
+            >
+              <FaBars size={14} />
+            </button>
+          )}
+
+          {/* Название по центру — только на очень маленьких экранах */}
+          {isVerySmall && (
+            <div className="flex-1 text-center mx-4">
+              <span
+                className="text-sm font-bold"
+                style={{ color: "var(--text-primary)" }}
+              >
+                HellreigN
+              </span>
+            </div>
+          )}
+
+          {/* Навигация — только если НЕ очень маленький экран */}
+          {!isVerySmall && (
+            <div className="flex items-center flex-1 mx-4 overflow-x-auto scrollbar-hide">
+              {renderNavItems(true, 12)}
+            </div>
+          )}
+
+          {/* Профиль пользователя — дропдаун */}
+          <div className="relative" ref={dropdownRef}>
+            <button
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+              className="flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all"
+              style={{
+                backgroundColor: dropdownOpen
+                  ? "var(--bg-secondary)"
+                  : "transparent",
+                border: "1px solid var(--border)",
+              }}
+            >
+              <div
+                className="w-7 h-7 rounded-full flex items-center justify-center"
+                style={{ backgroundColor: "var(--accent)" }}
+              >
+                <FaUser size={11} style={{ color: "var(--accent-text)" }} />
+              </div>
+              <span
+                className="text-xs font-medium"
+                style={{ color: "var(--text-primary)" }}
+              >
+                {user?.name || user?.login || "Пользователь"}
+              </span>
+              <FaChevronDown
+                size={10}
+                style={{
+                  color: "var(--text-secondary)",
+                  transform: dropdownOpen ? "rotate(180deg)" : "rotate(0)",
+                  transition: "transform 0.2s",
+                }}
+              />
+            </button>
+
+            {dropdownOpen && (
+              <div
+                className="absolute right-0 top-full mt-2 rounded-lg shadow-xl border z-50"
+                style={{
+                  backgroundColor: "var(--card-bg)",
+                  borderColor: "var(--border)",
+                  minWidth: "220px",
+                }}
+              >
+                <div
+                  className="px-4 py-3 border-b"
+                  style={{ borderColor: "var(--border)" }}
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <div
+                      className="w-8 h-8 rounded-full flex items-center justify-center"
+                      style={{ backgroundColor: "var(--accent)" }}
+                    >
+                      <FaUser
+                        size={12}
+                        style={{ color: "var(--accent-text)" }}
+                      />
+                    </div>
+                    <div>
+                      <p
+                        className="text-sm font-semibold"
+                        style={{ color: "var(--text-primary)" }}
+                      >
+                        {user?.name || user?.login}
+                      </p>
+                      <p
+                        className="text-[10px]"
+                        style={{ color: "var(--text-muted)" }}
+                      >
+                        {user?.login}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="relative">
+                  <button
+                    onClick={() => setThemePickerOpen(!themePickerOpen)}
+                    className="w-full flex items-center gap-3 px-4 py-2.5 text-xs transition-colors"
+                    style={{ color: "var(--text-primary)" }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor =
+                        "var(--bg-secondary)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    }}
+                  >
+                    <FaPalette
+                      size={12}
+                      style={{ color: "var(--text-secondary)" }}
+                    />
+                    <span className="flex-1 text-left">
+                      Тема: {themes.find((t) => t.id === currentTheme)?.name}
+                    </span>
+                    <FaChevronDown
+                      size={9}
+                      style={{
+                        color: "var(--text-muted)",
+                        transform: themePickerOpen
+                          ? "rotate(180deg)"
+                          : "rotate(0)",
+                        transition: "transform 0.2s",
+                      }}
+                    />
+                  </button>
+
+                  {themePickerOpen && (
+                    <div
+                      className="absolute right-full top-0 mr-1 rounded-lg shadow-xl border z-50"
+                      style={{
+                        backgroundColor: "var(--card-bg)",
+                        borderColor: "var(--border)",
+                        minWidth: "180px",
+                      }}
+                    >
+                      {themes.map((t) => (
+                        <button
+                          key={t.id}
+                          onClick={() => handleThemeChange(t.id)}
+                          className="w-full flex items-center gap-3 px-4 py-2 text-xs transition-colors first:rounded-t-lg last:rounded-b-lg"
+                          style={{
+                            color:
+                              currentTheme === t.id
+                                ? "var(--accent)"
+                                : "var(--text-primary)",
+                            backgroundColor:
+                              currentTheme === t.id
+                                ? "var(--bg-secondary)"
+                                : "transparent",
+                          }}
+                          onMouseEnter={(e) => {
+                            if (currentTheme !== t.id) {
+                              e.currentTarget.style.backgroundColor =
+                                "var(--bg-secondary)";
+                            }
+                          }}
+                          onMouseLeave={(e) => {
+                            if (currentTheme !== t.id) {
+                              e.currentTarget.style.backgroundColor =
+                                "transparent";
+                            }
+                          }}
+                        >
+                          <div
+                            className="w-4 h-4 rounded-full border"
+                            style={{
+                              backgroundColor: t.colors.primary,
+                              borderColor: "var(--border)",
+                            }}
+                          />
+                          <span>{t.name}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {user?.permission_admin && (
+                  <button
+                    onClick={() => {
+                      setDropdownOpen(false);
+                      navigate("/admin");
+                    }}
+                    className="w-full flex items-center gap-3 px-4 py-2.5 text-xs transition-colors"
+                    style={{ color: "var(--text-primary)" }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor =
+                        "var(--bg-secondary)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    }}
+                  >
+                    <FaShieldAlt size={12} style={{ color: "#f59e0b" }} />
+                    <span>Админка</span>
+                  </button>
+                )}
+
+                <div
+                  className="my-1 border-b"
+                  style={{ borderColor: "var(--border)" }}
+                />
+
+                <button
+                  onClick={handleLogout}
+                  className="w-full flex items-center gap-3 px-4 py-2.5 text-xs transition-colors rounded-b-lg"
+                  style={{ color: "var(--error-text)" }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor =
+                      "rgba(239, 68, 68, 0.1)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  }}
+                >
+                  <FaSignOutAlt size={12} />
+                  <span>Выйти</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const BottomNav: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user } = useAuthStore();
+
+  const navItems = [
+    { path: "/templates", label: "Шаблоны", icon: FaCode, requireView: true },
+    {
+      path: "/add-agents",
+      label: "Деплой",
+      icon: FaRocket,
+      requireManageAgent: true,
+    },
+    {
+      path: "/registration",
+      label: "Регистрация",
+      icon: FaKey,
+      requireManageAgent: true,
+    },
+    { path: "/logs", label: "Логи", icon: FaFileAlt, requireView: true },
+  ];
+
+  const isActive = (path: string) => location.pathname === path;
+
+  // Filter nav items based on user permissions
+  const filteredNavItems = navItems.filter((item) => {
+    if (item.requireView && !user?.permission_view) return false;
+    if (item.requireManageAgent && !user?.permission_manage_agent) return false;
+    return true;
+  });
+
   return (
     <div
-      className="flex-shrink-0 border-b"
+      className="flex-shrink-0 border-t"
       style={{
         backgroundColor: "var(--card-bg)",
         borderColor: "var(--border)",
       }}
     >
-      <div className="flex items-center justify-between px-4 py-2.5">
+      <div className="flex items-center justify-around px-2 py-2">
-        {/* Логотип */}
+        {filteredNavItems.map((item) => {
-        <div
+          const Icon = item.icon;
-          className="flex items-center gap-2 cursor-pointer"
+          const active = isActive(item.path);
-          onClick={() => navigate("/")}
+          return (
-        >
+            <button
-          <FaServer style={{ color: "var(--accent)", fontSize: "18px" }} />
+              key={item.path}
-          <span
+              onClick={() => navigate(item.path)}
-            className="text-sm font-semibold"
+              className="flex items-center justify-center p-3 rounded-lg transition-all"
-            style={{ color: "var(--text-primary)" }}
+              style={{
-          >
+                backgroundColor: active ? "var(--accent)" : "transparent",
-            HellreigN
+                color: active ? "var(--accent-text)" : "var(--text-secondary)",
-          </span>
+              }}
-        </div>
+              title={item.label}
-
+            >
-        {/* Навигация */}
+              <Icon size={20} />
-        <div className="flex items-center gap-1">
+            </button>
-          {navItems
+          );
-            .filter((item) => {
+        })}
-              if (item.adminOnly && !user?.permission_admin) return false;
-              return true;
-            })
-            .map((item) => {
-              const Icon = item.icon;
-              const active = isActive(item.path);
-              return (
-                <button
-                  key={item.path}
-                  onClick={() => navigate(item.path)}
-                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
-                  style={{
-                    backgroundColor: active ? "var(--accent)" : "transparent",
-                    color: active
-                      ? "var(--accent-text)"
-                      : "var(--text-secondary)",
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!active) {
-                      e.currentTarget.style.backgroundColor =
-                        "var(--bg-secondary)";
-                      e.currentTarget.style.color = "var(--text-primary)";
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!active) {
-                      e.currentTarget.style.backgroundColor = "transparent";
-                      e.currentTarget.style.color = "var(--text-secondary)";
-                    }
-                  }}
-                >
-                  <Icon size={12} />
-                  <span>{item.label}</span>
-                </button>
-              );
-            })}
-        </div>
-
-        {/* Профиль пользователя */}
-        <div className="flex items-center gap-2">
-          {user && (
-            <div className="flex items-center gap-2">
-              <div
-                className="w-8 h-8 rounded-full flex items-center justify-center"
-                style={{ backgroundColor: "var(--bg-secondary)" }}
-              >
-                <FaUser size={12} style={{ color: "var(--accent)" }} />
-              </div>
-              <span
-                className="text-xs"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                {user.name}
-              </span>
-            </div>
-          )}
-          <button
-            onClick={() => {
-              logout();
-              navigate("/auth");
-            }}
-            className="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
-            style={{
-              backgroundColor: "var(--error-bg)",
-              color: "var(--error-text)",
-              border: "1px solid var(--error-border)",
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "var(--error-text)";
-              e.currentTarget.style.color = "#fff";
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = "var(--error-bg)";
-              e.currentTarget.style.color = "var(--error-text)";
-            }}
-          >
-            Выйти
-          </button>
-        </div>
       </div>
     </div>
   );

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

@@ -1,61 +1,222 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useRef, useEffect } from "react";
-import { FaBars, FaMicrochip, FaTimes, FaSpinner, FaCopy, FaCheck } from "react-icons/fa";
+import {
+  FaBars,
+  FaMicrochip,
+  FaTimes,
+  FaSpinner,
+  FaCopy,
+  FaCheck,
+  FaChevronRight,
+  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";
+import { agentApiService } from "@/modules/agent/api/agent.api.service";
+import { adminApi } from "@/modules/admin/api/admin.api";
 
 interface SidebarProps {
   isOpen?: boolean;
   onToggle?: () => void;
+  isMobile?: boolean;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ isOpen = true, onToggle }) => {
+export const Sidebar: React.FC<SidebarProps> = ({
-  const { agents, isLoading, error, fetchAgents } = useAgentStore();
+  isOpen = true,
+  onToggle,
+  isMobile = false,
+}) => {
+  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 [sidebarWidth, setSidebarWidth] = useState(288);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const [expandedAgents, setExpandedAgents] = useState<Set<string>>(
+    new Set(agents.map((a) => a.label)),
+  );
+
+  // Рассчитываем максимальную ширину при переключении на графы
+  useEffect(() => {
+    const updateWidth = () => {
+      const targetWidth = showGraphs ? 500 : 288;
+      const maxWidth = window.innerWidth - 200;
+      const finalWidth = Math.min(targetWidth, maxWidth);
+      setSidebarWidth(Math.max(finalWidth, 250));
+    };
+
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [showGraphs]);
+
+  // Token generation state
+  const [tokenLabel, setTokenLabel] = useState("");
+  const [generatedToken, setGeneratedToken] = useState<string | null>(null);
+  const [tokenGenerating, setTokenGenerating] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+
+  const toggleAgent = (label: string) => {
+    setExpandedAgents((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  };
 
   const filteredAgents = useMemo(() => {
     if (!searchQuery) return agents;
     const query = searchQuery.toLowerCase();
     return agents.filter(
       (agent) =>
-        agent.name.toLowerCase().includes(query) ||
+        agent.label.toLowerCase().includes(query) ||
-        agent.services.some((s) => s.name.toLowerCase().includes(query))
+        agent.services.some((s) => s.toLowerCase().includes(query)),
     );
   }, [agents, searchQuery]);
 
+  const [graphData, setGraphData] = useState<GraphData>({
+    nodes: [],
+    links: [],
+  });
+
+  useEffect(() => {
+    const fetchGraph = () => {
+      agentApiService
+        .getGraph()
+        .then((apiData) => {
+          const nodes: any[] = [];
+          const links: any[] = [];
+
+          // Build a map of service statuses from agents
+          const serviceStatusMap = new Map<string, "up" | "down">();
+          agents.forEach((agent) => {
+            const services = agent.services || [];
+            services.forEach((svc: string) => {
+              const parts = svc.split(":");
+              const svcName = parts[0];
+              const status = parts[1] === "down" ? "down" : "up";
+              serviceStatusMap.set(`${agent.label}-${svcName}`, status);
+            });
+          });
+
+          Object.entries(apiData.nodes || {}).forEach(
+            ([agentLabel, agentNode]: [string, any]) => {
+              nodes.push({
+                id: agentLabel,
+                name: agentLabel,
+                type: "agent" as const,
+                val: 8,
+                description: `Агент: ${agentLabel}`,
+              });
+
+              const services = agentNode?.services || {};
+              Object.entries(services).forEach(
+                ([serviceName, serviceNode]: [string, any]) => {
+                  const serviceId = `${agentLabel}-${serviceName}`;
+                  const status = serviceStatusMap.get(serviceId) || "up";
+
+                  nodes.push({
+                    id: serviceId,
+                    name: serviceName,
+                    type: "service" as const,
+                    val: 12,
+                    description: `Сервис: ${serviceName}`,
+                    status,
+                  });
+
+                  links.push({
+                    source: agentLabel,
+                    target: serviceId,
+                    type: "hosts",
+                  });
+
+                  const dependencies = serviceNode?.dependencies || [];
+                  dependencies.forEach((dep: any) => {
+                    const targetName = dep?.target?.name;
+                    if (targetName) {
+                      links.push({
+                        source: serviceId,
+                        target: `${agentLabel}-${targetName}`,
+                        type: dep.condition || "dependency",
+                      });
+                    }
+                  });
+                },
+              );
+            },
+          );
+
+          setGraphData({ nodes, links });
+        })
+        .catch((e) => {
+          console.error("Failed to fetch graph:", e);
+        });
+    };
+
+    fetchGraph();
+    const interval = setInterval(fetchGraph, 30000);
+    return () => clearInterval(interval);
+  }, [agents]);
+
   const handleCopyToken = () => {
-    if (token) {
+    const tokenToCopy = generatedToken || token;
-      navigator.clipboard.writeText(token);
+    if (tokenToCopy) {
+      navigator.clipboard.writeText(tokenToCopy);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }
   };
 
+  const handleGenerateToken = async () => {
+    if (!tokenLabel.trim()) return;
+    setTokenGenerating(true);
+    setTokenError(null);
+    try {
+      const newToken = await adminApi.generateToken(tokenLabel.trim());
+      setGeneratedToken(newToken);
+    } catch (e) {
+      setTokenError(
+        e instanceof Error ? e.message : "Failed to generate token",
+      );
+    } finally {
+      setTokenGenerating(false);
+    }
+  };
+
+  const handleCloseTokenModal = () => {
+    setShowTokenModal(false);
+    setTokenLabel("");
+    setGeneratedToken(null);
+    setTokenError(null);
+    setCopied(false);
+  };
+
   if (!isOpen) {
-    return (
+    return null;
-      <button
-        onClick={onToggle}
-        className="fixed top-4 left-4 z-50 p-2.5 rounded-lg shadow-lg transition-colors md:hidden"
-        style={{ backgroundColor: "var(--accent)", color: "var(--accent-text)" }}
-        aria-label="Открыть sidebar"
-      >
-        <FaBars size={18} />
-      </button>
-    );
   }
 
   return (
     <>
-      {/* Overlay для мобильных */}
+      {/* Overlay — только на мобильных (< 856px) */}
-      <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={onToggle} />
+      {isMobile && (
+        <div className="fixed inset-0 bg-black/50 z-40" onClick={onToggle} />
+      )}
 
       <aside
-        className={`fixed md:relative w-72 h-screen z-50 transition-transform duration-300 ease-in-out flex flex-col ${
+        ref={sidebarRef}
-          isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+        className={`${isMobile ? "fixed" : "relative"} z-50 transition-all duration-300 ease-in-out flex flex-col`}
-        }`}
         style={{
+          width: `${sidebarWidth}px`,
+          height: "100vh",
           backgroundColor: "var(--card-bg)",
           borderRight: "1px solid var(--border)",
         }}
@@ -67,141 +228,304 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen = true, onToggle }) =>
         >
           <div className="flex items-center gap-2">
             <FaMicrochip style={{ color: "var(--accent)", fontSize: "18px" }} />
-            <h2 className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
+            <h2
+              className="text-sm font-semibold"
+              style={{ color: "var(--text-primary)" }}
+            >
               Агенты
             </h2>
             <span
               className="text-xs px-1.5 py-0.5 rounded"
-              style={{ backgroundColor: "var(--bg-secondary)", color: "var(--text-secondary)" }}
+              style={{
+                backgroundColor: "var(--bg-secondary)",
+                color: "var(--text-secondary)",
+              }}
             >
               {agents.length}
             </span>
           </div>
           <button
             onClick={onToggle}
-            className="p-1 rounded transition-colors md:hidden"
+            className={`p-1 rounded transition-colors ${isMobile ? "" : "hidden"}`}
             style={{ color: "var(--text-secondary)" }}
+            aria-label="Закрыть sidebar"
           >
             <FaTimes size={14} />
           </button>
         </div>
 
-        {/* Поиск */}
+        {/* Контент — либо список агентов, либо графы */}
-        <div className="px-3 py-2">
+        {showGraphs ? (
-          <input
+          <div className="flex-1 overflow-hidden relative">
-            type="text"
+            <Graph initialData={graphData} />
-            value={searchQuery}
+          </div>
-            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={{
+            <div className="px-3 py-2">
-              backgroundColor: "var(--input-bg)",
+              <input
-              borderColor: "var(--border)",
+                type="text"
-              color: "var(--text-primary)",
+                value={searchQuery}
-            }}
+                onChange={(e) => setSearchQuery(e.target.value)}
-            onFocus={(e) => {
+                placeholder="Поиск агентов..."
-              e.currentTarget.style.borderColor = "var(--border-focus)";
+                className="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-all"
-              e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
+                style={{
-            }}
+                  backgroundColor: "var(--input-bg)",
-            onBlur={(e) => {
+                  borderColor: "var(--border)",
-              e.currentTarget.style.borderColor = "var(--border)";
+                  color: "var(--text-primary)",
-              e.currentTarget.style.boxShadow = "none";
+                }}
-            }}
+                onFocus={(e) => {
-          />
+                  e.currentTarget.style.borderColor = "var(--border-focus)";
-        </div>
+                  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">
+            <div className="flex-1 overflow-y-auto px-2 py-2">
-          {isLoading && agents.length === 0 ? (
+              {isLoading && agents.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12">
+                <div className="flex flex-col items-center justify-center py-12">
-              <FaSpinner className="animate-spin mb-3" style={{ color: "var(--accent)", fontSize: "20px" }} />
+                  <FaSpinner
-              <p className="text-xs" style={{ color: "var(--text-secondary)" }}>
+                    className="animate-spin mb-3"
-                Загрузка агентов...
+                    style={{ color: "var(--accent)", fontSize: "20px" }}
-              </p>
+                  />
-            </div>
+                  <p
-          ) : error ? (
+                    className="text-xs"
-            <div className="text-center py-8">
+                    style={{ color: "var(--text-secondary)" }}
-              <div className="text-xs mb-2" style={{ color: "var(--error-text)" }}>
+                  >
-                {error}
+                    Загрузка агентов...
-              </div>
+                  </p>
-              <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) => (
-                <div
-                  key={agent.name}
-                  className="rounded-lg border p-3 transition-all hover:shadow-md"
-                  style={{
-                    backgroundColor: "var(--bg-secondary)",
-                    borderColor: "var(--border)",
-                  }}
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
-                      {agent.name}
-                    </span>
-                  </div>
-                  <div className="space-y-1">
-                    {agent.services.map((service) => (
-                      <div
-                        key={service.name}
-                        className="flex items-center justify-between text-xs"
-                      >
-                        <span style={{ color: "var(--text-secondary)" }}>{service.name}</span>
-                        <span
-                          className="px-1.5 py-0.5 rounded text-[10px] font-medium"
-                          style={{
-                            backgroundColor:
-                              service.status === "running"
-                                ? "var(--success-bg)"
-                                : service.status === "error"
-                                ? "var(--error-bg)"
-                                : "var(--bg-secondary)",
-                            color:
-                              service.status === "running"
-                                ? "var(--success-text)"
-                                : service.status === "error"
-                                ? "var(--error-text)"
-                                : "var(--text-muted)",
-                            border: `1px solid ${
-                              service.status === "running"
-                                ? "var(--success-border)"
-                                : service.status === "error"
-                                ? "var(--error-border)"
-                                : "var(--border)"
-                            }`,
-                          }}
-                        >
-                          {service.status}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
                 </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.label);
+                    return (
+                      <div
+                        key={agent.label}
+                        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.label)}
+                        >
+                          <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 cursor-pointer"
+                            style={{ color: "var(--text-primary)" }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              navigate(`/dashboard/${agent.label}`);
+                            }}
+                            title="Открыть дашборд агента"
+                          >
+                            {agent.label}
+                          </span>
+                          {/* Статус-индикатор агента (количество сервисов) */}
+                          <div className="flex items-center gap-1">
+                            {agent.services.length > 0 && (
+                              <span
+                                className="w-2 h-2 rounded-full"
+                                style={{ backgroundColor: "#4ade80" }}
+                              />
+                            )}
+                            <span
+                              className="text-[10px]"
+                              style={{ color: "var(--text-muted)" }}
+                            >
+                              {agent.services.length}
+                            </span>
+                          </div>
+                          {/* Кнопка удаления — появляется при наведении */}
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (
+                                window.confirm(
+                                  `Удалить агента "${agent.label}"?`,
+                                )
+                              ) {
+                                removeAgent(agent.label);
+                              }
+                            }}
+                            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) => {
+                                // Parse "serviceName:up" or "serviceName:down"
+                                const parts = service.split(":");
+                                const serviceName = parts[0];
+                                const isDown = parts[1] === "down";
+
+                                return (
+                                  <div
+                                    key={service}
+                                    className="flex items-center justify-between py-1"
+                                  >
+                                    <span
+                                      className="text-xs"
+                                      style={{
+                                        color: isDown
+                                          ? "#ef4444"
+                                          : "var(--text-secondary)",
+                                      }}
+                                    >
+                                      {serviceName}
+                                    </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: isDown
+                                            ? "#ef4444"
+                                            : "#4ade80",
+                                        }}
+                                      />
+                                      <span
+                                        className="text-[10px] font-medium"
+                                        style={{
+                                          color: isDown ? "#ef4444" : "#4ade80",
+                                        }}
+                                      >
+                                        {isDown ? "down" : "run"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
             </div>
-          )}
+          </>
-        </div>
+        )}
 
         {/* Footer с кнопками */}
         <div
           className="p-2 border-t flex gap-2"
-          style={{ borderColor: "var(--border)", backgroundColor: "var(--card-bg)" }}
+          style={{
+            borderColor: "var(--border)",
+            backgroundColor: "var(--card-bg)",
+          }}
         >
+          {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"
@@ -221,11 +545,14 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen = true, onToggle }) =>
         <div
           className="fixed inset-0 z-[60] flex items-center justify-center p-4"
           style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-          onClick={() => setShowTokenModal(false)}
+          onClick={handleCloseTokenModal}
         >
           <div
             className="w-full max-w-md rounded-xl shadow-2xl border"
-            style={{ backgroundColor: "var(--card-bg)", borderColor: "var(--border)" }}
+            style={{
+              backgroundColor: "var(--card-bg)",
+              borderColor: "var(--border)",
+            }}
             onClick={(e) => e.stopPropagation()}
           >
             <div
@@ -234,12 +561,15 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen = true, onToggle }) =>
             >
               <div className="flex items-center gap-2">
                 <FaCopy style={{ color: "var(--accent)" }} size={14} />
-                <h2 className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
+                <h2
-                  Ваш токен доступа
+                  className="text-sm font-semibold"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  Генерация токена
                 </h2>
               </div>
               <button
-                onClick={() => setShowTokenModal(false)}
+                onClick={handleCloseTokenModal}
                 className="p-1 rounded transition-colors"
                 style={{ color: "var(--text-secondary)" }}
               >
@@ -248,43 +578,136 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen = true, onToggle }) =>
             </div>
 
             <div className="p-4 space-y-3">
-              <div>
+              {/* Error */}
-                <label className="block text-xs font-medium mb-2" style={{ color: "var(--text-secondary)" }}>
+              {tokenError && (
-                  Токен
-                </label>
                 <div
-                  className="flex items-center gap-2 rounded-lg p-3 border"
+                  className="text-xs p-2 rounded"
-                  style={{ backgroundColor: "var(--bg-secondary)", borderColor: "var(--border)" }}
+                  style={{
+                    backgroundColor: "rgba(239,68,68,0.1)",
+                    border: "1px solid rgba(239,68,68,0.3)",
+                    color: "var(--error-text, #ef4444)",
+                  }}
                 >
-                  <code
+                  {tokenError}
-                    className="flex-1 text-xs font-mono break-all"
+                </div>
-                    style={{ color: "var(--text-primary)" }}
+              )}
+
+              {/* Label input */}
+              {!generatedToken && (
+                <div>
+                  <label
+                    className="block text-xs font-medium mb-2"
+                    style={{ color: "var(--text-secondary)" }}
                   >
-                    {token || "Токен не найден"}
+                    Имя токена
-                  </code>
+                  </label>
-                  {token && (
+                  <input
+                    type="text"
+                    value={tokenLabel}
+                    onChange={(e) => setTokenLabel(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && tokenLabel.trim()) {
+                        handleGenerateToken();
+                      }
+                    }}
+                    placeholder="Введите имя..."
+                    autoFocus
+                    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)",
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* Generated token */}
+              {generatedToken && (
+                <div>
+                  <label
+                    className="block text-xs font-medium mb-2"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    Токен
+                  </label>
+                  <div
+                    className="flex items-center gap-2 rounded-lg p-3 border"
+                    style={{
+                      backgroundColor: "var(--bg-secondary)",
+                      borderColor: "var(--border)",
+                    }}
+                  >
+                    <code
+                      className="flex-1 text-xs font-mono break-all"
+                      style={{ color: "var(--text-primary)" }}
+                    >
+                      {generatedToken}
+                    </code>
                     <button
                       onClick={handleCopyToken}
                       className="p-1.5 rounded transition-colors"
                       style={{ color: "var(--text-secondary)" }}
                     >
                       {copied ? (
-                        <FaCheck size={12} style={{ color: "var(--success-text)" }} />
+                        <FaCheck
+                          size={12}
+                          style={{ color: "var(--success-text)" }}
+                        />
                       ) : (
                         <FaCopy size={12} />
                       )}
                     </button>
-                  )}
+                  </div>
                 </div>
-              </div>
+              )}
 
-              <button
+              {/* Buttons */}
-                onClick={() => setShowTokenModal(false)}
+              <div className="flex gap-2">
-                className="w-full py-2 rounded-lg text-xs font-medium transition-colors"
+                {generatedToken && (
-                style={{ backgroundColor: "var(--accent)", color: "var(--accent-text)" }}
+                  <button
-              >
+                    onClick={() => {
-                Закрыть
+                      setGeneratedToken(null);
-              </button>
+                      setTokenLabel("");
+                    }}
+                    className="flex-1 py-2 rounded-lg text-xs font-medium transition-colors"
+                    style={{
+                      backgroundColor: "var(--bg-secondary)",
+                      color: "var(--text-primary)",
+                      border: "1px solid var(--border)",
+                    }}
+                  >
+                    Новый токен
+                  </button>
+                )}
+                <button
+                  onClick={
+                    generatedToken ? handleCloseTokenModal : handleGenerateToken
+                  }
+                  disabled={tokenGenerating || !tokenLabel.trim()}
+                  className="flex-1 py-2 rounded-lg text-xs font-medium transition-colors"
+                  style={{
+                    backgroundColor:
+                      tokenGenerating || (!generatedToken && !tokenLabel.trim())
+                        ? "var(--bg-secondary)"
+                        : "var(--accent)",
+                    color:
+                      tokenGenerating || (!generatedToken && !tokenLabel.trim())
+                        ? "var(--text-muted)"
+                        : "var(--accent-text)",
+                    cursor:
+                      tokenGenerating || (!generatedToken && !tokenLabel.trim())
+                        ? "default"
+                        : "pointer",
+                  }}
+                >
+                  {tokenGenerating
+                    ? "Генерация..."
+                    : generatedToken
+                      ? "Готово"
+                      : "Создать"}
+                </button>
+              </div>
             </div>
           </div>
         </div>

frontend/src/app/providers/layout/store/agent.store.ts

@@ -22,13 +22,14 @@ export const useAgentStore = create<AgentState>()((set, get) => ({
       set({ agents, isLoading: false });
     } catch (error) {
       set({
-        error: error instanceof Error ? error.message : "Failed to fetch agents",
+        error:
+          error instanceof Error ? error.message : "Failed to fetch agents",
         isLoading: false,
       });
     }
   },
 
   removeAgent: (name: string) => {
-    set({ agents: get().agents.filter((a) => a.name !== name) });
+    set({ agents: get().agents.filter((a) => a.label !== name) });
   },
 }));

frontend/src/app/providers/layout/store/metrics.store.ts

@@ -0,0 +1,50 @@
+import { create } from "zustand";
+import { agentApiService } from "@/modules/agent/api/agent.api.service";
+import type { SystemMetrics } from "@/modules/agent/types/agent.types";
+
+interface MetricsState {
+  metrics: SystemMetrics[];
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number | null;
+}
+
+const POLLING_INTERVAL = 30_000;
+
+let _pollingTimer: ReturnType<typeof setInterval> | null = null;
+
+export const useMetricsStore = create<MetricsState>(() => ({
+  metrics: [],
+  isLoading: false,
+  error: null,
+  lastUpdated: null,
+}));
+
+export const startMetricsPolling = async () => {
+  if (_pollingTimer) return;
+  const fetchMetrics = async () => {
+    try {
+      const data = await agentApiService.getSystemMetrics();
+      useMetricsStore.setState({
+        metrics: data,
+        isLoading: false,
+        error: null,
+        lastUpdated: Date.now(),
+      });
+    } catch (e) {
+      useMetricsStore.setState({
+        error: e instanceof Error ? e.message : "Failed to fetch metrics",
+        isLoading: false,
+      });
+    }
+  };
+  await fetchMetrics();
+  _pollingTimer = setInterval(fetchMetrics, POLLING_INTERVAL);
+};
+
+export const stopMetricsPolling = () => {
+  if (_pollingTimer) {
+    clearInterval(_pollingTimer);
+    _pollingTimer = null;
+  }
+};

frontend/src/app/providers/routing/helper/protected.route.tsx

@@ -1,12 +1,42 @@
-import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 import { Navigate } from "react-router-dom";
+import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
-export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+interface ProtectedRouteProps {
-  const { isAuthenticated } = useAuthStore();
+  children: React.ReactNode;
+  requireView?: boolean;
+  requireManageAgent?: boolean;
+  requireAdmin?: boolean;
+  fallbackPath?: string;
+}
 
-  // if (!isAuthenticated) {
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
-  //   return <Navigate to="/auth" replace />;
+  children,
-  // }
+  requireView = false,
+  requireManageAgent = false,
+  requireAdmin = false,
+  fallbackPath = "/",
+}) => {
+  const { user, isAuthenticated } = useAuthStore();
+
+  if (!isAuthenticated && user?.token) {
+    // User is authenticated based on token
+  }
+
+  if (!user) {
+    return <Navigate to="/auth" replace />;
+  }
+
+  if (requireView && !user.permission_view) {
+    return <Navigate to={fallbackPath} replace />;
+  }
+
+  if (requireManageAgent && !user.permission_manage_agent) {
+    return <Navigate to={fallbackPath} replace />;
+  }
+
+  if (requireAdmin && !user.permission_admin) {
+    return <Navigate to={fallbackPath} replace />;
+  }
 
   return <>{children}</>;
 };

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

@@ -1,17 +1,21 @@
 import { Suspense } from "react";
 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";
 import { AddAgentsPage } from "@/pages/add-agents.page";
 import { IDEPage } from "@/pages/ide.page";
+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";
+import { DashboardPage } from "@/pages/dashboard.page";
+import { AgentDashboardPage } from "@/pages/agent-dashboard.page";
+import { ProtectedRoute } from "./helper/protected.route";
 
 export const mockGraphData: GraphData = {
   nodes: [
@@ -119,18 +123,88 @@ export const Routing = () => {
         <Route path="/register" element={<RegisterPage />} />
 
         <Route element={<DefaultLayout />}>
-          <Route path="/" element={<HomePage />} />
+          {/* Routes requiring 'view' permission */}
-          <Route path="/themes" element={<ThemesPage />} />
+          <Route
-          <Route path="/add-agents" element={<AddAgentsPage />} />
+            path="/"
-          <Route path="/registration" element={<RegistrationTokenPage />} />
+            element={
-          <Route path="/logs" element={<LogsPage />} />
+              <ProtectedRoute requireView>
-          <Route path="/admin" element={<AdminPage />} />
+                <TemplatesPage />
-          <Route path="/IDE" element={<IDEPage />} />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/logs"
+            element={
+              <ProtectedRoute requireView>
+                <LogsPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/graphs"
+            element={
+              <ProtectedRoute requireView>
+                <GraphsPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/dashboard/:agentLabel"
+            element={
+              <ProtectedRoute requireView>
+                <AgentDashboardPage />
+              </ProtectedRoute>
+            }
+          />
+
+          {/* Routes requiring 'manage_agent' permission */}
+          <Route
+            path="/add-agents"
+            element={
+              <ProtectedRoute requireManageAgent>
+                <AddAgentsPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/registration"
+            element={
+              <ProtectedRoute requireManageAgent>
+                <RegistrationTokenPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/templates"
+            element={
+              <ProtectedRoute requireView>
+                <TemplatesPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/IDE"
+            element={
+              <ProtectedRoute requireView>
+                <IDEPage />
+              </ProtectedRoute>
+            }
+          />
+
+          {/* Admin route requiring 'admin' permission */}
+          <Route
+            path="/admin"
+            element={
+              <ProtectedRoute requireAdmin>
+                <AdminPage />
+              </ProtectedRoute>
+            }
+          />
         </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/admin/AdminPanel.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import {
+  FaUsers,
+  FaShieldAlt,
+  FaSpinner,
+  FaExclamationCircle,
+  FaPlus,
+} from "react-icons/fa";
+import { useAdminStore } from "./store/useAdminStore";
+import { UserCard } from "./components/UserCard";
+import { CreateUserModal } from "./components/CreateUserModal";
+
+export const AdminPanel: React.FC = () => {
+  const users = useAdminStore((s) => s.users);
+  const loading = useAdminStore((s) => s.loading);
+  const error = useAdminStore((s) => s.error);
+  const fetchUsers = useAdminStore((s) => s.fetchUsers);
+
+  const [showCreateModal, setShowCreateModal] = useState(false);
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const activeCount = users.filter((u) => u.is_active).length;
+
+  return (
+    <div style={{ padding: "24px", maxWidth: "900px", margin: "0 auto" }}>
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "24px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+          <div
+            style={{
+              width: "40px",
+              height: "40px",
+              borderRadius: "8px",
+              backgroundColor: "var(--accent)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FaShieldAlt size={18} style={{ color: "var(--accent-text)" }} />
+          </div>
+          <div>
+            <h1
+              style={{
+                fontSize: "18px",
+                fontWeight: 600,
+                color: "var(--text-primary)",
+                margin: 0,
+              }}
+            >
+              Управление пользователями
+            </h1>
+            <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
+              {loading
+                ? "Загрузка..."
+                : `${activeCount} / ${users.length} активных`}
+            </span>
+          </div>
+        </div>
+
+        <button
+          onClick={() => setShowCreateModal(true)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "8px 16px",
+            backgroundColor: "var(--accent)",
+            color: "var(--accent-text)",
+            border: "none",
+            borderRadius: "6px",
+            cursor: "pointer",
+            fontSize: "13px",
+            fontWeight: 500,
+          }}
+        >
+          <FaPlus size={12} />
+          Добавить
+        </button>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px",
+            backgroundColor: "rgba(239,68,68,0.1)",
+            border: "1px solid rgba(239,68,68,0.3)",
+            borderRadius: "8px",
+            color: "var(--error-text, #ef4444)",
+            marginBottom: "16px",
+          }}
+        >
+          <FaExclamationCircle />
+          <span style={{ fontSize: "13px" }}>{error}</span>
+        </div>
+      )}
+
+      {/* Loading */}
+      {loading && users.length === 0 && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            padding: "60px 0",
+          }}
+        >
+          <FaSpinner
+            className="animate-spin"
+            size={24}
+            style={{ color: "var(--accent)" }}
+          />
+        </div>
+      )}
+
+      {/* Users list */}
+      {!loading && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+          }}
+        >
+          {users.map((user) => (
+            <UserCard key={user.id} user={user} />
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && users.length === 0 && (
+        <div
+          style={{
+            textAlign: "center",
+            padding: "40px 0",
+            color: "var(--text-muted)",
+          }}
+        >
+          <p style={{ fontSize: "14px" }}>
+            Нет зарегистрированных пользователей
+          </p>
+        </div>
+      )}
+
+      {/* Create user modal */}
+      <CreateUserModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+      />
+    </div>
+  );
+};

frontend/src/modules/admin/api/admin.api.ts

@@ -0,0 +1,97 @@
+import { apiClient } from "@/shared/api/axios.instance";
+
+const getAuthHeader = () => {
+  const raw = localStorage.getItem("auth-storage");
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed?.state?.token) return `bearer ${parsed.state.token}`;
+    } catch {}
+  }
+  return "";
+};
+
+export interface AdminUserDto {
+  id: number;
+  login: string;
+  name: string;
+  last_name: string;
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+  token: string;
+}
+
+export interface CreateUserPayload {
+  login: string;
+  name: string;
+  last_name: string;
+  password: string;
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+}
+
+export interface PermissionsPayload {
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+}
+
+export const adminApi = {
+  getUsers: async (): Promise<AdminUserDto[]> => {
+    const res = await apiClient.get<AdminUserDto[]>("/auth/tokens", {
+      headers: { Authorization: getAuthHeader() },
+    });
+    return res.data;
+  },
+
+  createUser: async (payload: CreateUserPayload): Promise<void> => {
+    await apiClient.post("/auth/token", payload, {
+      headers: { Authorization: getAuthHeader() },
+    });
+  },
+
+  deleteUser: async (login: string): Promise<void> => {
+    await apiClient.delete(`/auth/tokens/${login}`, {
+      headers: { Authorization: getAuthHeader() },
+    });
+  },
+
+  activateUser: async (login: string): Promise<void> => {
+    await apiClient.post(
+      `/auth/users/${login}/activate`,
+      {},
+      { headers: { Authorization: getAuthHeader() } },
+    );
+  },
+
+  deactivateUser: async (login: string): Promise<void> => {
+    await apiClient.post(
+      `/auth/users/${login}/deactivate`,
+      {},
+      { headers: { Authorization: getAuthHeader() } },
+    );
+  },
+
+  updatePermissions: async (
+    login: string,
+    payload: PermissionsPayload,
+  ): Promise<void> => {
+    await apiClient.put(`/auth/users/${login}/permissions`, payload, {
+      headers: { Authorization: getAuthHeader() },
+    });
+  },
+
+  generateToken: async (label: string): Promise<string> => {
+    const res = await apiClient.post<{ token: string }>(
+      "/agents/register-token",
+      { label },
+      { headers: { Authorization: getAuthHeader() } },
+    );
+    return res.data.token;
+  },
+};

frontend/src/modules/admin/components/CreateUserModal.tsx

@@ -0,0 +1,310 @@
+import React, { useState } from "react";
+import { FaTimes, FaPlus } from "react-icons/fa";
+import { useAdminStore } from "../store/useAdminStore";
+
+interface CreateUserModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const CreateUserModal: React.FC<CreateUserModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const createUser = useAdminStore((s) => s.createUser);
+
+  const [form, setForm] = useState({
+    login: "",
+    name: "",
+    last_name: "",
+    password: "",
+    is_active: true,
+    permission_admin: false,
+    permission_manage_agent: false,
+    permission_view: true,
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    if (!form.login || !form.password) return;
+    setLoading(true);
+    await createUser(form);
+    setLoading(false);
+    setForm({
+      login: "",
+      name: "",
+      last_name: "",
+      password: "",
+      is_active: true,
+      permission_admin: false,
+      permission_manage_agent: false,
+      permission_view: true,
+    });
+    onClose();
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0,0,0,0.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "var(--card-bg)",
+          borderRadius: "8px",
+          padding: "24px",
+          minWidth: "380px",
+          border: "1px solid var(--border)",
+          boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "20px",
+          }}
+        >
+          <h3
+            style={{
+              margin: 0,
+              fontSize: "16px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            Создать пользователя
+          </h3>
+          <button
+            onClick={onClose}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "var(--text-secondary)",
+              cursor: "pointer",
+              padding: "4px",
+            }}
+          >
+            <FaTimes size={14} />
+          </button>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+          {/* Login */}
+          <div>
+            <label
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+                marginBottom: "4px",
+                display: "block",
+              }}
+            >
+              Логин
+            </label>
+            <input
+              type="text"
+              value={form.login}
+              onChange={(e) => setForm({ ...form, login: e.target.value })}
+              style={{
+                width: "100%",
+                padding: "8px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "6px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+              }}
+            />
+          </div>
+
+          {/* Password */}
+          <div>
+            <label
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+                marginBottom: "4px",
+                display: "block",
+              }}
+            >
+              Пароль
+            </label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              style={{
+                width: "100%",
+                padding: "8px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "6px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+              }}
+            />
+          </div>
+
+          {/* Name + Last name */}
+          <div style={{ display: "flex", gap: "8px" }}>
+            <div style={{ flex: 1 }}>
+              <label
+                style={{
+                  fontSize: "12px",
+                  color: "var(--text-secondary)",
+                  marginBottom: "4px",
+                  display: "block",
+                }}
+              >
+                Имя
+              </label>
+              <input
+                type="text"
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                style={{
+                  width: "100%",
+                  padding: "8px",
+                  backgroundColor: "var(--input-bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "6px",
+                  color: "var(--text-primary)",
+                  fontSize: "13px",
+                  outline: "none",
+                }}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <label
+                style={{
+                  fontSize: "12px",
+                  color: "var(--text-secondary)",
+                  marginBottom: "4px",
+                  display: "block",
+                }}
+              >
+                Фамилия
+              </label>
+              <input
+                type="text"
+                value={form.last_name}
+                onChange={(e) =>
+                  setForm({ ...form, last_name: e.target.value })
+                }
+                style={{
+                  width: "100%",
+                  padding: "8px",
+                  backgroundColor: "var(--input-bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "6px",
+                  color: "var(--text-primary)",
+                  fontSize: "13px",
+                  outline: "none",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Permissions */}
+          <div style={{ paddingTop: "8px" }}>
+            <label
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+                marginBottom: "8px",
+                display: "block",
+              }}
+            >
+              Разрешения
+            </label>
+            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+              {[
+                { key: "is_active", label: "Active" },
+                { key: "permission_view", label: "View" },
+                { key: "permission_manage_agent", label: "Manage Agent" },
+                { key: "permission_admin", label: "Admin" },
+              ].map(({ key, label }) => (
+                <label
+                  key={key}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    color: "var(--text-secondary)",
+                    userSelect: "none",
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={
+                      form[key as keyof typeof form] as boolean
+                    }
+                    onChange={(e) =>
+                      setForm({ ...form, [key]: e.target.checked })
+                    }
+                    style={{ accentColor: "var(--accent)" }}
+                  />
+                  {label}
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* Submit */}
+          <button
+            onClick={handleSubmit}
+            disabled={loading || !form.login || !form.password}
+            style={{
+              marginTop: "8px",
+              padding: "10px",
+              backgroundColor:
+                loading || !form.login || !form.password
+                  ? "var(--bg-secondary)"
+                  : "var(--accent)",
+              color:
+                loading || !form.login || !form.password
+                  ? "var(--text-muted)"
+                  : "var(--accent-text)",
+              border: "none",
+              borderRadius: "6px",
+              cursor:
+                loading || !form.login || !form.password
+                  ? "default"
+                  : "pointer",
+              fontSize: "13px",
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "6px",
+            }}
+          >
+            <FaPlus size={12} />
+            {loading ? "Создание..." : "Создать"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/modules/admin/components/UserCard.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { FaUser, FaCheck, FaTrash } from "react-icons/fa";
+import type { AdminUser, PermissionKey } from "../types";
+import { useAdminStore } from "../store/useAdminStore";
+
+interface UserCardProps {
+  user: AdminUser;
+}
+
+const permissions: { key: PermissionKey; label: string }[] = [
+  { key: "permission_view", label: "View" },
+  { key: "permission_manage_agent", label: "Manage Agent" },
+  { key: "permission_admin", label: "Admin" },
+];
+
+export const UserCard: React.FC<UserCardProps> = ({ user }) => {
+  const users = useAdminStore((s) => s.users);
+  const toggleActive = useAdminStore((s) => s.toggleActive);
+  const togglePermission = useAdminStore((s) => s.togglePermission);
+  const deleteUser = useAdminStore((s) => s.deleteUser);
+
+  return (
+    <div
+      style={{
+        padding: "16px",
+        backgroundColor: "var(--card-bg)",
+        border: "1px solid var(--border)",
+        borderRadius: "8px",
+        transition: "all 0.2s",
+        opacity: user.is_active ? 1 : 0.6,
+      }}
+    >
+      {/* Header: User info + Active toggle + Delete */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "16px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+          <div
+            style={{
+              width: "40px",
+              height: "40px",
+              borderRadius: "50%",
+              backgroundColor: user.is_active
+                ? "var(--accent)"
+                : "var(--text-muted)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FaUser size={16} style={{ color: "var(--card-bg)" }} />
+          </div>
+          <div>
+            <div
+              style={{
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "var(--text-primary)",
+              }}
+            >
+              {user.name} {user.last_name}
+            </div>
+            <div
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+              }}
+            >
+              {user.login}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+          {/* Active toggle */}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <span
+              style={{
+                fontSize: "11px",
+                color: user.is_active
+                  ? "var(--success-text, #22c55e)"
+                  : "var(--error-text, #ef4444)",
+              }}
+            >
+              {user.is_active ? "Active" : "Inactive"}
+            </span>
+            <button
+              onClick={() => toggleActive(user.id, user.login, user.is_active)}
+              style={{
+                width: "40px",
+                height: "22px",
+                borderRadius: "11px",
+                border: "none",
+                backgroundColor: user.is_active ? "#22c55e" : "#6b7280",
+                cursor: "pointer",
+                position: "relative",
+                transition: "background-color 0.2s",
+              }}
+            >
+              <div
+                style={{
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%",
+                  backgroundColor: "#fff",
+                  position: "absolute",
+                  top: "3px",
+                  left: user.is_active ? "21px" : "3px",
+                  transition: "left 0.2s",
+                }}
+              />
+            </button>
+          </div>
+
+          {/* Delete button */}
+          <button
+            onClick={() => {
+              if (window.confirm(`Удалить пользователя "${user.login}"?`)) {
+                deleteUser(user.id, user.login);
+              }
+            }}
+            title="Удалить"
+            style={{
+              background: "transparent",
+              border: "1px solid transparent",
+              color: "var(--text-muted)",
+              cursor: "pointer",
+              padding: "6px",
+              borderRadius: "6px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "all 0.15s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = "var(--error-text, #ef4444)";
+              e.currentTarget.style.backgroundColor = "rgba(239,68,68,0.1)";
+              e.currentTarget.style.borderColor = "rgba(239,68,68,0.3)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = "var(--text-muted)";
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderColor = "transparent";
+            }}
+          >
+            <FaTrash size={13} />
+          </button>
+        </div>
+      </div>
+
+      {/* Permissions */}
+      <div
+        style={{
+          display: "flex",
+          gap: "16px",
+          paddingTop: "12px",
+          borderTop: "1px solid var(--border)",
+        }}
+      >
+        {permissions.map(({ key, label }) => (
+          <label
+            key={key}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              cursor: "pointer",
+              fontSize: "12px",
+              color: "var(--text-secondary)",
+              userSelect: "none",
+            }}
+          >
+            <div
+              onClick={() => togglePermission(user.id, user.login, key, users)}
+              style={{
+                width: "18px",
+                height: "18px",
+                borderRadius: "4px",
+                border: "1px solid",
+                borderColor: user[key] ? "var(--accent)" : "var(--border)",
+                backgroundColor: user[key] ? "var(--accent)" : "transparent",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.15s",
+                cursor: "pointer",
+              }}
+            >
+              {user[key] && (
+                <FaCheck
+                  size={10}
+                  style={{ color: "var(--accent-text, #fff)" }}
+                />
+              )}
+            </div>
+            {label}
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};

frontend/src/modules/admin/index.ts

@@ -0,0 +1,4 @@
+export { AdminPanel } from "./AdminPanel";
+export { useAdminStore } from "./store/useAdminStore";
+export { adminApi } from "./api/admin.api";
+export type { AdminUser } from "./types";

frontend/src/modules/admin/store/useAdminStore.ts

@@ -0,0 +1,129 @@
+import { create } from "zustand";
+import type { AdminUser, PermissionKey } from "../types";
+import { adminApi } from "../api/admin.api";
+import type { CreateUserPayload } from "../api/admin.api";
+
+interface AdminState {
+  users: AdminUser[];
+  loading: boolean;
+  error: string | null;
+  fetchUsers: () => Promise<void>;
+  createUser: (payload: CreateUserPayload) => Promise<void>;
+  deleteUser: (id: string, login: string) => Promise<void>;
+  toggleActive: (id: string, login: string, current: boolean) => Promise<void>;
+  togglePermission: (
+    id: string,
+    login: string,
+    permission: PermissionKey,
+    users: AdminUser[],
+  ) => Promise<void>;
+}
+
+export const useAdminStore = create<AdminState>((set, get) => ({
+  users: [],
+  loading: false,
+  error: null,
+
+  fetchUsers: async () => {
+    set({ loading: true, error: null });
+    try {
+      const data = await adminApi.getUsers();
+      set({
+        users: data.map((u) => ({
+          id: String(u.id),
+          login: u.login,
+          name: u.name,
+          last_name: u.last_name,
+          is_active: u.is_active,
+          permission_admin: u.permission_admin,
+          permission_manage_agent: u.permission_manage_agent,
+          permission_view: u.permission_view,
+        })),
+        loading: false,
+      });
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to fetch users",
+        loading: false,
+      });
+    }
+  },
+
+  createUser: async (payload) => {
+    try {
+      await adminApi.createUser(payload);
+      await get().fetchUsers();
+    } catch (e) {
+      set({ error: e instanceof Error ? e.message : "Failed to create user" });
+    }
+  },
+
+  deleteUser: async (id, login) => {
+    try {
+      await adminApi.deleteUser(login);
+      set((state) => ({
+        users: state.users.filter((u) => u.id !== id),
+      }));
+    } catch (e) {
+      set({ error: e instanceof Error ? e.message : "Failed to delete user" });
+    }
+  },
+
+  toggleActive: async (id, login, current) => {
+    try {
+      if (current) {
+        await adminApi.deactivateUser(login);
+      } else {
+        await adminApi.activateUser(login);
+      }
+      set((state) => ({
+        users: state.users.map((u) =>
+          u.id === id ? { ...u, is_active: !current } : u,
+        ),
+      }));
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to toggle active",
+      });
+    }
+  },
+
+  togglePermission: async (id, login, permission, users) => {
+    const user = users.find((u) => u.id === id);
+    if (!user) return;
+
+    const newPermissions = {
+      is_active: user.is_active,
+      permission_admin:
+        permission === "permission_admin"
+          ? !user.permission_admin
+          : user.permission_admin,
+      permission_manage_agent:
+        permission === "permission_manage_agent"
+          ? !user.permission_manage_agent
+          : user.permission_manage_agent,
+      permission_view:
+        permission === "permission_view"
+          ? !user.permission_view
+          : user.permission_view,
+    };
+
+    try {
+      await adminApi.updatePermissions(login, newPermissions);
+      set((state) => ({
+        users: state.users.map((u) =>
+          u.id === id
+            ? {
+                ...u,
+                [permission]: !u[permission],
+              }
+            : u,
+        ),
+      }));
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to update permissions",
+      });
+    }
+  },
+}));

frontend/src/modules/admin/types.ts

@@ -0,0 +1,15 @@
+export interface AdminUser {
+  id: string;
+  login: string;
+  name: string;
+  last_name: string;
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+}
+
+export type PermissionKey =
+  | "permission_admin"
+  | "permission_manage_agent"
+  | "permission_view";

frontend/src/modules/agent/api/agent.api.service.ts

@@ -13,7 +13,9 @@ import type {
   RegistrationRequest,
   DeployAgentsRequest,
   DeployResponse,
+  SystemMetrics,
 } from "../types/agent.types";
+import type { GraphApiResponse } from "@/modules/graph/types";
 
 class AgentApiService {
   private readonly basePath = "/agents";
@@ -22,14 +24,14 @@ class AgentApiService {
 
   async getAgents(): Promise<AgentInfo[]> {
     const response = await apiClient.get<AgentInfo[]>(this.basePath);
-    return response.data;
+    return Array.isArray(response.data) ? response.data : [];
   }
 
   async getUsers(): Promise<TokenUser[]> {
     const response = await apiClient.get<TokenUser[]>(
       `${this.authBasePath}/tokens`,
     );
-    return response.data;
+    return Array.isArray(response.data) ? response.data : [];
   }
 
   async createUser(data: TokenCreate): Promise<void> {
@@ -47,15 +49,25 @@ class AgentApiService {
   async searchLogs(filters?: LogFilters): Promise<LogEntry[]> {
     const response = await apiClient.get<LogEntry[]>(this.logsBasePath, {
       params: {
-        level: filters?.level,
+        level: filters?.level || undefined,
-        service: filters?.service,
+        service: filters?.service || undefined,
-        agent: filters?.agent,
+        agent: filters?.agent || undefined,
-        date_from: filters?.date_from,
+        date_from: filters?.date_from || undefined,
-        date_to: filters?.date_to,
+        date_to: filters?.date_to || undefined,
         limit: filters?.limit ?? 100,
         offset: filters?.offset ?? 0,
       },
     });
+
+    if (!Array.isArray(response.data)) {
+      console.error(
+        "[Logs] Unexpected response format:",
+        typeof response.data,
+        response.data,
+      );
+      return [];
+    }
+
     return response.data;
   }
 
@@ -71,21 +83,21 @@ class AgentApiService {
     const response = await apiClient.get<string[]>(
       `${this.logsBasePath}/agents`,
     );
-    return response.data;
+    return Array.isArray(response.data) ? response.data : [];
   }
 
   async getDistinctLevels(): Promise<string[]> {
     const response = await apiClient.get<string[]>(
       `${this.logsBasePath}/levels`,
     );
-    return response.data;
+    return Array.isArray(response.data) ? response.data : [];
   }
 
   async getDistinctServices(): Promise<string[]> {
     const response = await apiClient.get<string[]>(
       `${this.logsBasePath}/services`,
     );
-    return response.data;
+    return Array.isArray(response.data) ? response.data : [];
   }
 
   // User management methods
@@ -93,6 +105,9 @@ class AgentApiService {
     const response = await apiClient.get<TokenUser>(
       `${this.authBasePath}/users/${login}`,
     );
+    if (!response.data || typeof response.data !== "object") {
+      throw new Error(`User not found: ${login}`);
+    }
     return response.data;
   }
 
@@ -100,7 +115,7 @@ class AgentApiService {
     const response = await apiClient.get<TokenUser[]>(
       `${this.authBasePath}/users/inactive`,
     );
-    return response.data;
+    return Array.isArray(response.data) ? response.data : [];
   }
 
   async updateUser(login: string, data: TokenUpdate): Promise<void> {
@@ -149,6 +164,18 @@ class AgentApiService {
     );
     return response.data;
   }
+
+  async getSystemMetrics(): Promise<SystemMetrics[]> {
+    const response = await apiClient.get<SystemMetrics[]>(
+      `${this.basePath}/system-metrics`,
+    );
+    return Array.isArray(response.data) ? response.data : [];
+  }
+
+  async getGraph(): Promise<GraphApiResponse> {
+    const response = await apiClient.get<GraphApiResponse>("/graph");
+    return response.data;
+  }
 }
 
 export const agentApiService = new AgentApiService();

frontend/src/modules/agent/store/logFilter.store.ts

@@ -1,12 +1,12 @@
 import { create } from "zustand";
 
-export type LogLevel = "INFO" | "WARNING" | "ERROR" | "FATAL";
+export type LogLevel = "info" | "warning" | "error" | "fatal";
 
 interface LogFilterState {
   searchQuery: string;
   startDate: Date | null;
   endDate: Date | null;
-  selectedLogLevels: LogLevel[];
+  selectedLogLevel: LogLevel | null;
   selectedService: string;
   selectedAgent: string;
   limit: number;
@@ -15,7 +15,7 @@ interface LogFilterState {
   setSearchQuery: (query: string) => void;
   setStartDate: (date: Date | null) => void;
   setEndDate: (date: Date | null) => void;
-  toggleLogLevel: (level: LogLevel) => void;
+  setSelectedLogLevel: (level: LogLevel | null) => void;
   setSelectedService: (service: string) => void;
   setSelectedAgent: (agent: string) => void;
   setLimit: (limit: number) => void;
@@ -36,7 +36,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
   searchQuery: "",
   startDate: null,
   endDate: null,
-  selectedLogLevels: ["INFO", "WARNING", "ERROR", "FATAL"],
+  selectedLogLevel: null,
   selectedService: "",
   selectedAgent: "",
   limit: 100,
@@ -45,14 +45,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
   setSearchQuery: (query) => set({ searchQuery: query }),
   setStartDate: (date) => set({ startDate: date }),
   setEndDate: (date) => set({ endDate: date }),
-  toggleLogLevel: (level) => {
+  setSelectedLogLevel: (level) => set({ selectedLogLevel: level }),
-    const { selectedLogLevels } = get();
-    if (selectedLogLevels.includes(level)) {
-      set({ selectedLogLevels: selectedLogLevels.filter((l) => l !== level) });
-    } else {
-      set({ selectedLogLevels: [...selectedLogLevels, level] });
-    }
-  },
   setSelectedService: (service) => set({ selectedService: service }),
   setSelectedAgent: (agent) => set({ selectedAgent: agent }),
   setLimit: (limit) => set({ limit }),
@@ -63,7 +56,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
       searchQuery: "",
       startDate: null,
       endDate: null,
-      selectedLogLevels: ["INFO", "WARNING", "ERROR", "FATAL"],
+      selectedLogLevel: null,
       selectedService: "",
       selectedAgent: "",
       limit: 100,
@@ -72,9 +65,17 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
   },
 
   getFilters: () => {
-    const { selectedLogLevels, selectedService, selectedAgent, startDate, endDate, limit, offset } = get();
+    const {
+      selectedLogLevel,
+      selectedService,
+      selectedAgent,
+      startDate,
+      endDate,
+      limit,
+      offset,
+    } = get();
     return {
-      level: selectedLogLevels.length > 0 ? selectedLogLevels.join(",") : undefined,
+      level: selectedLogLevel || undefined,
       service: selectedService || undefined,
       agent: selectedAgent || undefined,
       date_from: startDate ? startDate.toISOString() : undefined,

frontend/src/modules/agent/types/agent.types.ts

@@ -1,12 +1,8 @@
-export interface AgentService {
-  name: string;
-  status: string;
-}
-
 export interface AgentInfo {
-  name: string;
-  services: AgentService[];
   token: string;
+  label: string;
+  services: string[];
+  connected_at: string;
 }
 
 export interface LoginRequest {
@@ -46,11 +42,11 @@ export interface TokenUser {
 }
 
 export interface LogEntry {
-  agent: string;
+  Agent: string;
-  level: string;
+  Level: string;
-  message: string;
+  Message: string;
-  service: string;
+  Service: string;
-  timestamp: string;
+  Timestamp: string;
 }
 
 export interface InsertLogRequest {
@@ -66,7 +62,7 @@ export interface InsertLogsRequest {
 }
 
 export interface LogFilters {
-  level?: string;
+  level?: string | string[];
   service?: string;
   agent?: string;
   date_from?: string;
@@ -122,3 +118,14 @@ export interface DeployResponse {
   message?: string;
   results: DeployResult[];
 }
+
+export interface SystemMetrics {
+  connected_at: string;
+  cpu_percent: number;
+  disk_percent: number;
+  id: string;
+  label: string;
+  memory_percent: number;
+  network_rx_bytes: number;
+  network_tx_bytes: number;
+}

frontend/src/modules/agent/ui/LogFilters.tsx

@@ -9,11 +9,30 @@ import {
 } from "react-icons/fi";
 import { useLogFilterStore, type LogLevel } from "../store/logFilter.store";
 
-const logLevelColors: Record<LogLevel, { bg: string; text: string; border: string }> = {
+const logLevelColors: Record<
-  INFO: { bg: "var(--info-bg)", text: "var(--info-text)", border: "var(--info-border)" },
+  LogLevel,
-  WARNING: { bg: "var(--warning-bg)", text: "var(--warning-text)", border: "var(--warning-border)" },
+  { bg: string; text: string; border: string }
-  ERROR: { bg: "var(--error-bg)", text: "var(--error-text)", border: "var(--error-border)" },
+> = {
-  FATAL: { bg: "var(--fatal-bg)", text: "var(--fatal-text)", border: "var(--fatal-border)" },
+  info: {
+    bg: "rgba(59, 130, 246, 0.1)",
+    text: "#3b82f6",
+    border: "rgba(59, 130, 246, 0.3)",
+  },
+  warning: {
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    border: "rgba(245, 158, 11, 0.3)",
+  },
+  error: {
+    bg: "var(--error-bg)",
+    text: "var(--error-text)",
+    border: "var(--error-border)",
+  },
+  fatal: {
+    bg: "rgba(168, 85, 247, 0.1)",
+    text: "#a855f7",
+    border: "rgba(168, 85, 247, 0.3)",
+  },
 };
 
 interface LogFiltersProps {
@@ -22,18 +41,22 @@ interface LogFiltersProps {
   availableAgents: string[];
 }
 
-export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServices, availableAgents }) => {
+export const LogFilters: React.FC<LogFiltersProps> = ({
+  onApply,
+  availableServices,
+  availableAgents,
+}) => {
   const {
     searchQuery,
     startDate,
     endDate,
-    selectedLogLevels,
+    selectedLogLevel,
     selectedService,
     selectedAgent,
     setSearchQuery,
     setStartDate,
     setEndDate,
-    toggleLogLevel,
+    setSelectedLogLevel,
     setSelectedService,
     setSelectedAgent,
     resetFilters,
@@ -44,6 +67,9 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
   const [localEndDate, setLocalEndDate] = useState<Date | null>(endDate);
   const [localService, setLocalService] = useState(selectedService);
   const [localAgent, setLocalAgent] = useState(selectedAgent);
+  const [localLevel, setLocalLevel] = useState<LogLevel | null>(
+    selectedLogLevel,
+  );
 
   useEffect(() => {
     setLocalSearchQuery(searchQuery);
@@ -65,19 +91,33 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
     setLocalAgent(selectedAgent);
   }, [selectedAgent]);
 
+  useEffect(() => {
+    setLocalLevel(selectedLogLevel);
+  }, [selectedLogLevel]);
+
   const handleApply = useCallback(() => {
     setSearchQuery(localSearchQuery);
     setStartDate(localStartDate);
     setEndDate(localEndDate);
+    setSelectedLogLevel(localLevel);
     setSelectedService(localService);
     setSelectedAgent(localAgent);
     onApply();
-  }, [localSearchQuery, localStartDate, localEndDate, localService, localAgent, onApply]);
+  }, [
+    localSearchQuery,
+    localStartDate,
+    localEndDate,
+    localLevel,
+    localService,
+    localAgent,
+    onApply,
+  ]);
 
   const handleReset = useCallback(() => {
     setLocalSearchQuery("");
     setLocalStartDate(null);
     setLocalEndDate(null);
+    setLocalLevel(null);
     setLocalService("");
     setLocalAgent("");
     resetFilters();
@@ -91,7 +131,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
     if (endDate) count++;
     if (selectedService) count++;
     if (selectedAgent) count++;
-    if (selectedLogLevels.length < 4) count++;
+    if (selectedLogLevel) count++;
     return count;
   };
 
@@ -130,7 +170,10 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <FiFilter size={14} style={{ color: "var(--accent)" }} />
-            <h3 className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
+            <h3
+              className="text-sm font-semibold"
+              style={{ color: "var(--text-primary)" }}
+            >
               Фильтры логов
             </h3>
           </div>
@@ -140,7 +183,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
         </div>
 
         {/* Filters Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
           {/* Search */}
           <div className="relative">
             <FiSearch
@@ -195,17 +238,31 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
           <div className="flex gap-2">
             <input
               type="date"
-              value={localStartDate ? localStartDate.toISOString().split("T")[0] : ""}
+              value={
-              onChange={(e) => setLocalStartDate(e.target.value ? new Date(e.target.value) : null)}
+                localStartDate ? localStartDate.toISOString().split("T")[0] : ""
-              style={inputStyle}
+              }
+              onChange={(e) =>
+                setLocalStartDate(
+                  e.target.value ? new Date(e.target.value) : null,
+                )
+              }
+              style={{ ...inputStyle, minWidth: 0 }}
               placeholder="Дата от"
+              className="flex-1 min-w-0"
             />
             <input
               type="date"
-              value={localEndDate ? localEndDate.toISOString().split("T")[0] : ""}
+              value={
-              onChange={(e) => setLocalEndDate(e.target.value ? new Date(e.target.value) : null)}
+                localEndDate ? localEndDate.toISOString().split("T")[0] : ""
-              style={inputStyle}
+              }
+              onChange={(e) =>
+                setLocalEndDate(
+                  e.target.value ? new Date(e.target.value) : null,
+                )
+              }
+              style={{ ...inputStyle, minWidth: 0 }}
               placeholder="Дата до"
+              className="flex-1 min-w-0"
             />
           </div>
         </div>
@@ -214,44 +271,68 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
         <div className="mb-4">
           <div className="flex items-center gap-2 mb-2">
             <FiTag size={12} style={{ color: "var(--text-secondary)" }} />
-            <span className="text-xs font-medium" style={{ color: "var(--text-secondary)" }}>
+            <span
-              Уровни логов
+              className="text-xs font-medium"
-            </span>
+              style={{ color: "var(--text-secondary)" }}
-            <span className="text-xs" style={{ color: "var(--text-muted)" }}>
+            >
-              ({selectedLogLevels.length}/4)
+              Уровень логов
             </span>
           </div>
           <div className="flex flex-wrap gap-2">
-            {(["INFO", "WARNING", "ERROR", "FATAL"] as LogLevel[]).map((level) => {
+            {(["info", "warning", "error", "fatal"] as LogLevel[]).map(
-              const isSelected = selectedLogLevels.includes(level);
+              (level) => {
-              const colors = logLevelColors[level];
+                const isSelected = localLevel === level;
-              return (
+                const colors = logLevelColors[level];
-                <button
+                return (
-                  key={level}
+                  <button
-                  onClick={() => toggleLogLevel(level)}
+                    key={level}
-                  className="px-3 py-1.5 rounded-lg text-xs font-medium transition-all border"
+                    onClick={() => setLocalLevel(isSelected ? null : level)}
-                  style={{
+                    className="px-3 py-2 rounded-lg text-xs font-medium transition-all border flex-shrink-0"
-                    backgroundColor: isSelected ? colors.bg : "transparent",
+                    style={{
-                    color: isSelected ? colors.text : "var(--text-secondary)",
+                      backgroundColor: isSelected ? colors.bg : "transparent",
-                    borderColor: isSelected ? colors.border : "var(--border)",
+                      color: isSelected ? colors.text : "var(--text-secondary)",
-                  }}
+                      borderColor: isSelected ? colors.border : "var(--border)",
-                >
+                      minHeight: "36px",
-                  {isSelected && <FiCheck size={10} className="inline mr-1" />}
+                    }}
-                  {level}
+                    onMouseEnter={(e) => {
-                </button>
+                      if (isSelected) {
-              );
+                        e.currentTarget.style.backgroundColor = colors.text;
-            })}
+                        e.currentTarget.style.color = "#fff";
+                      } else {
+                        e.currentTarget.style.backgroundColor =
+                          "rgba(128, 128, 128, 0.08)";
+                        e.currentTarget.style.color = "var(--text-primary)";
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = isSelected
+                        ? colors.bg
+                        : "transparent";
+                      e.currentTarget.style.color = isSelected
+                        ? colors.text
+                        : "var(--text-secondary)";
+                    }}
+                  >
+                    {isSelected && (
+                      <FiCheck size={10} className="inline mr-1" />
+                    )}
+                    {level.toUpperCase()}
+                  </button>
+                );
+              },
+            )}
           </div>
         </div>
 
         {/* Action Buttons */}
-        <div className="flex gap-2">
+        <div className="flex flex-col sm:flex-row gap-2">
           <button
             onClick={handleApply}
-            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-lg transition-all text-sm font-medium"
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-all text-sm font-medium"
             style={{
               backgroundColor: "var(--button-primary)",
               color: "var(--button-primary-text)",
+              minHeight: "44px",
             }}
           >
             <FiCheck size={14} />
@@ -259,23 +340,31 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
           </button>
           <button
             onClick={handleReset}
-            className="px-4 py-2 rounded-lg transition-all text-sm font-medium border"
+            className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-all text-sm font-medium border"
             style={{
               backgroundColor: "transparent",
               color: "var(--text-secondary)",
               borderColor: "var(--border)",
+              minHeight: "44px",
             }}
           >
             <FiX size={14} />
+            Сбросить
           </button>
         </div>
 
         {/* Active Filters Display */}
         {activeFiltersCount > 0 && (
-          <div className="mt-4 pt-4 border-t" style={{ borderColor: "var(--border)" }}>
+          <div
+            className="mt-4 pt-4 border-t"
+            style={{ borderColor: "var(--border)" }}
+          >
             <div className="flex items-center gap-2 mb-2">
               <FiFilter size={10} style={{ color: "var(--accent)" }} />
-              <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+              <span
+                className="text-xs"
+                style={{ color: "var(--text-secondary)" }}
+              >
                 Активные фильтры:
               </span>
             </div>
@@ -289,14 +378,21 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
                   }}
                 >
                   <FiSearch size={10} />
-                  <span style={{ color: "var(--text-primary)" }}>Поиск: {searchQuery}</span>
+                  <span style={{ color: "var(--text-primary)" }}>
+                    Поиск: {searchQuery}
+                  </span>
                   <button
                     onClick={() => {
                       setLocalSearchQuery("");
                       setSearchQuery("");
                       onApply();
                     }}
-                    style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)" }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "var(--text-muted)",
+                    }}
                   >
                     <FiX size={10} />
                   </button>
@@ -311,19 +407,59 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
                   }}
                 >
                   <FiTag size={10} />
-                  <span style={{ color: "var(--text-primary)" }}>Сервис: {selectedService}</span>
+                  <span style={{ color: "var(--text-primary)" }}>
+                    Сервис: {selectedService}
+                  </span>
                   <button
                     onClick={() => {
                       setLocalService("");
                       setSelectedService("");
                       onApply();
                     }}
-                    style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)" }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "var(--text-muted)",
+                    }}
                   >
                     <FiX size={10} />
                   </button>
                 </div>
               )}
+              {selectedLogLevel &&
+                (() => {
+                  const colors = logLevelColors[selectedLogLevel];
+                  return (
+                    <div
+                      className="flex items-center gap-1 px-2 py-1 rounded-lg border text-xs"
+                      style={{
+                        backgroundColor: colors.bg,
+                        borderColor: colors.border,
+                      }}
+                    >
+                      <FiTag size={10} style={{ color: colors.text }} />
+                      <span style={{ color: colors.text }}>
+                        Уровень: {selectedLogLevel.toUpperCase()}
+                      </span>
+                      <button
+                        onClick={() => {
+                          setLocalLevel(null);
+                          setSelectedLogLevel(null);
+                          onApply();
+                        }}
+                        style={{
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          color: colors.text,
+                        }}
+                      >
+                        <FiX size={10} />
+                      </button>
+                    </div>
+                  );
+                })()}
               {selectedAgent && (
                 <div
                   className="flex items-center gap-1 px-2 py-1 rounded-lg border text-xs"
@@ -333,14 +469,21 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
                   }}
                 >
                   <FiTag size={10} />
-                  <span style={{ color: "var(--text-primary)" }}>Агент: {selectedAgent}</span>
+                  <span style={{ color: "var(--text-primary)" }}>
+                    Агент: {selectedAgent}
+                  </span>
                   <button
                     onClick={() => {
                       setLocalAgent("");
                       setSelectedAgent("");
                       onApply();
                     }}
-                    style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)" }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "var(--text-muted)",
+                    }}
                   >
                     <FiX size={10} />
                   </button>
@@ -355,14 +498,21 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
                   }}
                 >
                   <FiCalendar size={10} />
-                  <span style={{ color: "var(--text-primary)" }}>С: {formatDate(startDate)}</span>
+                  <span style={{ color: "var(--text-primary)" }}>
+                    С: {formatDate(startDate)}
+                  </span>
                   <button
                     onClick={() => {
                       setLocalStartDate(null);
                       setStartDate(null);
                       onApply();
                     }}
-                    style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)" }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "var(--text-muted)",
+                    }}
                   >
                     <FiX size={10} />
                   </button>
@@ -377,14 +527,21 @@ export const LogFilters: React.FC<LogFiltersProps> = ({ onApply, availableServic
                   }}
                 >
                   <FiCalendar size={10} />
-                  <span style={{ color: "var(--text-primary)" }}>По: {formatDate(endDate)}</span>
+                  <span style={{ color: "var(--text-primary)" }}>
+                    По: {formatDate(endDate)}
+                  </span>
                   <button
                     onClick={() => {
                       setLocalEndDate(null);
                       setEndDate(null);
                       onApply();
                     }}
-                    style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)" }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "var(--text-muted)",
+                    }}
                   >
                     <FiX size={10} />
                   </button>

frontend/src/modules/auth/store/useAuthStore.ts

@@ -20,16 +20,15 @@ const login = async (credentials: LoginCredentials): Promise<LoginResponse> => {
 const register = async (
   data: RegisterData,
 ): Promise<Record<string, string>> => {
-  const response = await apiClient.post<Record<string, string>>("/auth/token", {
+  const response = await apiClient.post<Record<string, string>>(
-    login: data.login,
+    "/auth/register",
-    password: data.password,
+    {
-    name: data.firstName,
+      login: data.login,
-    last_name: data.lastName,
+      password: data.password,
-    is_active: data.is_active,
+      name: data.firstName,
-    permission_admin: data.permission_admin,
+      last_name: data.lastName,
-    permission_manage_agent: data.permission_manage_agent,
+    },
-    permission_view: data.permission_view,
+  );
-  });
   return response.data;
 };
 

frontend/src/modules/auth/types/auth.types.ts

@@ -8,10 +8,6 @@ export interface RegisterData {
   password: string;
   firstName: string;
   lastName: string;
-  is_active?: boolean;
-  permission_admin?: boolean;
-  permission_manage_agent?: boolean;
-  permission_view?: boolean;
 }
 
 export interface LoginResponse {

frontend/src/modules/dashboard/components/add.widget.button.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { FaPlus } from "react-icons/fa";
+
+interface AddWidgetButtonProps {
+  onClick: () => void;
+}
+
+export const AddWidgetButton: React.FC<AddWidgetButtonProps> = ({
+  onClick,
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className="w-full py-1.5 bg-tertiary hover:bg-tertiary/70 rounded-lg border border-primary transition-colors flex items-center justify-center gap-1 cursor-pointer"
+    >
+      <FaPlus size={10} className="text-tertiary" />
+      <span className="text-[10px] text-secondary">Добавить график</span>
+    </button>
+  );
+};

frontend/src/modules/dashboard/components/add.widget.modal.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import type { ChartType } from "../types";
+
+interface AddWidgetModalProps {
+  isOpen: boolean;
+  onAdd: (data: { type: ChartType; title: string; dataKey: string }) => void;
+  onClose: () => void;
+}
+
+export const AddWidgetModal: React.FC<AddWidgetModalProps> = ({
+  isOpen,
+  onAdd,
+  onClose,
+}) => {
+  const [type, setType] = useState<ChartType>("line");
+  const [title, setTitle] = useState("");
+  const [dataKey, setDataKey] = useState("requests");
+
+  const handleAdd = () => {
+    if (!title.trim()) return;
+    onAdd({ type, title: title.trim(), dataKey });
+    setTitle("");
+    setType("line");
+    setDataKey("requests");
+    onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+          onClick={onClose}
+        >
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.95, opacity: 0 }}
+            className="bg-secondary rounded-xl shadow-large border border-primary w-80 p-3"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-xs font-semibold text-primary mb-3">
+              Добавить график
+            </h3>
+
+            <div className="space-y-2">
+              <div>
+                <label className="block text-[10px] text-secondary mb-1">
+                  Тип
+                </label>
+                <div className="flex gap-1">
+                  {(["line", "bar", "area", "pie"] as ChartType[]).map((t) => (
+                    <button
+                      key={t}
+                      onClick={() => setType(t)}
+                      className={`px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
+                        type === t
+                          ? "bg-accent-primary text-white"
+                          : "bg-tertiary text-secondary hover:bg-tertiary/70"
+                      }`}
+                    >
+                      {t === "line" && "📈"}
+                      {t === "bar" && "📊"}
+                      {t === "area" && "📉"}
+                      {t === "pie" && "🥧"}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-[10px] text-secondary mb-1">
+                  Название
+                </label>
+                <input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  placeholder="Название"
+                  className="w-full px-2 py-1 text-[11px] bg-tertiary border border-primary rounded text-primary focus:outline-none focus:border-accent-primary"
+                />
+              </div>
+
+              <div className="flex gap-1 pt-2">
+                <button
+                  onClick={handleAdd}
+                  className="flex-1 px-2 py-1 bg-accent-primary text-white rounded text-[10px] hover:bg-accent-hover transition-colors cursor-pointer"
+                >
+                  Добавить
+                </button>
+                <button
+                  onClick={onClose}
+                  className="px-2 py-1 bg-tertiary text-secondary rounded text-[10px] hover:bg-secondary transition-colors cursor-pointer"
+                >
+                  Отмена
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

frontend/src/modules/dashboard/components/chart,widget.tsx

@@ -0,0 +1,299 @@
+// modules/dashboard/components/ChartWidget.tsx
+import React from "react";
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  AreaChart,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import {
+  FaChartLine,
+  FaChartBar,
+  FaChartArea,
+  FaChartPie,
+  FaCog,
+  FaEye,
+  FaEyeSlash,
+} from "react-icons/fa";
+import { motion } from "framer-motion";
+import type { ChartWidget as ChartWidgetType, MetricData } from "../types";
+
+interface ChartWidgetProps {
+  widget: ChartWidgetType;
+  data: MetricData[];
+  onEdit: () => void;
+  onToggleVisibility: () => void;
+}
+
+// Все возможные уровни логов (метрики)
+const METRICS = ["INFO", "WARN", "ERROR", "DEBUG"];
+
+// Цвета для каждой метрики
+const METRIC_COLORS: Record<string, string> = {
+  INFO: "#10b981", // зеленый
+  WARN: "#f59e0b", // оранжевый
+  ERROR: "#ef4444", // красный
+  DEBUG: "#3b82f6", // синий
+};
+
+export const ChartWidget: React.FC<ChartWidgetProps> = ({
+  widget,
+  data,
+  onEdit,
+  onToggleVisibility,
+}) => {
+  const renderChart = () => {
+    if (!data || !Array.isArray(data) || data.length === 0) {
+      return (
+        <div className="flex items-center justify-center h-full">
+          <span className="text-[10px] text-tertiary">Нет данных</span>
+        </div>
+      );
+    }
+
+    const normalizedData = data.map((point) => {
+      const normalized: MetricData = { timestamp: point.timestamp };
+      METRICS.forEach((metric) => {
+        normalized[metric] = point[metric] || 0;
+      });
+      return normalized;
+    });
+
+    const commonProps = {
+      data: normalizedData,
+      margin: { top: 5, right: 10, left: 0, bottom: 5 },
+    };
+
+    switch (widget.type) {
+      case "line":
+        return (
+          <LineChart {...commonProps}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+            <XAxis
+              dataKey="timestamp"
+              stroke="#64748b"
+              tick={{ fontSize: 9 }}
+              interval={Math.floor(normalizedData.length / 5)}
+            />
+            <YAxis stroke="#64748b" tick={{ fontSize: 9 }} width={30} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                border: "1px solid #334155",
+                borderRadius: "6px",
+                fontSize: "10px",
+              }}
+              labelStyle={{ color: "#fff" }}
+            />
+            <Legend
+              wrapperStyle={{ fontSize: "10px" }}
+              verticalAlign="top"
+              height={25}
+            />
+            {METRICS.map((metric) => (
+              <Line
+                key={metric}
+                type="monotone"
+                dataKey={metric}
+                stroke={METRIC_COLORS[metric]}
+                strokeWidth={2}
+                dot={false}
+                name={metric}
+              />
+            ))}
+          </LineChart>
+        );
+
+      case "bar":
+        return (
+          <BarChart {...commonProps}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+            <XAxis
+              dataKey="timestamp"
+              stroke="#64748b"
+              tick={{ fontSize: 9 }}
+              interval={Math.floor(normalizedData.length / 5)}
+            />
+            <YAxis stroke="#64748b" tick={{ fontSize: 9 }} width={30} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                border: "1px solid #334155",
+                borderRadius: "6px",
+                fontSize: "10px",
+              }}
+              labelStyle={{ color: "#fff" }}
+            />
+            <Legend
+              wrapperStyle={{ fontSize: "10px" }}
+              verticalAlign="top"
+              height={25}
+            />
+            {METRICS.map((metric) => (
+              <Bar
+                key={metric}
+                dataKey={metric}
+                fill={METRIC_COLORS[metric]}
+                radius={[2, 2, 0, 0]}
+                name={metric}
+              />
+            ))}
+          </BarChart>
+        );
+
+      case "area":
+        return (
+          <AreaChart {...commonProps}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+            <XAxis
+              dataKey="timestamp"
+              stroke="#64748b"
+              tick={{ fontSize: 9 }}
+              interval={Math.floor(normalizedData.length / 5)}
+            />
+            <YAxis stroke="#64748b" tick={{ fontSize: 9 }} width={30} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                border: "1px solid #334155",
+                borderRadius: "6px",
+                fontSize: "10px",
+              }}
+              labelStyle={{ color: "#fff" }}
+            />
+            <Legend
+              wrapperStyle={{ fontSize: "10px" }}
+              verticalAlign="top"
+              height={25}
+            />
+            {METRICS.map((metric) => (
+              <Area
+                key={metric}
+                type="monotone"
+                dataKey={metric}
+                stroke={METRIC_COLORS[metric]}
+                fill={METRIC_COLORS[metric]}
+                fillOpacity={0.2}
+                name={metric}
+              />
+            ))}
+          </AreaChart>
+        );
+
+      case "pie":
+        // Для круговой диаграммы берем последнюю точку
+        const lastPoint = normalizedData[normalizedData.length - 1];
+        const pieData = METRICS.map((metric) => ({
+          name: metric,
+          value: lastPoint[metric] || 0,
+        })).filter((item) => Number(item.value) > 0);
+
+        return (
+          <PieChart>
+            <Pie
+              data={pieData}
+              cx="50%"
+              cy="50%"
+              innerRadius={40}
+              outerRadius={55}
+              paddingAngle={3}
+              dataKey="value"
+              nameKey="name"
+            >
+              {pieData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={METRIC_COLORS[entry.name]} />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                border: "1px solid #334155",
+                borderRadius: "6px",
+                fontSize: "10px",
+              }}
+              labelStyle={{ color: "#fff" }}
+            />
+            <Legend
+              wrapperStyle={{ fontSize: "10px" }}
+              layout="vertical"
+              verticalAlign="middle"
+              align="right"
+            />
+          </PieChart>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const getIcon = () => {
+    switch (widget.type) {
+      case "line":
+        return <FaChartLine size={10} />;
+      case "bar":
+        return <FaChartBar size={10} />;
+      case "area":
+        return <FaChartArea size={10} />;
+      case "pie":
+        return <FaChartPie size={10} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      className={`bg-secondary rounded-lg border border-primary p-2 transition-all ${!widget.visible ? "opacity-50" : ""}`}
+    >
+      <div className="flex items-center justify-between mb-1 px-1">
+        <div className="flex items-center gap-1">
+          <span className="text-tertiary">{getIcon()}</span>
+          <h3 className="text-[11px] font-medium text-primary">
+            {widget.title}
+          </h3>
+        </div>
+        <div className="flex gap-0.5">
+          <button
+            onClick={onToggleVisibility}
+            className="p-0.5 hover:bg-tertiary rounded transition-colors cursor-pointer"
+            title={widget.visible ? "Скрыть" : "Показать"}
+          >
+            {widget.visible ? (
+              <FaEye size={9} className="text-tertiary" />
+            ) : (
+              <FaEyeSlash size={9} className="text-tertiary" />
+            )}
+          </button>
+          <button
+            onClick={onEdit}
+            className="p-0.5 hover:bg-tertiary rounded transition-colors cursor-pointer"
+            title="Настройки"
+          >
+            <FaCog size={9} className="text-tertiary" />
+          </button>
+        </div>
+      </div>
+      <div className="h-40">
+        <ResponsiveContainer width="100%" height="100%">
+          {renderChart()}
+        </ResponsiveContainer>
+      </div>
+    </motion.div>
+  );
+};

frontend/src/modules/dashboard/components/chart.settings.tsx

@@ -0,0 +1,105 @@
+// modules/dashboard/components/WidgetSettings.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import type { ChartType, ChartWidget } from "../types";
+
+interface WidgetSettingsProps {
+  widget: ChartWidget;
+  onUpdate: (widget: ChartWidget) => void;
+  onRemove: () => void;
+  onClose: () => void;
+}
+
+export const WidgetSettings: React.FC<WidgetSettingsProps> = ({
+  widget,
+  onUpdate,
+  onRemove,
+  onClose,
+}) => {
+  const [type, setType] = useState<ChartType>(widget.type);
+  const [title, setTitle] = useState(widget.title);
+
+  const handleSave = () => {
+    onUpdate({ ...widget, type, title });
+    onClose();
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      onClick={onClose}
+    >
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.95, opacity: 0 }}
+        className="bg-secondary rounded-xl shadow-large border border-primary w-80 p-3"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="text-xs font-semibold text-primary mb-3">
+          Настройки графика
+        </h3>
+
+        <div className="space-y-2">
+          <div>
+            <label className="block text-[10px] text-secondary mb-1">Тип</label>
+            <div className="flex gap-1">
+              {(["line", "bar", "area", "pie"] as ChartType[]).map((t) => (
+                <button
+                  key={t}
+                  onClick={() => setType(t)}
+                  className={`px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
+                    type === t
+                      ? "bg-accent-primary text-white"
+                      : "bg-tertiary text-secondary hover:bg-tertiary/70"
+                  }`}
+                >
+                  {t === "line" && "📈"}
+                  {t === "bar" && "📊"}
+                  {t === "area" && "📉"}
+                  {t === "pie" && "🥧"}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-[10px] text-secondary mb-1">
+              Название
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full px-2 py-1 text-[11px] bg-tertiary border border-primary rounded text-primary focus:outline-none focus:border-accent-primary"
+            />
+          </div>
+
+          <div className="flex gap-1 pt-2">
+            <button
+              onClick={handleSave}
+              className="flex-1 px-2 py-1 bg-accent-primary text-white rounded text-[10px] hover:bg-accent-hover transition-colors cursor-pointer"
+            >
+              Сохранить
+            </button>
+            <button
+              onClick={onRemove}
+              className="px-2 py-1 bg-red-500/10 text-red-500 rounded text-[10px] hover:bg-red-500/20 transition-colors cursor-pointer"
+            >
+              Удалить
+            </button>
+            <button
+              onClick={onClose}
+              className="px-2 py-1 bg-tertiary text-secondary rounded text-[10px] hover:bg-secondary transition-colors cursor-pointer"
+            >
+              Отмена
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};

frontend/src/modules/dashboard/components/dashboard.chart.tsx

@@ -0,0 +1,171 @@
+import React from "react";
+import {
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { motion } from "framer-motion";
+import type { ChartType, MetricData } from "../types";
+
+interface DashboardChartProps {
+  title: string;
+  type: ChartType;
+  data: MetricData[];
+  dataKeys: string[];
+  colors?: string[];
+}
+
+const COLORS = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+
+export const DashboardChart: React.FC<DashboardChartProps> = ({
+  title,
+  type,
+  data,
+  dataKeys,
+  colors = COLORS,
+}) => {
+  const renderChart = () => {
+    if (!data || data.length === 0) {
+      return (
+        <div className="flex items-center justify-center h-full">
+          <span className="text-xs" style={{ color: "var(--text-muted)" }}>
+            Нет данных
+          </span>
+        </div>
+      );
+    }
+
+    const commonProps = {
+      data,
+      margin: { top: 5, right: 10, left: 0, bottom: 5 },
+    };
+
+    const axisStyle = {
+      stroke: "var(--text-secondary)",
+      tick: { fontSize: 10 },
+    };
+
+    const tooltipStyle = {
+      contentStyle: {
+        backgroundColor: "var(--card-bg)",
+        border: "1px solid var(--border)",
+        borderRadius: "6px",
+        fontSize: "11px",
+      },
+      labelStyle: { color: "var(--text-primary)" },
+    };
+
+    if (type === "pie") {
+      // Если данные уже в формате { name, value } — используем напрямую
+      const isPieFormat =
+        data.length > 0 && "name" in data[0] && "value" in data[0];
+
+      const pieData = isPieFormat
+        ? data
+        : data.map((point, i) => ({
+            name: dataKeys[i % dataKeys.length],
+            value: point[dataKeys[i % dataKeys.length]] || 0,
+          }));
+
+      return (
+        <PieChart>
+          <Pie
+            data={pieData}
+            cx="50%"
+            cy="50%"
+            innerRadius={40}
+            outerRadius={60}
+            paddingAngle={3}
+            dataKey="value"
+            nameKey="name"
+          >
+            {pieData.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={colors[index % colors.length]}
+              />
+            ))}
+          </Pie>
+          <Tooltip {...tooltipStyle} />
+          <Legend
+            wrapperStyle={{ fontSize: "11px" }}
+            layout="vertical"
+            verticalAlign="middle"
+            align="right"
+          />
+        </PieChart>
+      );
+    }
+
+    const ChartComponent =
+      type === "line" ? LineChart : type === "area" ? AreaChart : BarChart;
+    const DataComponent = type === "line" ? Line : type === "area" ? Area : Bar;
+
+    return (
+      <ChartComponent {...commonProps}>
+        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+        <XAxis
+          dataKey="timestamp"
+          {...axisStyle}
+          interval={Math.floor(data.length / 5)}
+        />
+        <YAxis {...axisStyle} width={35} />
+        <Tooltip {...tooltipStyle} />
+        <Legend wrapperStyle={{ fontSize: "11px" }} />
+        {dataKeys.map((key, i) => (
+          <DataComponent
+            key={key}
+            type="monotone"
+            dataKey={key}
+            stroke={colors[i % colors.length]}
+            fill={colors[i % colors.length]}
+            fillOpacity={type === "area" ? 0.2 : undefined}
+            strokeWidth={2}
+            dot={false}
+            name={key}
+            radius={type === "bar" ? [2, 2, 0, 0] : undefined}
+          />
+        ))}
+      </ChartComponent>
+    );
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      style={{
+        padding: "8px",
+      }}
+    >
+      <h3
+        style={{
+          fontSize: "13px",
+          fontWeight: 600,
+          color: "var(--text-primary)",
+          marginBottom: "8px",
+        }}
+      >
+        {title}
+      </h3>
+      <div style={{ height: 180 }}>
+        <ResponsiveContainer width="100%" height="100%">
+          {renderChart()}
+        </ResponsiveContainer>
+      </div>
+    </motion.div>
+  );
+};

frontend/src/modules/dashboard/dashboard.tsx

@@ -0,0 +1,96 @@
+// modules/dashboard/Dashboard.tsx
+import { useAgentStore } from "@/app/providers/layout/store/agent.store";
+import { useEffect, useRef, useState } from "react";
+import { useDashboardStore } from "./store/dashboard.store";
+import { useAuthStore } from "../auth/store/useAuthStore";
+import { ChartWidget } from "./components/chart,widget";
+import { AddWidgetButton } from "./components/add.widget.button";
+import { AddWidgetModal } from "./components/add.widget.modal";
+import { WidgetSettings } from "./components/chart.settings";
+import { useWidgets } from "./hooks/use.widget";
+
+export const Dashboard: React.FC = () => {
+  const { chartData, loading, error, fetchMetrics, clearData } =
+    useDashboardStore();
+  //   const { servicesQueryParams } = useAgentStore();
+  const intervalRef = useRef<number | null>(null);
+
+  const { token } = useAuthStore();
+
+  // Первичная загрузка (не latest)
+  //   const fetchPrimaryData = () => {
+  //     fetchMetrics(false, token || "", servicesQueryParams, { since: "10m" });
+  //   };
+
+  // Периодическое обновление (latest)
+  //   const fetchLatestData = () => {
+  //     fetchMetrics(true, token || "", servicesQueryParams);
+  //   };
+
+  //   useEffect(() => {
+  //     fetchPrimaryData();
+  //   }, []);
+
+  //   useEffect(() => {
+  //     intervalRef.current = window.setInterval(() => {
+  //       fetchLatestData();
+  //     }, 30000);
+
+  //     return () => {
+  //       if (intervalRef.current) {
+  //         window.clearInterval(intervalRef.current);
+  //       }
+  //       clearData();
+  //     };
+  //   }, [servicesQueryParams]);
+
+  const { widgets, addWidget, updateWidget, removeWidget, toggleVisibility } =
+    useWidgets();
+  const [editingWidget, setEditingWidget] = useState<any>(null);
+  const [isAdding, setIsAdding] = useState(false);
+
+  const visibleWidgets = widgets.filter((w) => w.visible);
+
+  return (
+    <div className="p-4">
+      {loading && chartData.length === 0 ? (
+        <div className="flex items-center justify-center h-40">
+          <div className="animate-spin rounded-full h-8 w-8 border-2 border-accent-primary border-t-transparent" />
+        </div>
+      ) : error ? (
+        <div className="flex items-center justify-center h-40">
+          <span className="text-[10px] text-red-500">{error}</span>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-4">
+          {visibleWidgets.map((widget) => (
+            <ChartWidget
+              key={widget.id}
+              widget={widget}
+              data={chartData}
+              onEdit={() => setEditingWidget(widget)}
+              onToggleVisibility={() => toggleVisibility(widget.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <AddWidgetButton onClick={() => setIsAdding(true)} />
+
+      <AddWidgetModal
+        isOpen={isAdding}
+        onAdd={addWidget}
+        onClose={() => setIsAdding(false)}
+      />
+
+      {editingWidget && (
+        <WidgetSettings
+          widget={editingWidget}
+          onUpdate={updateWidget}
+          onRemove={() => removeWidget(editingWidget.id)}
+          onClose={() => setEditingWidget(null)}
+        />
+      )}
+    </div>
+  );
+};

frontend/src/modules/dashboard/hooks/use.widget.ts

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import type { ChartType, ChartWidget } from "../types";
+
+const initialWidgets: ChartWidget[] = [
+  {
+    id: "1",
+    type: "line",
+    title: "Линии",
+    dataKey: "chart-line",
+    visible: true,
+  },
+  {
+    id: "2",
+    type: "bar",
+    title: "Столбцы",
+    dataKey: "chart-bar",
+    visible: true,
+  },
+  {
+    id: "3",
+    type: "area",
+    title: "Закрашенные линии",
+    dataKey: "chart-area",
+    visible: true,
+  },
+  {
+    id: "4",
+    type: "pie",
+    title: "Круговая диаграмма",
+    dataKey: "chart-pie",
+    visible: true,
+  },
+];
+
+export const useWidgets = () => {
+  const [widgets, setWidgets] = useState<ChartWidget[]>(initialWidgets);
+
+  const addWidget = (data: {
+    type: ChartType;
+    title: string;
+    dataKey: string;
+  }) => {
+    const newWidget: ChartWidget = {
+      id: Date.now().toString(),
+      ...data,
+      visible: true,
+    };
+    setWidgets([...widgets, newWidget]);
+  };
+
+  const updateWidget = (updated: ChartWidget) => {
+    setWidgets(widgets.map((w) => (w.id === updated.id ? updated : w)));
+  };
+
+  const removeWidget = (id: string) => {
+    setWidgets(widgets.filter((w) => w.id !== id));
+  };
+
+  const toggleVisibility = (id: string) => {
+    setWidgets(
+      widgets.map((w) => (w.id === id ? { ...w, visible: !w.visible } : w)),
+    );
+  };
+
+  return {
+    widgets,
+    addWidget,
+    updateWidget,
+    removeWidget,
+    toggleVisibility,
+  };
+};

frontend/src/modules/dashboard/store/dashboard.store.ts

@@ -0,0 +1,129 @@
+import { create } from "zustand";
+import { apiService } from "@/shared/api/api.service";
+import type { MetricData } from "../types";
+
+interface DashboardState {
+  chartData: MetricData[];
+  loading: boolean;
+  error: string | null;
+  fetchMetrics: (
+    isLatest: boolean,
+    token: string,
+    queryParams?: string,
+    extraParams?: Record<string, string>,
+  ) => Promise<void>;
+  clearData: () => void;
+}
+
+export const useDashboardStore = create<DashboardState>((set, get) => {
+  const convertPrimaryData = (response: any) => {
+    set((state) => {
+      if (!response.intervals || !Array.isArray(response.intervals))
+        return { chartData: state.chartData };
+
+      const newData = [...state.chartData];
+
+      response.intervals.forEach((interval: any) => {
+        const newPoint: MetricData = {
+          timestamp: new Date(interval.timestamp).toLocaleTimeString(),
+        };
+
+        if (interval.group_by && Array.isArray(interval.group_by)) {
+          interval.group_by.forEach((item: any) => {
+            newPoint[item.value] = item.count;
+          });
+        }
+
+        newData.push(newPoint);
+      });
+
+      return { chartData: newData.slice(-20) };
+    });
+  };
+
+  const convertSingleData = (response: any) => {
+    set((state) => {
+      const newPoint: MetricData = {
+        timestamp: new Date().toLocaleTimeString(),
+      };
+
+      if (Array.isArray(response)) {
+        response.forEach((item: any) => {
+          newPoint[item.value] = item.count;
+        });
+      } else if (response.groupBy && Array.isArray(response.groupBy)) {
+        response.groupBy.forEach((item: any) => {
+          newPoint[item.value] = item.count;
+        });
+      }
+
+      const updatedData = [...state.chartData, newPoint].slice(-20);
+      return { chartData: updatedData };
+    });
+  };
+
+  const fetchMetrics = async (
+    isLatest: boolean,
+    token: string,
+    queryParams?: string,
+    extraParams?: Record<string, string>,
+  ) => {
+    set({ loading: true, error: null });
+
+    try {
+      let endpoint = isLatest
+        ? "logs/aggregations/latest"
+        : "logs/aggregations";
+
+      // Если есть queryParams, добавляем его к эндпоинту
+      if (queryParams && queryParams.trim() !== "") {
+        endpoint = `${endpoint}?${queryParams}`;
+      }
+
+      const params: Record<string, string> = {
+        agg: "count",
+        groupby: "level",
+        ...extraParams,
+      };
+
+      const result = await apiService.get<any>(endpoint, {
+        params,
+        headers: {
+          Authorization: `bearer ${token}`,
+        },
+      });
+
+      if (result) {
+        if (isLatest) {
+          convertSingleData(result);
+        } else {
+          convertPrimaryData(result);
+        }
+      }
+    } catch (error) {
+      console.error(
+        `Failed to fetch ${isLatest ? "latest" : "primary"} metrics:`,
+        error,
+      );
+      set({
+        error: error instanceof Error ? error.message : "Ошибка запроса",
+      });
+    } finally {
+      set({ loading: false });
+    }
+  };
+
+  const clearData = () => {
+    set({ chartData: [], error: null });
+  };
+
+  return {
+    chartData: [],
+    loading: false,
+    error: null,
+    fetchMetrics,
+    clearData,
+    setChartData: (data: MetricData[]) =>
+      set({ chartData: data, loading: false }),
+  };
+});

frontend/src/modules/dashboard/types.ts

@@ -0,0 +1,22 @@
+export type ChartType = "line" | "bar" | "area" | "pie";
+
+export interface ChartWidget {
+  id: string;
+  type: ChartType;
+  title: string;
+  dataKey: string;
+  visible: boolean;
+}
+
+export interface MetricData {
+  timestamp: string;
+  [key: string]: number | string;
+}
+
+export interface StatsItem {
+  label: string;
+  key: string;
+  icon: string;
+  color: string;
+  suffix?: string;
+}

frontend/src/modules/graph/Graph.tsx

@@ -0,0 +1,104 @@
+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,
+  GraphStats,
+} 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 [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 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 });
+  };
+
+  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="p-4 h-full flex flex-col"
+      style={{ backgroundColor: "var(--card-bg)" }}
+    >
+      {/* Статистика сверху */}
+      <GraphStats data={data} />
+
+      {/* Граф */}
+      <div
+        className="flex-1 rounded-lg overflow-hidden relative mt-2"
+        style={{ border: "1px solid var(--border)" }}
+      >
+        <ForceGraph
+          ref={fgRef}
+          data={data}
+          onNodeRightClick={handleNodeRightClick}
+        />
+
+        <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,229 @@
+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";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
+
+interface ForceGraphProps {
+  data: GraphData;
+  onNodeRightClick: (node: GraphNode, event: MouseEvent) => void;
+}
+
+export const ForceGraph = forwardRef<any, ForceGraphProps>(
+  ({ data, onNodeRightClick }, 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 theme = useThemeStore((s) => s.theme);
+    const isDark = theme === "dark";
+
+    // Определяем цвета текста в зависимости от темы
+    const nodeTextColor = isDark ? "#e5e7eb" : "#1f2937";
+    const nodeTextLetterColor = isDark ? "#ffffff" : "#000000";
+
+    // ResizeObserver для корректного отслеживания размеров
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const updateDimensions = () => {
+        setDimensions({
+          width: container.clientWidth,
+          height: container.clientHeight,
+        });
+      };
+
+      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);
+        }
+      }
+    }, []);
+
+    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 (selectedNode?.id === node.id && isLinkMode) return "#f97316";
+
+      if (node.type === "service" && node.status === "down") {
+        // Проверяем, есть ли зависимости этого сервиса, которые тоже упали
+        const hasDownDependency = data.links.some((link) => {
+          const sourceId =
+            typeof link.source === "object"
+              ? (link.source as any).id
+              : link.source;
+          const targetId =
+            typeof link.target === "object"
+              ? (link.target as any).id
+              : link.target;
+
+          if (sourceId !== node.id) return false;
+
+          const isDependency =
+            link.type === "dependency" || link.type === "started";
+          const targetIsDown = data.nodes.some(
+            (n) => n.id === targetId && n.status === "down",
+          );
+
+          return isDependency && targetIsDown;
+        });
+
+        // Если есть упавшая зависимость — не подсвечиваем красным
+        if (hasDownDependency) return "#3b82f6";
+        return "#ef4444";
+      }
+
+      if (node.type === "agent") {
+        // Проверяем, есть ли у агента хотя бы один упавший сервис
+        const hasDownService = data.nodes.some(
+          (n) =>
+            n.type === "service" &&
+            n.status === "down" &&
+            n.id.startsWith(`${node.id}-`),
+        );
+        if (hasDownService) return "#ef4444";
+      }
+
+      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 = nodeTextLetterColor;
+      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 = nodeTextColor;
+        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 handleEngineStop = () => {
+      if (typeof ref !== "function" && ref && "current" in ref && ref.current) {
+        ref.current.zoomToFit(400);
+      }
+    };
+
+    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}
+          onNodeHover={handleNodeHover}
+          cooldownTicks={50}
+          cooldownTime={2000}
+          d3AlphaDecay={0.03}
+          d3VelocityDecay={0.4}
+          warmupTicks={50}
+          onEngineStop={handleEngineStop}
+        />
+      </div>
+    );
+  },
+);
+
+ForceGraph.displayName = "ForceGraph";

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { FiLink, FiTrash2 } from "react-icons/fi";
+import type { ContextMenuState, GraphNode, 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 toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
+  const setSelectedNode = useGraphStore((s) => s.setSelectedNode);
+
+  if (!menu) return null;
+
+  const handleDeleteNode = (node: GraphNode) => {
+    removeNode(node.id);
+    onClose();
+  };
+
+  const handleCreateLink = (node: GraphNode) => {
+    toggleLinkMode();
+    setSelectedNode(node);
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed rounded-lg shadow-lg py-1 z-50"
+      style={{
+        top: menu.y,
+        left: menu.x,
+        backgroundColor: "var(--card-bg)",
+        border: "1px solid var(--border)",
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {menu.node && (
+        <>
+          <div
+            className="px-3 py-1 text-xs border-b"
+            style={{
+              color: "var(--text-secondary)",
+              borderColor: "var(--border)",
+            }}
+          >
+            {menu.node.name}
+          </div>
+          <button
+            onClick={() => handleCreateLink(menu.node!)}
+            className="w-full text-left px-4 py-2 text-sm flex items-center gap-2"
+            style={{ color: "var(--text-primary)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "var(--bg-secondary)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
+          >
+            <FiLink size={14} /> Создать связь
+          </button>
+          <button
+            onClick={() => handleDeleteNode(menu.node!)}
+            className="w-full text-left px-4 py-2 text-sm flex items-center gap-2"
+            style={{ color: "#f87171" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "rgba(248,113,113,0.1)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
+          >
+            <FiTrash2 size={14} /> Удалить узел
+          </button>
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,105 @@
+import React from "react";
+import {
+  FiDownload,
+  FiZoomIn,
+  FiZoomOut,
+  FiMove,
+  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;
+}
+
+const btnStyle: React.CSSProperties = {
+  backgroundColor: "var(--bg-secondary)",
+  color: "var(--text-primary)",
+};
+
+export const GraphControls: React.FC<GraphControlsProps> = ({
+  fgRef,
+  onExport,
+  onDataChange,
+}) => {
+  const isLinkMode = useGraphStore((s) => s.isLinkMode);
+  const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
+  const exportData = useGraphStore((s) => s.exportData);
+
+  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-end gap-2 mt-2">
+      {/* Режим создания связи */}
+      {/* <button
+        onClick={toggleLinkMode}
+        className="flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
+        style={{
+          backgroundColor: isLinkMode ? "#22c55e" : "var(--bg-secondary)",
+          color: isLinkMode ? "#fff" : "var(--text-primary)",
+        }}
+      >
+        <FiLink />
+        <span>{isLinkMode ? "Создание связи..." : "Добавить связь"}</span>
+      </button> */}
+
+      {/* Зум + */}
+      <button
+        onClick={handleZoomIn}
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
+      >
+        <FiZoomIn />
+      </button>
+
+      {/* Зум - */}
+      <button
+        onClick={handleZoomOut}
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
+      >
+        <FiZoomOut />
+      </button>
+
+      {/* Fit */}
+      <button
+        onClick={handleFit}
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
+      >
+        <FiMove />
+      </button>
+
+      {/* Экспорт */}
+      <button
+        onClick={onExport || exportData}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
+        style={btnStyle}
+      >
+        <FiDownload />
+        <span>Экспорт</span>
+      </button>
+    </div>
+  );
+};

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

@@ -0,0 +1,27 @@
+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"
+      style={{ color: "var(--text-secondary)" }}
+    >
+      <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 rounded-sm"
+          style={{ backgroundColor: "var(--text-muted)" }}
+        ></div>
+        <span>Связи: {data.links.length}</span>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,27 @@
+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 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2"
+      style={{ backgroundColor: "#22c55e" }}
+    >
+      <FiLink /> Режим создания связей: кликните на два узла для соединения
+      {selectedNode && (
+        <span className="ml-2">Выбран: {selectedNode.name}</span>
+      )}
+    </div>
+  );
+};

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

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

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,50 @@
+export interface GraphNode {
+  id: string;
+  name: string;
+  type: "agent" | "service";
+  val?: number;
+  description?: string;
+  x?: number;
+  y?: number;
+  status?: "up" | "down";
+}
+
+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;
+}
+
+// API response types for GET /graph
+export interface GraphDependencyTarget {
+  name: string;
+}
+
+export interface GraphDependency {
+  condition: string;
+  target: GraphDependencyTarget;
+}
+
+export interface GraphServiceNode {
+  dependencies: GraphDependency[];
+}
+
+export interface GraphAgentNode {
+  services: Record<string, GraphServiceNode>;
+}
+
+export interface GraphApiResponse {
+  nodes: Record<string, GraphAgentNode>;
+}

frontend/src/modules/ide/IDE.tsx

@@ -13,35 +13,90 @@ import {
   TitleBar,
   StatusBar,
 } from "./components";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
 
 interface IDEProps {
   initialFiles?: FileNode;
   onBack?: () => void;
 }
 
+const darkColors = {
+  bg: "#1e1e1e",
+  bgSecondary: "#252526",
+  bgTertiary: "#2d2d30",
+  border: "#3e3e42",
+  textPrimary: "#cccccc",
+  textSecondary: "#858585",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
+const lightColors = {
+  bg: "#ffffff",
+  bgSecondary: "#f3f3f3",
+  bgTertiary: "#e8e8e8",
+  border: "#e0e0e0",
+  textPrimary: "#333333",
+  textSecondary: "#616161",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
 export const IDE: React.FC<IDEProps> = ({
   initialFiles: externalFiles,
   onBack,
 }: IDEProps = {}) => {
+  const theme = useThemeStore((s) => s.theme);
+  const isDark = theme === "dark";
+  const c = isDark ? darkColors : lightColors;
+
   const files = useIDEStore((state) => state.files);
   const openFiles = useIDEStore((state) => state.openFiles);
   const activeFile = useIDEStore((state) => state.activeFile);
   const createNewProject = useIDEStore((state) => state.createNewProject);
   const selectFile = useIDEStore((state) => state.selectFile);
   const updateFileContent = useIDEStore((state) => state.updateFileContent);
+  const saveActiveFile = useIDEStore((state) => state.saveActiveFile);
   const closeFile = useIDEStore((state) => state.closeFile);
   const closeAllFiles = useIDEStore((state) => state.closeAllFiles);
   const closeOtherFiles = useIDEStore((state) => state.closeOtherFiles);
   const initialize = useIDEStore((state) => state.initialize);
   const isInitialized = useIDEStore((state) => state.isInitialized);
+  const fetchTree = useIDEStore((state) => state.fetchTree);
+  const fetchInterpreters = useIDEStore((state) => state.fetchInterpreters);
 
-  // Инициализация файлов
+  // Загружаем интерпретаторы при инициализации
+  useEffect(() => {
+    fetchInterpreters();
+  }, []);
+
+  // Обработка Ctrl+S
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        saveActiveFile();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [saveActiveFile]);
+
+  // При загрузке пробуем загрузить дерево с сервера
   useEffect(() => {
     if (!isInitialized) {
-      const filesToInit = externalFiles || defaultInitialFiles;
+      fetchTree().catch(() => {
-      initialize(filesToInit);
+        // Только при ошибке — используем моковые данные
+        const state = useIDEStore.getState();
+        if (!state.files) {
+          const filesToInit = externalFiles || defaultInitialFiles;
+          initialize(filesToInit);
+        }
+      });
     }
-  }, [isInitialized, externalFiles, initialize]);
+  }, [isInitialized]);
 
   // Если проект не открыт
   if (!files) {
@@ -51,7 +106,7 @@ export const IDE: React.FC<IDEProps> = ({
           height: "100vh",
           display: "flex",
           flexDirection: "column",
-          backgroundColor: "#1e1e1e",
+          backgroundColor: c.bg,
           fontFamily:
             "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
           position: "relative",
@@ -66,8 +121,8 @@ export const IDE: React.FC<IDEProps> = ({
               top: "40px",
               left: "12px",
               background: "transparent",
-              border: "1px solid #3e3e42",
+              border: `1px solid ${c.border}`,
-              color: "#cccccc",
+              color: c.textPrimary,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",
@@ -79,14 +134,14 @@ export const IDE: React.FC<IDEProps> = ({
               zIndex: 10,
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
               e.currentTarget.style.color = "#fff";
               e.currentTarget.style.borderColor = "#555";
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
+              e.currentTarget.style.color = c.textPrimary;
-              e.currentTarget.style.borderColor = "#3e3e42";
+              e.currentTarget.style.borderColor = c.border;
             }}
             title="Go back"
           >
@@ -117,7 +172,7 @@ export const IDE: React.FC<IDEProps> = ({
               style={{
                 fontSize: "22px",
                 marginBottom: "12px",
-                color: "#cccccc",
+                color: c.textPrimary,
                 fontWeight: 300,
               }}
             >
@@ -127,7 +182,7 @@ export const IDE: React.FC<IDEProps> = ({
               style={{
                 fontSize: "13px",
                 marginBottom: "32px",
-                color: "#858585",
+                color: c.textSecondary,
               }}
             >
               Create a new project to get started
@@ -136,7 +191,7 @@ export const IDE: React.FC<IDEProps> = ({
               onClick={createNewProject}
               style={{
                 padding: "10px 24px",
-                backgroundColor: "#0e639c",
+                backgroundColor: c.accent,
                 border: "none",
                 borderRadius: "4px",
                 color: "#fff",
@@ -146,10 +201,10 @@ export const IDE: React.FC<IDEProps> = ({
                 transition: "background-color 0.1s",
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = "#1177bb";
+                e.currentTarget.style.backgroundColor = c.accentHover;
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "#0e639c";
+                e.currentTarget.style.backgroundColor = c.accent;
               }}
             >
               <MdAdd size={14} /> New Project
@@ -168,7 +223,7 @@ export const IDE: React.FC<IDEProps> = ({
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        backgroundColor: "#1e1e1e",
+        backgroundColor: c.bg,
         fontFamily:
           "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
       }}
@@ -176,14 +231,14 @@ export const IDE: React.FC<IDEProps> = ({
       <div
         style={{
           height: "30px",
-          backgroundColor: "#323233",
+          backgroundColor: c.bgTertiary,
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
           padding: "0 8px",
-          borderBottom: "1px solid #1e1e1e",
+          borderBottom: `1px solid ${c.bg}`,
           fontSize: "12px",
-          color: "#cccccc",
+          color: c.textPrimary,
           userSelect: "none",
           flexShrink: 0,
         }}
@@ -194,7 +249,7 @@ export const IDE: React.FC<IDEProps> = ({
             style={{
               background: "transparent",
               border: "none",
-              color: "#cccccc",
+              color: c.textPrimary,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",
@@ -205,12 +260,12 @@ export const IDE: React.FC<IDEProps> = ({
               transition: "all 0.1s",
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
               e.currentTarget.style.color = "#fff";
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
+              e.currentTarget.style.color = c.textPrimary;
             }}
             title="Go back"
           >
@@ -220,10 +275,30 @@ export const IDE: React.FC<IDEProps> = ({
         )}
         {!onBack && <div />}
         <span style={{ fontWeight: 400 }}>
-          {activeFile ? `${activeFile.name} - ` : ""}
+          {activeFile
+            ? `${activeFile.name}${activeFile.dirty ? " •" : ""} - `
+            : ""}
           {files.name}
         </span>
-        <div style={{ width: 60 }} />
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          {activeFile?.dirty && (
+            <button
+              onClick={saveActiveFile}
+              style={{
+                background: "transparent",
+                border: "none",
+                color: c.textPrimary,
+                cursor: "pointer",
+                fontSize: "11px",
+                padding: "4px 8px",
+                borderRadius: "4px",
+              }}
+              title="Сохранить (Ctrl+S)"
+            >
+              Сохранить
+            </button>
+          )}
+        </div>
       </div>
       <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
         <div style={{ width: "260px", flexShrink: 0 }}>

frontend/src/modules/ide/api/scripts.api.ts

@@ -0,0 +1,138 @@
+import { apiClient } from "@/shared/api/axios.instance";
+import type { Interpreter } from "../types";
+
+export interface ScriptNodeDto {
+  id: number;
+  name: string;
+  type: "file" | "folder";
+  content?: string;
+  children?: string[];
+  interpreter_id?: number;
+}
+
+export interface ScriptResponse {
+  id: number;
+  content: string;
+  interpreter_id: number;
+  path: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateScriptPayload {
+  content: string;
+  interpreter_id: number;
+  path: string;
+}
+
+export interface UpdateScriptPayload {
+  content: string;
+  interpreter_id: number;
+  path: string;
+}
+
+export interface RunScriptPayload {
+  stdin?: string;
+  token: string;
+}
+
+export interface RunScriptResponse {
+  command: string[];
+  id: number;
+  wait_url: string;
+}
+
+export interface CreateInterpreterPayload {
+  argv: string[];
+  label: string;
+  name: string;
+}
+
+export interface JobWaitResponse {
+  command: string[];
+  id: number;
+  status: number;
+  stderr: string;
+  stdin: string;
+  stdout: string;
+}
+
+// apiClient уже имеет интерсептор для Authorization header
+export const scriptsApi = {
+  getInterpreters: async (): Promise<Interpreter[]> => {
+    const res = await apiClient.get<Interpreter[]>("/scripts/interpreters");
+    return res.data;
+  },
+
+  getTree: async (): Promise<ScriptNodeDto[]> => {
+    const res = await apiClient.get<ScriptNodeDto[]>("/scripts/tree");
+    return res.data;
+  },
+
+  createScript: async (
+    payload: CreateScriptPayload,
+  ): Promise<ScriptResponse> => {
+    const res = await apiClient.post<ScriptResponse>("/scripts", payload);
+    return res.data;
+  },
+
+  updateScript: async (
+    id: number,
+    payload: UpdateScriptPayload,
+  ): Promise<ScriptResponse> => {
+    const res = await apiClient.put<ScriptResponse>(`/scripts/${id}`, payload);
+    return res.data;
+  },
+
+  deleteScript: async (id: number): Promise<void> => {
+    await apiClient.delete(`/scripts/${id}`);
+  },
+
+  createFolder: async (path: string): Promise<{ path: string }> => {
+    const res = await apiClient.post<{ path: string }>("/scripts/folder", {
+      path,
+    });
+    return res.data;
+  },
+
+  deleteFolder: async (path: string): Promise<void> => {
+    await apiClient.delete(`/scripts/folder`, { data: { path } });
+  },
+
+  rename: async (payload: {
+    old_path: string;
+    new_path: string;
+  }): Promise<{ path: string }> => {
+    const res = await apiClient.post<{ path: string }>(
+      "/scripts/rename",
+      payload,
+    );
+    return res.data;
+  },
+
+  runScript: async (
+    id: number,
+    payload: RunScriptPayload,
+  ): Promise<RunScriptResponse> => {
+    const res = await apiClient.post<RunScriptResponse>(
+      `/scripts/${id}/run`,
+      payload,
+    );
+    return res.data;
+  },
+
+  waitJob: async (id: number): Promise<JobWaitResponse> => {
+    const res = await apiClient.post<JobWaitResponse>(`/jobs/${id}/wait`);
+    return res.data;
+  },
+
+  createInterpreter: async (
+    payload: CreateInterpreterPayload,
+  ): Promise<Interpreter> => {
+    const res = await apiClient.post<Interpreter>(
+      "/scripts/interpreters",
+      payload,
+    );
+    return res.data;
+  },
+};

frontend/src/modules/ide/components/AddInterpreterModal.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useRef } from "react";
+import { MdClose, MdAdd } from "react-icons/md";
+import { scriptsApi } from "../api/scripts.api";
+import type { CreateInterpreterPayload } from "../api/scripts.api";
+
+interface AddInterpreterModalProps {
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export const AddInterpreterModal: React.FC<AddInterpreterModalProps> = ({
+  onClose,
+  onSuccess,
+}) => {
+  const [name, setName] = useState("");
+  const [label, setLabel] = useState("");
+  const [argv, setArgv] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    nameRef.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !label.trim()) {
+      setError("Name and Label are required");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const payload: CreateInterpreterPayload = {
+        name: name.trim(),
+        label: label.trim(),
+        argv: argv
+          .split(" ")
+          .map((s) => s.trim())
+          .filter(Boolean),
+      };
+
+      await scriptsApi.createInterpreter(payload);
+      onSuccess();
+      onClose();
+    } catch (e: any) {
+      console.error("Failed to create interpreter:", e);
+      setError(e?.response?.data?.detail || "Failed to create interpreter");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "var(--card-bg)",
+          border: "1px solid var(--border)",
+          borderRadius: "8px",
+          width: "420px",
+          maxWidth: "90vw",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "16px 20px",
+            borderBottom: "1px solid var(--border)",
+          }}
+        >
+          <h3
+            style={{
+              margin: 0,
+              color: "var(--text-primary)",
+              fontSize: "14px",
+              fontWeight: 600,
+            }}
+          >
+            Add Interpreter
+          </h3>
+          <button
+            onClick={onClose}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "var(--text-secondary)",
+              cursor: "pointer",
+              padding: "4px",
+              borderRadius: "4px",
+              display: "flex",
+            }}
+          >
+            <MdClose size={18} />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} style={{ padding: "20px" }}>
+          {/* Name */}
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                color: "var(--text-secondary)",
+                fontSize: "12px",
+                marginBottom: "6px",
+              }}
+            >
+              Name <span style={{ color: "#f44747" }}>*</span>
+            </label>
+            <input
+              ref={nameRef}
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Python, Node.js, etc."
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "4px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+
+          {/* Label */}
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                color: "var(--text-secondary)",
+                fontSize: "12px",
+                marginBottom: "6px",
+              }}
+            >
+              Label <span style={{ color: "#f44747" }}>*</span>
+            </label>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="python3, node, etc."
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "4px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+
+          {/* Args */}
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                color: "var(--text-secondary)",
+                fontSize: "12px",
+                marginBottom: "6px",
+              }}
+            >
+              Arguments <span style={{ color: "#858585" }}>(optional)</span>
+            </label>
+            <input
+              type="text"
+              value={argv}
+              onChange={(e) => setArgv(e.target.value)}
+              placeholder="-u -O (space separated)"
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "4px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+
+          {/* Error */}
+          {error && (
+            <div
+              style={{
+                padding: "8px 12px",
+                backgroundColor: "rgba(244, 71, 71, 0.1)",
+                border: "1px solid #f44747",
+                borderRadius: "4px",
+                color: "#f44747",
+                fontSize: "12px",
+                marginBottom: "16px",
+              }}
+            >
+              {error}
+            </div>
+          )}
+
+          {/* Submit button */}
+          <button
+            type="submit"
+            disabled={loading}
+            style={{
+              width: "100%",
+              padding: "10px",
+              backgroundColor: loading ? "#555" : "#0e639c",
+              border: "none",
+              borderRadius: "4px",
+              color: "#ffffff",
+              fontSize: "13px",
+              fontWeight: 500,
+              cursor: loading ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+            }}
+          >
+            {loading ? (
+              <>
+                <span
+                  style={{
+                    display: "inline-block",
+                    animation: "spin 1s linear infinite",
+                  }}
+                >
+                  ⏳
+                </span>
+                Creating...
+              </>
+            ) : (
+              <>
+                <MdAdd size={16} />
+                Add Interpreter
+              </>
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/modules/ide/components/FileExplorer.tsx

@@ -46,6 +46,10 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
   const handleEmptyContextMenu = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
+    // Загружаем интерпретаторы перед открытием меню
+    if (store.interpreters.length === 0) {
+      store.fetchInterpreters();
+    }
     store.setContextMenu({ x: e.clientX, y: e.clientY, node: null });
   };
 
@@ -55,9 +59,18 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
     store.setContextMenu({ x: e.clientX, y: e.clientY, node });
   };
 
+  // Загружаем интерпретаторы при монтировании компонента
+  useEffect(() => {
+    if (store.interpreters.length === 0) {
+      store.fetchInterpreters();
+    }
+  }, []);
+
   const filteredFiles = store.searchQuery
-    ? filterTree(files, store.searchQuery)
+    ? (files.children || [])
-    : files;
+        .map((child) => filterTree(child, store.searchQuery))
+        .filter((child): child is FileNode => child !== null)
+    : files.children || [];
 
   useEffect(() => {
     if (store.searchQuery && files) {
@@ -185,29 +198,6 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
         </div>
       </div>
 
-      <div
-        style={{
-          padding: "6px 12px",
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          borderBottom: "1px solid #3e3e42",
-        }}
-      >
-        <FiFolder size={14} color="#858585" />
-        <span
-          style={{
-            color: "#cccccc",
-            fontWeight: 600,
-            fontSize: "11px",
-            letterSpacing: "0.3px",
-            flex: 1,
-          }}
-        >
-          {files.name}
-        </span>
-      </div>
-
       {showSearch && (
         <div style={{ padding: "6px 8px", borderBottom: "1px solid #3e3e42" }}>
           <div
@@ -262,19 +252,21 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
       )}
 
       <div style={{ flex: 1, overflowY: "auto" }}>
-        {filteredFiles ? (
+        {filteredFiles.length > 0 ? (
-          <FileTreeItem
+          filteredFiles.map((child, idx) => (
-            node={filteredFiles}
+            <FileTreeItem
-            level={0}
+              key={idx}
-            onFileSelect={store.selectFile}
+              node={child}
-            selectedFile={store.activeFile?.path || null}
+              level={0}
-            onContextMenu={handleNodeContextMenu}
+              onFileSelect={store.selectFile}
-            expandedFolders={store.expandedFolders}
+              selectedFile={store.activeFile?.path || null}
-            onToggleFolder={store.toggleFolder}
+              onContextMenu={handleNodeContextMenu}
-            onDelete={store.handleDeleteNode}
+              expandedFolders={store.expandedFolders}
-            isRoot
+              onToggleFolder={store.toggleFolder}
-            searchQuery={store.searchQuery}
+              onDelete={store.handleDeleteNode}
-          />
+              searchQuery={store.searchQuery}
+            />
+          ))
         ) : (
           <div
             style={{
@@ -339,8 +331,13 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
               ? store.dialog.node.name
               : ""
           }
-          onConfirm={store.handleDialogConfirm}
+          onConfirm={(value, interpreterId) => {
+            store.handleDialogConfirm(value, interpreterId);
+          }}
           onCancel={() => store.setDialog(null)}
+          interpreters={
+            store.dialog.type === "newFile" ? store.interpreters : undefined
+          }
         />
       )}
     </div>

frontend/src/modules/ide/components/FilePicker.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import type { FileNode } from "../types";
+import { FilePickerItem } from "./FilePickerItem";
+import { useFilePickerStore } from "../store/useFilePickerStore";
+import { TerminalOutput } from "@/modules/terminal";
+import { useTerminalStore } from "@/modules/terminal/store/useTerminalStore";
+
+interface FilePickerProps {
+  files: FileNode;
+  onRun?: (path: string) => void;
+}
+
+const FilePickerTree: React.FC<{
+  node: FileNode;
+  level: number;
+  onRun?: (path: string) => void;
+}> = ({ node, level, onRun }) => {
+  const expandedFolders = useFilePickerStore((s) => s.expandedFolders);
+  const toggleFolder = useFilePickerStore((s) => s.toggleFolder);
+
+  const nodePath = node.path || node.name;
+  const isExpanded = expandedFolders.has(nodePath);
+
+  if (node.type === "file") {
+    return (
+      <FilePickerItem
+        name={node.name}
+        type="file"
+        path={nodePath}
+        level={level}
+        onRun={onRun}
+      />
+    );
+  }
+
+  return (
+    <>
+      <FilePickerItem
+        name={node.name}
+        type="folder"
+        path={nodePath}
+        isExpanded={isExpanded}
+        level={level}
+        onToggleFolder={toggleFolder}
+      >
+        {node.children?.map((child, idx) => (
+          <FilePickerTree
+            key={idx}
+            node={child}
+            level={level + 1}
+            onRun={onRun}
+          />
+        ))}
+      </FilePickerItem>
+    </>
+  );
+};
+
+export const FilePicker: React.FC<FilePickerProps> = ({ files, onRun }) => {
+  const terminalOpen = useTerminalStore((s) => s.isOpen);
+  const jobs = useTerminalStore((s) => s.jobs);
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        overflowY: "auto",
+        backgroundColor: "var(--bg-primary)",
+      }}
+    >
+      {/* Terminal — сверху, над списком файлов */}
+      {terminalOpen && jobs.length > 0 && (
+        <div style={{ height: 250 }}>
+          <TerminalOutput />
+        </div>
+      )}
+
+      {(files.children || []).map((child, idx) => (
+        <FilePickerTree key={idx} node={child} level={0} onRun={onRun} />
+      ))}
+    </div>
+  );
+};

frontend/src/modules/ide/components/FilePickerItem.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import {
+  FiChevronRight,
+  FiChevronDown,
+  FiFile,
+  FiFolder,
+  FiPlay,
+} from "react-icons/fi";
+
+interface FilePickerItemProps {
+  name: string;
+  type: "file" | "folder";
+  path: string;
+  isExpanded?: boolean;
+  children?: React.ReactNode;
+  level: number;
+  onToggleSelect?: (path: string) => void;
+  onToggleFolder?: (path: string) => void;
+  onRun?: (path: string) => void;
+}
+
+export const FilePickerItem: React.FC<FilePickerItemProps> = ({
+  name,
+  type,
+  path,
+  isExpanded,
+  children,
+  level,
+  onToggleSelect,
+  onToggleFolder,
+  onRun,
+}) => {
+  const isFolder = type === "folder";
+  const extension = name.includes(".")
+    ? name.split(".").pop()?.toUpperCase()
+    : "";
+  const paddingLeft = 12 + level * 20;
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: `${paddingLeft}px`,
+          paddingRight: "12px",
+          height: "36px",
+          borderBottom: "1px solid var(--border)",
+          cursor: "pointer",
+          transition: "background-color 0.1s",
+          gap: "8px",
+        }}
+        onClick={() => {
+          if (isFolder && onToggleFolder) {
+            onToggleFolder(path);
+          } else if (!isFolder && onToggleSelect) {
+            onToggleSelect(path);
+          }
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        }}
+      >
+        {/* Folder expand icon */}
+        {isFolder && (
+          <span
+            style={{
+              color: "var(--text-secondary)",
+              display: "flex",
+              flexShrink: 0,
+            }}
+          >
+            {isExpanded ? (
+              <FiChevronDown size={14} />
+            ) : (
+              <FiChevronRight size={14} />
+            )}
+          </span>
+        )}
+
+        {/* File/Folder icon */}
+        <span style={{ display: "flex", flexShrink: 0 }}>
+          {isFolder ? (
+            <FiFolder size={15} color="var(--accent)" />
+          ) : (
+            <FiFile size={15} color="var(--text-secondary)" />
+          )}
+        </span>
+
+        {/* Name */}
+        <span
+          style={{
+            flex: 1,
+            color: "var(--text-primary)",
+            fontSize: "13px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {name}
+        </span>
+
+        {/* Extension badge — только у файлов */}
+        {!isFolder && extension && (
+          <span
+            style={{
+              color: "var(--text-secondary)",
+              fontSize: "11px",
+              fontFamily: "monospace",
+              padding: "2px 6px",
+              backgroundColor: "var(--bg-secondary)",
+              borderRadius: "3px",
+              flexShrink: 0,
+            }}
+          >
+            {extension}
+          </span>
+        )}
+
+        {/* Run button — только у файлов */}
+        {!isFolder && onRun && (
+          <button
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "4px",
+              backgroundColor: "transparent",
+              border: "1px solid transparent",
+              borderRadius: "3px",
+              color: "var(--text-secondary)",
+              cursor: "pointer",
+              flexShrink: 0,
+              transition: "all 0.15s",
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onRun(path);
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#238636";
+              e.currentTarget.style.color = "#ffffff";
+              e.currentTarget.style.borderColor = "#2ea043";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.color = "var(--text-secondary)";
+              e.currentTarget.style.borderColor = "transparent";
+            }}
+            title="Run script"
+          >
+            <FiPlay size={12} />
+          </button>
+        )}
+      </div>
+
+      {/* Children */}
+      {isFolder && isExpanded && children}
+    </div>
+  );
+};

frontend/src/modules/ide/components/InputDialog.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useRef, useEffect } from "react";
+import type { Interpreter } from "../types";
 
 interface InputDialogProps {
   title: string;
   initialValue?: string;
-  onConfirm: (value: string) => void;
+  onConfirm: (value: string, interpreterId?: number) => void;
   onCancel: () => void;
+  interpreters?: Interpreter[];
 }
 
 export const InputDialog: React.FC<InputDialogProps> = ({
@@ -12,8 +14,12 @@ export const InputDialog: React.FC<InputDialogProps> = ({
   initialValue = "",
   onConfirm,
   onCancel,
+  interpreters,
 }) => {
   const [value, setValue] = useState(initialValue);
+  const [interpreterId, setInterpreterId] = useState<number | undefined>(
+    interpreters?.[0]?.id,
+  );
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -21,6 +27,8 @@ export const InputDialog: React.FC<InputDialogProps> = ({
     inputRef.current?.select();
   }, []);
 
+  const showInterpreterDropdown = interpreters && interpreters.length > 0;
+
   return (
     <div
       style={{
@@ -59,7 +67,7 @@ export const InputDialog: React.FC<InputDialogProps> = ({
           {title}
         </h3>
         <p style={{ margin: "0 0 16px 0", color: "#858585", fontSize: "12px" }}>
-          Enter a new name
+          Enter a name
         </p>
         <input
           ref={inputRef}
@@ -67,7 +75,9 @@ export const InputDialog: React.FC<InputDialogProps> = ({
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onKeyDown={(e) =>
-            e.key === "Enter" && value.trim() && onConfirm(value.trim())
+            e.key === "Enter" &&
+            value.trim() &&
+            onConfirm(value.trim(), interpreterId)
           }
           style={{
             width: "100%",
@@ -77,10 +87,48 @@ export const InputDialog: React.FC<InputDialogProps> = ({
             borderRadius: "6px",
             color: "#ccc",
             fontSize: "14px",
-            marginBottom: "20px",
+            marginBottom: showInterpreterDropdown ? "12px" : "20px",
             outline: "none",
           }}
         />
+
+        {/* Interpreter dropdown */}
+        {showInterpreterDropdown && (
+          <div style={{ marginBottom: "20px" }}>
+            <label
+              style={{
+                display: "block",
+                fontSize: "12px",
+                color: "#858585",
+                marginBottom: "6px",
+              }}
+            >
+              Interpreter
+            </label>
+            <select
+              value={interpreterId}
+              onChange={(e) => setInterpreterId(Number(e.target.value))}
+              style={{
+                width: "100%",
+                padding: "10px",
+                backgroundColor: "#3c3c3c",
+                border: "1px solid #3e3e42",
+                borderRadius: "6px",
+                color: "#ccc",
+                fontSize: "14px",
+                outline: "none",
+                cursor: "pointer",
+              }}
+            >
+              {interpreters.map((interp) => (
+                <option key={interp.id} value={interp.id}>
+                  {interp.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
         <div
           style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}
         >
@@ -99,7 +147,9 @@ export const InputDialog: React.FC<InputDialogProps> = ({
             Cancel
           </button>
           <button
-            onClick={() => value.trim() && onConfirm(value.trim())}
+            onClick={() =>
+              value.trim() && onConfirm(value.trim(), interpreterId)
+            }
             style={{
               padding: "6px 16px",
               backgroundColor: "#0e639c",

frontend/src/modules/ide/components/RunScriptModal.tsx

@@ -0,0 +1,302 @@
+import React, { useState, useRef, useEffect } from "react";
+import { MdClose } from "react-icons/md";
+import { scriptsApi } from "../api/scripts.api";
+import { useTerminalStore } from "@/modules/terminal/store/useTerminalStore";
+import { useAgentStore } from "@/app/providers/layout/store/agent.store";
+
+interface RunScriptModalProps {
+  scriptPath: string;
+  scriptId: number;
+  onClose: () => void;
+}
+
+export const RunScriptModal: React.FC<RunScriptModalProps> = ({
+  scriptPath,
+  scriptId,
+  onClose,
+}) => {
+  const [selectedAgentIdx, setSelectedAgentIdx] = useState(0);
+  const [stdinValue, setStdinValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLSelectElement>(null);
+
+  const agents = useAgentStore((s) => s.agents);
+  const addJob = useTerminalStore((s) => s.addJob);
+  const openTerminal = useTerminalStore((s) => s.openTerminal);
+
+  const selectedAgent = agents[selectedAgentIdx];
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleRun = async () => {
+    if (!selectedAgent) {
+      setError("No agents available");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // 1. Запускаем скрипт
+      const runResult = await scriptsApi.runScript(scriptId, {
+        stdin: stdinValue,
+        token: selectedAgent.token,
+      });
+
+      // 2. Добавляем джоб в терминал
+      addJob({
+        id: runResult.id,
+        scriptPath,
+        command: runResult.command,
+      });
+
+      // 3. Открываем терминал
+      openTerminal();
+
+      // 4. Ждём завершения по id
+      const jobResult = await scriptsApi.waitJob(runResult.id);
+
+      // 5. Обновляем существующий джоб (не создаём новый!)
+      const terminalStore = useTerminalStore.getState();
+      terminalStore.updateJob(runResult.id, {
+        command: jobResult.command,
+        stdin: jobResult.stdin,
+        status: jobResult.status,
+        stdout: jobResult.stdout,
+        stderr: jobResult.stderr,
+        isRunning: false,
+      });
+
+      onClose();
+    } catch (e: any) {
+      console.error("Failed to run script:", e);
+      setError(e?.response?.data?.detail || "Failed to run script");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "var(--card-bg)",
+          border: "1px solid var(--border)",
+          borderRadius: "8px",
+          width: "420px",
+          maxWidth: "90vw",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "16px 20px",
+            borderBottom: "1px solid var(--border)",
+          }}
+        >
+          <h3
+            style={{
+              margin: 0,
+              color: "var(--text-primary)",
+              fontSize: "14px",
+              fontWeight: 600,
+            }}
+          >
+            Run Script
+          </h3>
+          <button
+            onClick={onClose}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "var(--text-secondary)",
+              cursor: "pointer",
+              padding: "4px",
+              borderRadius: "4px",
+              display: "flex",
+            }}
+          >
+            <MdClose size={18} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style={{ padding: "20px" }}>
+          {/* Script path */}
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                color: "var(--text-secondary)",
+                fontSize: "12px",
+                marginBottom: "6px",
+              }}
+            >
+              Script
+            </label>
+            <div
+              style={{
+                padding: "8px 12px",
+                backgroundColor: "var(--bg-secondary)",
+                borderRadius: "4px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                fontFamily: "monospace",
+                border: "1px solid var(--border)",
+              }}
+            >
+              {scriptPath}
+            </div>
+          </div>
+
+          {/* Agent selector */}
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                color: "var(--text-secondary)",
+                fontSize: "12px",
+                marginBottom: "6px",
+              }}
+            >
+              Agent <span style={{ color: "#f44747" }}>*</span>
+            </label>
+            <select
+              ref={inputRef}
+              value={selectedAgentIdx}
+              onChange={(e) => setSelectedAgentIdx(Number(e.target.value))}
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "4px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+              }}
+            >
+              {agents.length === 0 && (
+                <option value="">No agents available</option>
+              )}
+              {agents.map((agent, idx) => (
+                <option key={agent.label} value={idx}>
+                  {agent.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Stdin (optional) */}
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                color: "var(--text-secondary)",
+                fontSize: "12px",
+                marginBottom: "6px",
+              }}
+            >
+              Stdin <span style={{ color: "#858585" }}>(optional)</span>
+            </label>
+            <textarea
+              value={stdinValue}
+              onChange={(e) => setStdinValue(e.target.value)}
+              placeholder="Enter input data..."
+              rows={4}
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "4px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                fontFamily: "monospace",
+                resize: "vertical",
+                outline: "none",
+              }}
+            />
+          </div>
+
+          {/* Error */}
+          {error && (
+            <div
+              style={{
+                padding: "8px 12px",
+                backgroundColor: "rgba(244, 71, 71, 0.1)",
+                border: "1px solid #f44747",
+                borderRadius: "4px",
+                color: "#f44747",
+                fontSize: "12px",
+                marginBottom: "16px",
+              }}
+            >
+              {error}
+            </div>
+          )}
+
+          {/* Run button */}
+          <button
+            onClick={handleRun}
+            disabled={loading || !selectedAgent}
+            style={{
+              width: "100%",
+              padding: "10px",
+              backgroundColor: loading || !selectedAgent ? "#555" : "#0e639c",
+              border: "none",
+              borderRadius: "4px",
+              color: "#ffffff",
+              fontSize: "13px",
+              fontWeight: 500,
+              cursor: loading || !selectedAgent ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+            }}
+          >
+            {loading ? (
+              <>
+                <span
+                  style={{
+                    display: "inline-block",
+                    animation: "spin 1s linear infinite",
+                  }}
+                >
+                  ⏳
+                </span>
+                Running...
+              </>
+            ) : (
+              <>▶ Run</>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/modules/ide/components/TabBar.tsx

@@ -106,6 +106,17 @@ export const TabBar: React.FC<TabBarProps> = ({
           >
             <GoFile />
             <span>{file.name}</span>
+            {file.dirty && (
+              <span
+                style={{
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "50%",
+                  backgroundColor: "#fbbf24",
+                  marginLeft: "-4px",
+                }}
+              />
+            )}
             <button
               onClick={(e) => {
                 e.stopPropagation();

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

@@ -6,3 +6,5 @@ export { TabBar } from "./TabBar";
 export { CodeEditor } from "./CodeEditor";
 export { TitleBar } from "./TitleBar";
 export { StatusBar } from "./StatusBar";
+export { FilePickerItem } from "./FilePickerItem";
+export { FilePicker } from "./FilePicker";

frontend/src/modules/ide/index.ts

@@ -1,3 +1,5 @@
 export { IDE } from "./IDE";
+export { FilePicker } from "./components/FilePicker";
 export { useIDEStore, initialFiles } from "./store/useIDEStore";
+export { useFilePickerStore } from "./store/useFilePickerStore";
 export type { FileNode } from "./types";

frontend/src/modules/ide/store/useFilePickerStore.ts

@@ -0,0 +1,57 @@
+import { create } from "zustand";
+
+interface FilePickerState {
+  selectedPaths: Set<string>;
+  expandedFolders: Set<string>;
+
+  toggleSelection: (path: string) => void;
+  selectAll: (paths: string[]) => void;
+  clearSelection: () => void;
+  toggleFolder: (path: string) => void;
+  getSelectedPaths: () => string[];
+}
+
+export const useFilePickerStore = create<FilePickerState>((set, get) => ({
+  selectedPaths: new Set(),
+  expandedFolders: new Set(),
+
+  toggleSelection: (path: string) => {
+    set((state) => {
+      const newSet = new Set(state.selectedPaths);
+      if (newSet.has(path)) {
+        newSet.delete(path);
+      } else {
+        newSet.add(path);
+      }
+      return { selectedPaths: newSet };
+    });
+  },
+
+  selectAll: (paths: string[]) => {
+    set((state) => {
+      const newSet = new Set(state.selectedPaths);
+      paths.forEach((p) => newSet.add(p));
+      return { selectedPaths: newSet };
+    });
+  },
+
+  clearSelection: () => {
+    set({ selectedPaths: new Set() });
+  },
+
+  toggleFolder: (path: string) => {
+    set((state) => {
+      const newSet = new Set(state.expandedFolders);
+      if (newSet.has(path)) {
+        newSet.delete(path);
+      } else {
+        newSet.add(path);
+      }
+      return { expandedFolders: newSet };
+    });
+  },
+
+  getSelectedPaths: () => {
+    return Array.from(get().selectedPaths);
+  },
+}));

frontend/src/modules/ide/store/useIDEStore.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import type { FileNode } from "../types";
+import type { FileNode, Interpreter, DialogState } from "../types";
 import {
   addPaths,
   getAllFolderPaths,
@@ -8,6 +8,7 @@ import {
   addNode,
   renameNode,
 } from "../helpers/fileTree";
+import { scriptsApi } from "../api/scripts.api";
 
 export const initialFiles: FileNode = {
   name: "my-project",
@@ -38,27 +39,30 @@ export const initialFiles: FileNode = {
   ],
 };
 
+interface IDEFileNode extends FileNode {
+  dirty?: boolean;
+}
+
 interface IDEState {
   // Файловая система
   files: FileNode | null;
-  openFiles: FileNode[];
+  openFiles: IDEFileNode[];
-  activeFile: FileNode | null;
+  activeFile: IDEFileNode | null;
   expandedFolders: Set<string>;
   searchQuery: string;
   showSearch: boolean;
   isInitialized: boolean;
+  interpreters: Interpreter[];
 
   // Диалоги и контекстные меню
   contextMenu: { x: number; y: number; node: FileNode | null } | null;
-  dialog: {
+  dialog: DialogState | null;
-    type: "newFile" | "newFolder" | "rename";
-    node: FileNode | null;
-  } | null;
   tabContextMenu: { x: number; y: number; file: FileNode } | null;
 
   // Действия с файлами
   selectFile: (node: FileNode) => void;
   updateFileContent: (content: string) => void;
+  saveActiveFile: () => Promise<void>;
   closeFile: (file: FileNode) => void;
   closeAllFiles: () => void;
   closeOtherFiles: (file: FileNode) => void;
@@ -72,6 +76,25 @@ interface IDEState {
   deleteRoot: () => void;
   createNewProject: () => void;
 
+  // Интерпретаторы
+  fetchInterpreters: () => Promise<void>;
+
+  // API методы
+  fetchTree: () => Promise<void>;
+  createScript: (payload: {
+    content: string;
+    interpreter_id: number;
+    path: string;
+  }) => Promise<void>;
+  createFolder: (path: string) => Promise<void>;
+  updateScript: (
+    id: number,
+    payload: { content: string; interpreter_id: number; path: string },
+  ) => Promise<void>;
+  deleteScript: (id: number) => Promise<void>;
+  deleteFolder: (payload: { path: string }) => Promise<void>;
+  saveActiveFile: () => Promise<void>;
+
   // Поиск
   setSearchQuery: (query: string) => void;
   toggleSearch: () => void;
@@ -94,8 +117,8 @@ interface IDEState {
   initialize: (initialFiles: FileNode) => void;
 
   // Диалог подтверждения
-  handleDialogConfirm: (value: string) => void;
+  handleDialogConfirm: (value: string, interpreterId?: number) => Promise<void>;
-  handleDeleteNode: (node: FileNode) => void;
+  handleDeleteNode: (node: FileNode) => Promise<void>;
 }
 
 export const useIDEStore = create<IDEState>((set, get) => ({
@@ -111,6 +134,7 @@ export const useIDEStore = create<IDEState>((set, get) => ({
   contextMenu: null,
   dialog: null,
   tabContextMenu: null,
+  interpreters: [],
 
   // Инициализация
   initialize: (initialFiles: FileNode) => {
@@ -125,25 +149,45 @@ export const useIDEStore = create<IDEState>((set, get) => ({
   // Выбор файла
   selectFile: (node: FileNode) => {
     if (node.type === "file") {
-      const { openFiles } = get();
+      const { openFiles, files } = get();
-      if (!openFiles.find((f) => f.path === node.path)) {
+      // Берём актуальную версию из дерева файлов
-        set((state) => ({ openFiles: [...state.openFiles, node] }));
+      const latestFile = files ? findNode(files, node.path || "") : null;
+      const fileToOpen =
+        latestFile && latestFile.type === "file" ? latestFile : node;
+
+      if (!openFiles.find((f) => f.path === fileToOpen.path)) {
+        set((state) => ({ openFiles: [...state.openFiles, fileToOpen] }));
       }
-      set({ activeFile: node });
+      set({ activeFile: fileToOpen });
     }
   },
 
   // Обновление содержимого файла
   updateFileContent: (content: string) => {
-    const { activeFile } = get();
+    const { activeFile, files } = get();
-    if (activeFile) {
+    if (activeFile && files) {
-      const updatedFile = { ...activeFile, content };
+      const updatedFile = { ...activeFile, content, dirty: true };
       set({ activeFile: updatedFile });
       set((state) => ({
         openFiles: state.openFiles.map((f) =>
           f.path === activeFile.path ? updatedFile : f,
         ),
       }));
+
+      // Обновляем также в дереве файлов
+      const updateFileInTree = (node: FileNode): FileNode => {
+        if (node.path === activeFile.path) {
+          return updatedFile;
+        }
+        if (node.children) {
+          return {
+            ...node,
+            children: node.children.map((child) => updateFileInTree(child)),
+          };
+        }
+        return node;
+      };
+      set({ files: updateFileInTree(files) });
     }
   },
 
@@ -255,6 +299,150 @@ export const useIDEStore = create<IDEState>((set, get) => ({
     });
   },
 
+  // Интерпретаторы
+  fetchInterpreters: async () => {
+    try {
+      const interpreters = await scriptsApi.getInterpreters();
+      set({ interpreters });
+    } catch (e) {
+      console.error("Failed to fetch interpreters:", e);
+    }
+  },
+
+  // API: загрузка дерева с сервера
+  fetchTree: async () => {
+    try {
+      const data = await scriptsApi.getTree();
+      const { expandedFolders } = get();
+
+      const convertItem = (item: any): FileNode => {
+        const node: FileNode = {
+          id: item.id,
+          name: item.name,
+          type: item.type === "folder" ? "folder" : "file",
+          content: item.content || "",
+          path: item.name,
+          interpreter_id: item.interpreter_id,
+        };
+
+        if (item.type === "folder") {
+          node.children = [];
+          if (item.children && Array.isArray(item.children)) {
+            node.children = item.children.map((child: any) => {
+              const childNode = convertItem(child);
+              childNode.path = `${item.name}/${child.name}`;
+              return childNode;
+            });
+          }
+        }
+
+        return node;
+      };
+
+      const roots = data.map((item) => convertItem(item));
+
+      set({
+        files: {
+          name: "scripts",
+          type: "folder",
+          children: roots,
+        },
+        expandedFolders,
+        isInitialized: true,
+      });
+    } catch (e) {
+      console.error("Failed to fetch tree:", e);
+      throw e;
+    }
+  },
+
+  // API: создание скрипта
+  createScript: async (payload) => {
+    try {
+      await scriptsApi.createScript(payload);
+      await get().fetchTree();
+    } catch (e) {
+      console.error("Failed to create script:", e);
+      throw e;
+    }
+  },
+
+  // API: создание папки
+  createFolder: async (path: string) => {
+    try {
+      await scriptsApi.createFolder(path);
+      await get().fetchTree();
+    } catch (e) {
+      console.error("Failed to create folder:", e);
+      throw e;
+    }
+  },
+
+  // API: удаление папки
+  deleteFolder: async ({ path }: { path: string }) => {
+    try {
+      const { openFiles } = get();
+
+      // Закрываем все файлы, которые находятся в удаляемой папке
+      const folderPathPrefix = path.endsWith("/") ? path : `${path}/`;
+      const filesToClose = openFiles.filter(
+        (f) => f.path === path || f.path?.startsWith(folderPathPrefix),
+      );
+      filesToClose.forEach((f) => get().closeFile(f));
+
+      await scriptsApi.deleteFolder(path);
+      await get().fetchTree();
+    } catch (e) {
+      console.error("Failed to delete folder:", e);
+      throw e;
+    }
+  },
+
+  // API: обновление скрипта
+  updateScript: async (id, payload) => {
+    try {
+      await scriptsApi.updateScript(id, payload);
+    } catch (e) {
+      console.error("Failed to update script:", e);
+      throw e;
+    }
+  },
+
+  // API: удаление скрипта
+  deleteScript: async (id) => {
+    try {
+      await scriptsApi.deleteScript(id);
+      await get().fetchTree();
+    } catch (e) {
+      console.error("Failed to delete script:", e);
+      throw e;
+    }
+  },
+
+  // API: сохранение активного файла
+  saveActiveFile: async () => {
+    const { activeFile } = get();
+    if (!activeFile || !activeFile.id) return;
+
+    try {
+      await scriptsApi.updateScript(activeFile.id, {
+        content: activeFile.content || "",
+        interpreter_id: activeFile.interpreter_id || 0,
+        path: activeFile.path || "",
+      });
+      set((state) => ({
+        activeFile: state.activeFile
+          ? { ...state.activeFile, dirty: false }
+          : null,
+        openFiles: state.openFiles.map((f) =>
+          f.path === state.activeFile?.path ? { ...f, dirty: false } : f,
+        ),
+      }));
+    } catch (e) {
+      console.error("Failed to save file:", e);
+    }
+  },
+
   // Поиск
   setSearchQuery: (query: string) => {
     set({ searchQuery: query });
@@ -270,9 +458,8 @@ export const useIDEStore = create<IDEState>((set, get) => ({
   setTabContextMenu: (menu) => set({ tabContextMenu: menu }),
 
   // Подтверждение диалога
-  handleDialogConfirm: (value: string) => {
+  handleDialogConfirm: async (value: string, interpreterId?: number) => {
-    const { dialog, files, refreshFiles, toggleFolder, autoExpandPaths } =
+    const { dialog, files, toggleFolder, autoExpandPaths } = get();
-      get();
     if (!dialog) return;
 
     if (dialog.type === "rename" && dialog.node) {
@@ -289,97 +476,166 @@ export const useIDEStore = create<IDEState>((set, get) => ({
         alert(`"${value}" already exists.`);
         return;
       }
-      const newFiles = renameNode(
+
-        files!,
+      const oldPath = dialog.node.path || dialog.node.name;
-        dialog.node.path || dialog.node.name,
+      const newPath = parentPath ? `${parentPath}/${value}` : value;
-        value,
+
-      );
+      // Сохраняем раскрытые папки
-      if (newFiles) {
+      const savedExpandedFolders = new Set(get().expandedFolders);
-        refreshFiles(newFiles);
+
+      try {
+        await scriptsApi.rename({ old_path: oldPath, new_path: newPath });
+        await get().fetchTree();
+
+        // Восстанавливаем раскрытые папки
+        set({ expandedFolders: savedExpandedFolders });
+
+        // Раскрываем родительскую цепочку
+        const allParentPaths: string[] = [];
+        let current = parentPath;
+        while (current) {
+          allParentPaths.push(current);
+          const parts = current.split("/");
+          parts.pop();
+          current = parts.join("/");
+        }
+        autoExpandPaths(new Set(allParentPaths));
+
+        // Если переименованный файл был открыт — обновим его в openFiles
+        const { openFiles, activeFile } = get();
+        const updatedOpenFiles = openFiles.map((f) =>
+          f.path === oldPath ? { ...f, name: value, path: newPath } : f,
+        );
+        set({ openFiles: updatedOpenFiles });
+
+        if (activeFile?.path === oldPath) {
+          set({ activeFile: { ...activeFile, name: value, path: newPath } });
+        }
+      } catch (e) {
+        console.error("Failed to rename:", e);
       }
+
       set({ dialog: null });
       return;
     }
 
+    // Определяем родительский путь
     let parentPath: string;
-
     if (!dialog.node) {
-      parentPath = files!.path || files!.name;
+      parentPath = "";
     } else if (dialog.node.type === "folder") {
       parentPath = dialog.node.path || dialog.node.name;
     } else {
       const pathParts = (dialog.node.path || dialog.node.name).split("/");
       pathParts.pop();
-      parentPath = pathParts.join("/") || files!.path || files!.name;
+      parentPath = pathParts.join("/");
     }
 
-    const parentNode = findNode(files!, parentPath);
+    // Проверяем наличие расширения
-    if (
+    const hasExtension =
-      parentNode?.children?.some(
+      value.includes(".") && value.split(".").pop() !== value;
-        (c) => c.name.toLowerCase() === value.toLowerCase(),
+    let finalName = value;
-      )
+    let isFile = false;
-    ) {
-      alert(`"${value}" already exists in this folder.`);
-      set({ dialog: null });
-      return;
-    }
-
-    let newFiles: FileNode | null = null;
-    let createdNode: FileNode | null = null;
 
+    // Если диалог создания файла
     if (dialog.type === "newFile") {
-      createdNode = { name: value, type: "file", content: "" };
+      isFile = true;
-      newFiles = addNode(files!, parentPath, createdNode);
+      // Если нет расширения — добавляем .txt
+      if (!hasExtension) {
+        finalName = `${value}.txt`;
+      }
     } else if (dialog.type === "newFolder") {
-      createdNode = { name: value, type: "folder", children: [] };
+      // Если диалог создания папки — но имя с расширением, считаем файлом
-      newFiles = addNode(files!, parentPath, createdNode);
+      if (hasExtension) {
+        isFile = true;
+      }
     }
 
-    if (newFiles) {
+    const fullPath = parentPath ? `${parentPath}/${finalName}` : finalName;
-      const allParentPaths: string[] = [];
+
-      let current = parentPath;
+    // Сохраняем раскрытые папки ДО перезагрузки дерева
-      while (current) {
+    const savedExpandedFolders = new Set(get().expandedFolders);
-        allParentPaths.push(current);
+
-        const parts = current.split("/");
+    try {
-        parts.pop();
+      // Создание папки
-        current = parts.join("/");
+      if (dialog.type === "newFolder" && !isFile) {
-      }
+        await scriptsApi.createFolder(fullPath);
-      allParentPaths.forEach((p) => {
+        await get().fetchTree();
-        if (!get().expandedFolders.has(p)) {
+
-          toggleFolder(p);
+        // Восстанавливаем раскрытые папки
+        set({ expandedFolders: savedExpandedFolders });
+
+        // Собираем все пути от корня до родительской папки
+        const allParentPaths: string[] = [];
+        let current = parentPath;
+        while (current) {
+          allParentPaths.push(current);
+          const parts = current.split("/");
+          parts.pop();
+          current = parts.join("/");
         }
-      });
-      autoExpandPaths(new Set(allParentPaths));
 
-      if (createdNode && createdNode.type === "file") {
+        // Раскрываем родительскую цепочку
-        const findAndOpen = (node: FileNode, name: string): FileNode | null => {
+        autoExpandPaths(new Set(allParentPaths));
-          if (node.name === name && node.type === "file") return node;
-          if (node.children) {
-            for (const child of node.children) {
-              const found = findAndOpen(child, name);
-              if (found) return found;
-            }
-          }
-          return null;
-        };
-        const openedFile = findAndOpen(newFiles, value);
-        refreshFiles(newFiles, openedFile || undefined);
       } else {
-        refreshFiles(newFiles);
+        // Создание файла
+        const result = await scriptsApi.createScript({
+          content: "",
+          interpreter_id: interpreterId || 0,
+          path: fullPath,
+        });
+
+        await get().fetchTree();
+
+        // Восстанавливаем раскрытые папки
+        set({ expandedFolders: savedExpandedFolders });
+
+        // Собираем все пути от корня до родительской папки
+        const allParentPaths: string[] = [];
+        let current = parentPath;
+        while (current) {
+          allParentPaths.push(current);
+          const parts = current.split("/");
+          parts.pop();
+          current = parts.join("/");
+        }
+
+        // Раскрываем родительскую цепочку
+        autoExpandPaths(new Set(allParentPaths));
+
+        const createdNode: FileNode = {
+          id: result.id,
+          name: finalName,
+          type: "file",
+          content: result.content,
+          path: result.path,
+          interpreter_id: result.interpreter_id,
+        };
+        get().selectFile(createdNode);
       }
+    } catch (e) {
+      console.error("Failed to create:", e);
     }
+
     set({ dialog: null });
   },
 
   // Удаление узла
-  handleDeleteNode: (node: FileNode) => {
+  handleDeleteNode: async (node: FileNode) => {
-    const { files, refreshFiles } = get();
+    const { files } = get();
     const isRootNode = node.path === files?.path;
     if (isRootNode) {
       get().deleteRoot();
     } else if (window.confirm(`Delete "${node.name}"?`)) {
-      const newFiles = deleteNode(files!, node.path || node.name);
+      try {
-      if (newFiles) refreshFiles(newFiles);
+        if (node.type === "folder") {
+          await get().deleteFolder({ path: node.path || node.name });
+        } else if (node.id) {
+          await get().deleteScript(node.id);
+        }
+      } catch (e) {
+        console.error("Failed to delete:", e);
+      }
     }
   },
 }));

frontend/src/modules/ide/types.ts

@@ -6,6 +6,15 @@ export interface FileNode {
   path?: string;
 }
 
+export interface Interpreter {
+  id: number;
+  name: string;
+  label: string;
+  argv: string[];
+  created_at: string;
+  updated_at: string;
+}
+
 export interface ContextMenuState {
   x: number;
   y: number;
@@ -15,6 +24,7 @@ export interface ContextMenuState {
 export interface DialogState {
   type: "newFile" | "newFolder" | "rename";
   node: FileNode | null;
+  interpreterId?: number;
 }
 
 export interface TabContextMenuState {

frontend/src/modules/terminal/components/TerminalOutput.tsx

@@ -0,0 +1,262 @@
+import React from "react";
+import { useTerminalStore } from "../store/useTerminalStore";
+import { MdClose, MdClearAll } from "react-icons/md";
+import { FiTerminal } from "react-icons/fi";
+
+export const TerminalOutput: React.FC = () => {
+  const {
+    jobs,
+    isOpen,
+    activeJobId,
+    closeTerminal,
+    setActiveJob,
+    clearJobs,
+    removeJob,
+  } = useTerminalStore();
+
+  if (!isOpen) return null;
+
+  const activeJob = jobs.find((j) => j.id === activeJobId) || jobs[jobs.length - 1];
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#1e1e1e",
+        borderTop: "1px solid #3e3e42",
+      }}
+    >
+      {/* Terminal header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0 12px",
+          height: "35px",
+          borderBottom: "1px solid #3e3e42",
+          backgroundColor: "#252526",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <FiTerminal size={14} color="#bbbbbb" />
+          <span
+            style={{
+              color: "#bbbbbb",
+              fontWeight: 500,
+              fontSize: "11px",
+              letterSpacing: "0.8px",
+            }}
+          >
+            TERMINAL
+          </span>
+          {jobs.length > 0 && (
+            <span
+              style={{
+                color: "#858585",
+                fontSize: "11px",
+                backgroundColor: "#3c3c3c",
+                padding: "2px 8px",
+                borderRadius: "10px",
+              }}
+            >
+              {jobs.length}
+            </span>
+          )}
+        </div>
+        <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+          {jobs.length > 0 && (
+            <button
+              onClick={clearJobs}
+              style={{
+                background: "transparent",
+                border: "none",
+                color: "#858585",
+                cursor: "pointer",
+                padding: "4px",
+                borderRadius: "4px",
+                display: "flex",
+                alignItems: "center",
+              }}
+              title="Clear all"
+            >
+              <MdClearAll size={14} />
+            </button>
+          )}
+          <button
+            onClick={closeTerminal}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "#858585",
+              cursor: "pointer",
+              padding: "4px",
+              borderRadius: "4px",
+              display: "flex",
+              alignItems: "center",
+            }}
+            title="Close"
+          >
+            <MdClose size={14} />
+          </button>
+        </div>
+      </div>
+
+      {/* Job tabs */}
+      {jobs.length > 1 && (
+        <div
+          style={{
+            display: "flex",
+            backgroundColor: "#2d2d2d",
+            borderBottom: "1px solid #3e3e42",
+            overflowX: "auto",
+          }}
+        >
+          {jobs.map((job) => (
+            <button
+              key={job.id}
+              onClick={() => setActiveJob(job.id)}
+              style={{
+                padding: "6px 16px",
+                backgroundColor:
+                  job.id === activeJobId ? "#1e1e1e" : "transparent",
+                border: "none",
+                borderBottom:
+                  job.id === activeJobId
+                    ? "2px solid #0e639c"
+                    : "2px solid transparent",
+                color: job.isRunning ? "#cccccc" : "#858585",
+                fontSize: "12px",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                whiteSpace: "nowrap",
+              }}
+            >
+              <span
+                style={{
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "50%",
+                  backgroundColor: job.isRunning ? "#4ec9b0" : "#858585",
+                  display: "inline-block",
+                }}
+              />
+              {job.scriptPath.split("/").pop()}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Terminal output */}
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "12px",
+          fontFamily: "'Consolas', 'Courier New', monospace",
+          fontSize: "13px",
+          lineHeight: "1.5",
+        }}
+      >
+        {activeJob ? (
+          <>
+            {/* Command header */}
+            <div style={{ marginBottom: "8px" }}>
+              <span style={{ color: "#6a9955" }}>$ </span>
+              <span style={{ color: "#cccccc" }}>
+                {activeJob.command.join(" ")}
+              </span>
+            </div>
+
+            {/* Stdin if provided */}
+            {activeJob.stdin && (
+              <div
+                style={{
+                  marginBottom: "8px",
+                  padding: "8px",
+                  backgroundColor: "#2d2d2d",
+                  borderRadius: "4px",
+                  borderLeft: "3px solid #0e639c",
+                }}
+              >
+                <span style={{ color: "#858585" }}>stdin: </span>
+                <pre
+                  style={{
+                    margin: 0,
+                    color: "#cccccc",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                  }}
+                >
+                  {activeJob.stdin}
+                </pre>
+              </div>
+            )}
+
+            {/* Stdout */}
+            {activeJob.stdout && (
+              <pre
+                style={{
+                  margin: "0 0 8px 0",
+                  color: "#cccccc",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                }}
+              >
+                {activeJob.stdout}
+              </pre>
+            )}
+
+            {/* Stderr */}
+            {activeJob.stderr && (
+              <pre
+                style={{
+                  margin: "0 0 8px 0",
+                  color: "#f44747",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                }}
+              >
+                {activeJob.stderr}
+              </pre>
+            )}
+
+            {/* Status */}
+            {activeJob.isRunning ? (
+              <div style={{ color: "#4ec9b0" }}>⏳ Running...</div>
+            ) : activeJob.status !== null ? (
+              <div
+                style={{
+                  color: activeJob.status === 0 ? "#4ec9b0" : "#f44747",
+                }}
+              >
+                {activeJob.status === 0
+                  ? "✓ Process exited with code 0"
+                  : `✗ Process exited with code ${activeJob.status}`}
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <div
+            style={{
+              color: "#858585",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              flexDirection: "column",
+              gap: "8px",
+            }}
+          >
+            <FiTerminal size={32} />
+            <span>No active jobs</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/modules/terminal/index.ts

@@ -0,0 +1 @@
+export { TerminalOutput } from "./components/TerminalOutput";

frontend/src/modules/terminal/store/useTerminalStore.ts

@@ -0,0 +1,75 @@
+import { create } from "zustand";
+
+export interface TerminalJob {
+  id: number;
+  scriptPath: string;
+  command: string[];
+  status: number | null;
+  stdout: string;
+  stderr: string;
+  stdin: string;
+  isRunning: boolean;
+}
+
+interface TerminalState {
+  jobs: TerminalJob[];
+  isOpen: boolean;
+  activeJobId: number | null;
+
+  openTerminal: () => void;
+  closeTerminal: () => void;
+  addJob: (job: Omit<TerminalJob, "status" | "stdout" | "stderr" | "isRunning">) => void;
+  updateJob: (id: number, updates: Partial<TerminalJob>) => void;
+  setActiveJob: (id: number | null) => void;
+  clearJobs: () => void;
+  removeJob: (id: number) => void;
+}
+
+export const useTerminalStore = create<TerminalState>((set) => ({
+  jobs: [],
+  isOpen: false,
+  activeJobId: null,
+
+  openTerminal: () => set({ isOpen: true }),
+
+  closeTerminal: () => set({ isOpen: false }),
+
+  addJob: (job) =>
+    set((state) => ({
+      jobs: [
+        ...state.jobs,
+        {
+          ...job,
+          status: null,
+          stdout: "",
+          stderr: "",
+          stdin: "",
+          isRunning: true,
+        },
+      ],
+      activeJobId: job.id,
+    })),
+
+  updateJob: (id, updates) =>
+    set((state) => ({
+      jobs: state.jobs.map((j) => (j.id === id ? { ...j, ...updates } : j)),
+    })),
+
+  setActiveJob: (id) => set({ activeJobId: id }),
+
+  clearJobs: () => set({ jobs: [], activeJobId: null }),
+
+  removeJob: (id) =>
+    set((state) => {
+      const newJobs = state.jobs.filter((j) => j.id !== id);
+      return {
+        jobs: newJobs,
+        activeJobId:
+          state.activeJobId === id
+            ? newJobs.length > 0
+              ? newJobs[newJobs.length - 1].id
+              : null
+            : state.activeJobId,
+      };
+    }),
+}));

frontend/src/pages/admin.page.tsx

@@ -1,730 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
+import { AdminPanel } from "@/modules/admin";
-import { agentApiService } from "@/modules/agent";
-import type { TokenUser, TokenCreate, TokenUpdatePermissions, TokenPasswordReset } from "@/modules/agent";
-import { FiUsers, FiUserPlus, FiEdit2, FiTrash2, FiUnlock, FiLock, FiKey, FiX, FiCheck, FiSearch } from "react-icons/fi";
 
-export const AdminPage: React.FC = () => {
+export const AdminPage = () => {
-  const [users, setUsers] = useState<TokenUser[]>([]);
+  return <AdminPanel />;
-  const [inactiveUsers, setInactiveUsers] = useState<TokenUser[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<"active" | "inactive">("active");
-  const [searchQuery, setSearchQuery] = useState("");
-  
-  // Modal states
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [showPasswordModal, setShowPasswordModal] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<TokenUser | null>(null);
-  
-  // Form states
-  const [createData, setCreateData] = useState<TokenCreate>({
-    login: "",
-    name: "",
-    last_name: "",
-    password: "",
-    permission_admin: false,
-    permission_manage_agent: false,
-    permission_view: false,
-    is_active: false,
-  });
-  
-  const [editData, setEditData] = useState<TokenUpdatePermissions>({
-    is_active: false,
-    permission_admin: false,
-    permission_manage_agent: false,
-    permission_view: false,
-  });
-  
-  const [passwordData, setPasswordData] = useState<TokenPasswordReset>({
-    new_password: "",
-  });
-
-  const fetchUsers = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const [active, inactive] = await Promise.all([
-        agentApiService.getUsers(),
-        agentApiService.getInactiveUsers(),
-      ]);
-      setUsers(active);
-      setInactiveUsers(inactive);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при загрузке пользователей");
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchUsers();
-  }, [fetchUsers]);
-
-  const handleCreateUser = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    try {
-      await agentApiService.createUser(createData);
-      setSuccessMessage("Пользователь успешно создан");
-      setShowCreateModal(false);
-      setCreateData({
-        login: "",
-        name: "",
-        last_name: "",
-        password: "",
-        permission_admin: false,
-        permission_manage_agent: false,
-        permission_view: false,
-        is_active: false,
-      });
-      await fetchUsers();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при создании пользователя");
-    }
-  };
-
-  const handleUpdatePermissions = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedUser) return;
-    
-    setError(null);
-    try {
-      await agentApiService.updateUserPermissions(selectedUser.login, editData);
-      setSuccessMessage("Права пользователя обновлены");
-      setShowEditModal(false);
-      await fetchUsers();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при обновлении прав");
-    }
-  };
-
-  const handleResetPassword = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedUser) return;
-    
-    setError(null);
-    try {
-      await agentApiService.resetUserPassword(selectedUser.login, passwordData);
-      setSuccessMessage("Пароль изменен");
-      setShowPasswordModal(false);
-      setPasswordData({ new_password: "" });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при сбросе пароля");
-    }
-  };
-
-  const handleActivateUser = async (login: string) => {
-    setError(null);
-    try {
-      await agentApiService.activateUser(login);
-      setSuccessMessage("Пользователь активирован");
-      await fetchUsers();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при активации пользователя");
-    }
-  };
-
-  const handleDeactivateUser = async (login: string) => {
-    setError(null);
-    try {
-      await agentApiService.deactivateUser(login);
-      setSuccessMessage("Пользователь деактивирован");
-      await fetchUsers();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при деактивации пользователя");
-    }
-  };
-
-  const handleDeleteUser = async (login: string) => {
-    if (!confirm(`Вы уверены, что хотите удалить пользователя ${login}?`)) return;
-    
-    setError(null);
-    try {
-      await agentApiService.deleteUser(login);
-      setSuccessMessage("Пользователь удален");
-      await fetchUsers();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при удалении пользователя");
-    }
-  };
-
-  const openEditModal = (user: TokenUser) => {
-    setSelectedUser(user);
-    setEditData({
-      is_active: user.is_active,
-      permission_admin: user.permission_admin,
-      permission_manage_agent: user.permission_manage_agent,
-      permission_view: user.permission_view,
-    });
-    setShowEditModal(true);
-  };
-
-  const openPasswordModal = (user: TokenUser) => {
-    setSelectedUser(user);
-    setPasswordData({ new_password: "" });
-    setShowPasswordModal(true);
-  };
-
-  const filteredUsers = (activeTab === "active" ? users : inactiveUsers).filter(
-    (user) =>
-      user.login.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      user.last_name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  const inputStyle: React.CSSProperties = {
-    width: "100%",
-    padding: "10px 12px",
-    border: "1px solid var(--border)",
-    borderRadius: "8px",
-    backgroundColor: "var(--input-bg)",
-    color: "var(--text-primary)",
-    fontSize: "14px",
-  };
-
-  const labelStyle: React.CSSProperties = {
-    display: "block",
-    marginBottom: "8px",
-    color: "var(--text-secondary)",
-    fontSize: "14px",
-    fontWeight: 500,
-  };
-
-  const buttonBaseStyle: React.CSSProperties = {
-    padding: "8px 16px",
-    borderRadius: "8px",
-    border: "none",
-    fontSize: "14px",
-    fontWeight: 500,
-    cursor: "pointer",
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "6px",
-  };
-
-  return (
-    <div
-      className="min-h-screen py-8 px-4"
-      style={{ backgroundColor: "var(--bg-primary)" }}
-    >
-      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-center gap-4 mb-4">
-            <div
-              className="w-14 h-14 rounded-xl flex items-center justify-center"
-              style={{ backgroundColor: "var(--bg-secondary)" }}
-            >
-              <FiUsers className="w-7 h-7" style={{ color: "var(--accent)" }} />
-            </div>
-            <div>
-              <h1
-                className="text-3xl font-bold mb-1"
-                style={{ color: "var(--text-primary)" }}
-              >
-                Управление пользователями
-              </h1>
-              <p style={{ color: "var(--text-secondary)", fontSize: "16px" }}>
-                Администрирование учетных записей
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Messages */}
-        {successMessage && (
-          <div
-            className="mb-6 p-4 rounded-lg border text-sm"
-            style={{
-              backgroundColor: "var(--success-bg)",
-              borderColor: "var(--success-border)",
-              color: "var(--success-text)",
-            }}
-          >
-            <div className="flex items-center justify-between">
-              <span>{successMessage}</span>
-              <button onClick={() => setSuccessMessage(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
-                <FiX size={16} />
-              </button>
-            </div>
-          </div>
-        )}
-
-        {error && (
-          <div
-            className="mb-6 p-4 rounded-lg border text-sm"
-            style={{
-              backgroundColor: "var(--error-bg)",
-              borderColor: "var(--error-border)",
-              color: "var(--error-text)",
-            }}
-          >
-            <div className="flex items-center justify-between">
-              <span>{error}</span>
-              <button onClick={() => setError(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
-                <FiX size={16} />
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Tabs and Actions */}
-        <div className="mb-6">
-          <div className="flex items-center justify-between mb-4">
-            {/* Tabs */}
-            <div className="flex gap-2">
-              <button
-                onClick={() => setActiveTab("active")}
-                className="px-4 py-2 rounded-lg border transition-all font-medium"
-                style={{
-                  backgroundColor: activeTab === "active" ? "var(--accent)" : "var(--input-bg)",
-                  color: activeTab === "active" ? "var(--accent-text)" : "var(--text-primary)",
-                  borderColor: activeTab === "active" ? "var(--accent)" : "var(--border)",
-                }}
-              >
-                Активные ({users.length})
-              </button>
-              <button
-                onClick={() => setActiveTab("inactive")}
-                className="px-4 py-2 rounded-lg border transition-all font-medium"
-                style={{
-                  backgroundColor: activeTab === "inactive" ? "var(--accent)" : "var(--input-bg)",
-                  color: activeTab === "inactive" ? "var(--accent-text)" : "var(--text-primary)",
-                  borderColor: activeTab === "inactive" ? "var(--accent)" : "var(--border)",
-                }}
-              >
-                Неактивные ({inactiveUsers.length})
-              </button>
-            </div>
-
-            {/* Create Button */}
-            <button
-              onClick={() => setShowCreateModal(true)}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium"
-              style={{
-                backgroundColor: "var(--button-primary)",
-                color: "var(--button-primary-text)",
-                boxShadow: "0 4px 14px var(--shadow-color)",
-              }}
-            >
-              <FiUserPlus size={16} />
-              Создать пользователя
-            </button>
-          </div>
-
-          {/* Search */}
-          <div className="relative">
-            <FiSearch
-              style={{
-                position: "absolute",
-                left: "12px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                color: "var(--text-muted)",
-              }}
-            />
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Поиск по логину, имени или фамилии..."
-              className="w-full pl-10 pr-4 py-2.5 rounded-lg border"
-              style={{
-                backgroundColor: "var(--input-bg)",
-                borderColor: "var(--border)",
-                color: "var(--text-primary)",
-              }}
-            />
-          </div>
-        </div>
-
-        {/* Users Table */}
-        {isLoading ? (
-          <div className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
-            Загрузка...
-          </div>
-        ) : filteredUsers.length === 0 ? (
-          <div
-            className="text-center py-12 rounded-xl border border-dashed"
-            style={{ color: "var(--text-muted)", borderColor: "var(--border)" }}
-          >
-            Пользователи не найдены
-          </div>
-        ) : (
-          <div
-            className="rounded-xl border overflow-hidden"
-            style={{
-              backgroundColor: "var(--card-bg)",
-              borderColor: "var(--border)",
-            }}
-          >
-            <table className="w-full">
-              <thead>
-                <tr style={{ backgroundColor: "var(--bg-secondary)" }}>
-                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Логин</th>
-                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Имя</th>
-                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Фамилия</th>
-                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Админ</th>
-                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Управление</th>
-                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Просмотр</th>
-                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Действия</th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredUsers.map((user, index) => (
-                  <tr
-                    key={user.id}
-                    className="border-t"
-                    style={{
-                      borderColor: "var(--border)",
-                      backgroundColor: index % 2 === 0 ? "var(--card-bg)" : "var(--bg-secondary)",
-                    }}
-                  >
-                    <td className="px-4 py-3 font-mono text-sm" style={{ color: "var(--text-primary)" }}>{user.login}</td>
-                    <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.name}</td>
-                    <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.last_name}</td>
-                    <td className="px-4 py-3 text-center">
-                      {user.permission_admin ? (
-                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
-                      ) : (
-                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
-                      )}
-                    </td>
-                    <td className="px-4 py-3 text-center">
-                      {user.permission_manage_agent ? (
-                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
-                      ) : (
-                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
-                      )}
-                    </td>
-                    <td className="px-4 py-3 text-center">
-                      {user.permission_view ? (
-                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
-                      ) : (
-                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
-                      )}
-                    </td>
-                    <td className="px-4 py-3 text-center">
-                      <div className="flex items-center justify-center gap-2">
-                        <button
-                          onClick={() => openEditModal(user)}
-                          className="p-2 rounded-lg transition-all"
-                          style={{
-                            backgroundColor: "var(--accent)",
-                            color: "var(--accent-text)",
-                          }}
-                          title="Редактировать права"
-                        >
-                          <FiEdit2 size={14} />
-                        </button>
-                        <button
-                          onClick={() => openPasswordModal(user)}
-                          className="p-2 rounded-lg transition-all"
-                          style={{
-                            backgroundColor: "var(--warning-bg)",
-                            color: "var(--warning-text)",
-                          }}
-                          title="Сбросить пароль"
-                        >
-                          <FiKey size={14} />
-                        </button>
-                        {activeTab === "active" ? (
-                          <button
-                            onClick={() => handleDeactivateUser(user.login)}
-                            className="p-2 rounded-lg transition-all"
-                            style={{
-                              backgroundColor: "var(--warning-bg)",
-                              color: "var(--warning-text)",
-                            }}
-                            title="Деактивировать"
-                          >
-                            <FiLock size={14} />
-                          </button>
-                        ) : (
-                          <button
-                            onClick={() => handleActivateUser(user.login)}
-                            className="p-2 rounded-lg transition-all"
-                            style={{
-                              backgroundColor: "var(--success-bg)",
-                              color: "var(--success-text)",
-                              border: "1px solid var(--success-border)",
-                            }}
-                            title="Активировать"
-                          >
-                            <FiUnlock size={14} />
-                          </button>
-                        )}
-                        <button
-                          onClick={() => handleDeleteUser(user.login)}
-                          className="p-2 rounded-lg transition-all"
-                          style={{
-                            backgroundColor: "var(--error-bg)",
-                            color: "var(--error-text)",
-                            border: "1px solid var(--error-border)",
-                          }}
-                          title="Удалить"
-                        >
-                          <FiTrash2 size={14} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      {/* Create User Modal */}
-      {showCreateModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div
-            className="rounded-2xl shadow-2xl border w-full max-w-md"
-            style={{ backgroundColor: "var(--card-bg)" }}
-          >
-            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
-              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Создать пользователя</h2>
-              <button onClick={() => setShowCreateModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
-                <FiX size={24} />
-              </button>
-            </div>
-            <form onSubmit={handleCreateUser} className="p-6 space-y-4">
-              <div>
-                <label style={labelStyle}>Логин *</label>
-                <input
-                  type="text"
-                  value={createData.login}
-                  onChange={(e) => setCreateData({ ...createData, login: e.target.value })}
-                  required
-                  style={inputStyle}
-                />
-              </div>
-              <div>
-                <label style={labelStyle}>Имя *</label>
-                <input
-                  type="text"
-                  value={createData.name}
-                  onChange={(e) => setCreateData({ ...createData, name: e.target.value })}
-                  required
-                  style={inputStyle}
-                />
-              </div>
-              <div>
-                <label style={labelStyle}>Фамилия *</label>
-                <input
-                  type="text"
-                  value={createData.last_name}
-                  onChange={(e) => setCreateData({ ...createData, last_name: e.target.value })}
-                  required
-                  style={inputStyle}
-                />
-              </div>
-              <div>
-                <label style={labelStyle}>Пароль *</label>
-                <input
-                  type="password"
-                  value={createData.password}
-                  onChange={(e) => setCreateData({ ...createData, password: e.target.value })}
-                  required
-                  style={inputStyle}
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={createData.permission_admin}
-                    onChange={(e) => setCreateData({ ...createData, permission_admin: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Администратор</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={createData.permission_manage_agent}
-                    onChange={(e) => setCreateData({ ...createData, permission_manage_agent: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={createData.permission_view}
-                    onChange={(e) => setCreateData({ ...createData, permission_view: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Просмотр</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={createData.is_active}
-                    onChange={(e) => setCreateData({ ...createData, is_active: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Активен сразу</span>
-                </label>
-              </div>
-              <div className="flex gap-3 pt-4">
-                <button
-                  type="button"
-                  onClick={() => setShowCreateModal(false)}
-                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
-                  style={{
-                    backgroundColor: "var(--input-bg)",
-                    color: "var(--text-primary)",
-                  }}
-                >
-                  Отмена
-                </button>
-                <button
-                  type="submit"
-                  className="flex-1 px-4 py-2 rounded-lg transition-all"
-                  style={{
-                    backgroundColor: "var(--button-primary)",
-                    color: "var(--button-primary-text)",
-                  }}
-                >
-                  Создать
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-
-      {/* Edit Permissions Modal */}
-      {showEditModal && selectedUser && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div
-            className="rounded-2xl shadow-2xl border w-full max-w-md"
-            style={{ backgroundColor: "var(--card-bg)" }}
-          >
-            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
-              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
-                Редактировать: {selectedUser.login}
-              </h2>
-              <button onClick={() => setShowEditModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
-                <FiX size={24} />
-              </button>
-            </div>
-            <form onSubmit={handleUpdatePermissions} className="p-6 space-y-4">
-              <div className="space-y-2">
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={editData.permission_admin || false}
-                    onChange={(e) => setEditData({ ...editData, permission_admin: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Администратор</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={editData.permission_manage_agent || false}
-                    onChange={(e) => setEditData({ ...editData, permission_manage_agent: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={editData.permission_view || false}
-                    onChange={(e) => setEditData({ ...editData, permission_view: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Просмотр</span>
-                </label>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={editData.is_active || false}
-                    onChange={(e) => setEditData({ ...editData, is_active: e.target.checked })}
-                  />
-                  <span style={{ color: "var(--text-primary)" }}>Активен</span>
-                </label>
-              </div>
-              <div className="flex gap-3 pt-4">
-                <button
-                  type="button"
-                  onClick={() => setShowEditModal(false)}
-                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
-                  style={{
-                    backgroundColor: "var(--input-bg)",
-                    color: "var(--text-primary)",
-                  }}
-                >
-                  Отмена
-                </button>
-                <button
-                  type="submit"
-                  className="flex-1 px-4 py-2 rounded-lg transition-all"
-                  style={{
-                    backgroundColor: "var(--button-primary)",
-                    color: "var(--button-primary-text)",
-                  }}
-                >
-                  Сохранить
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-
-      {/* Reset Password Modal */}
-      {showPasswordModal && selectedUser && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div
-            className="rounded-2xl shadow-2xl border w-full max-w-md"
-            style={{ backgroundColor: "var(--card-bg)" }}
-          >
-            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
-              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
-                Сброс пароля: {selectedUser.login}
-              </h2>
-              <button onClick={() => setShowPasswordModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
-                <FiX size={24} />
-              </button>
-            </div>
-            <form onSubmit={handleResetPassword} className="p-6 space-y-4">
-              <div>
-                <label style={labelStyle}>Новый пароль *</label>
-                <input
-                  type="password"
-                  value={passwordData.new_password}
-                  onChange={(e) => setPasswordData({ new_password: e.target.value })}
-                  required
-                  style={inputStyle}
-                />
-              </div>
-              <div className="flex gap-3 pt-4">
-                <button
-                  type="button"
-                  onClick={() => setShowPasswordModal(false)}
-                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
-                  style={{
-                    backgroundColor: "var(--input-bg)",
-                    color: "var(--text-primary)",
-                  }}
-                >
-                  Отмена
-                </button>
-                <button
-                  type="submit"
-                  className="flex-1 px-4 py-2 rounded-lg transition-all"
-                  style={{
-                    backgroundColor: "var(--button-primary)",
-                    color: "var(--button-primary-text)",
-                  }}
-                >
-                  Сбросить
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
 };

frontend/src/pages/agent-dashboard.page.tsx

@@ -0,0 +1,398 @@
+import { useEffect, useMemo, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+import {
+  startMetricsPolling,
+  stopMetricsPolling,
+} from "@/app/providers/layout/store/metrics.store";
+import { useMetricsStore } from "@/app/providers/layout/store/metrics.store";
+import { FiArrowLeft, FiCpu, FiHardDrive } from "react-icons/fi";
+import { FaMemory, FaNetworkWired } from "react-icons/fa";
+
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+interface MetricsSnapshot {
+  timestamp: string;
+  metrics: Record<string, SystemMetrics>;
+}
+
+interface SystemMetrics {
+  connected_at: string;
+  cpu_percent: number;
+  disk_percent: number;
+  id: string;
+  label: string;
+  memory_percent: number;
+  network_rx_bytes: number;
+  network_tx_bytes: number;
+}
+
+export const AgentDashboardPage = () => {
+  const { agentLabel } = useParams<{ agentLabel: string }>();
+  const navigate = useNavigate();
+  const { metrics, lastUpdated } = useMetricsStore();
+  const [history, setHistory] = useState<MetricsSnapshot[]>([]);
+
+  useEffect(() => {
+    startMetricsPolling();
+    return () => stopMetricsPolling();
+  }, []);
+
+  const agentMetric = useMemo(
+    () => metrics.find((m) => m.label === agentLabel),
+    [metrics, agentLabel],
+  );
+
+  useEffect(() => {
+    if (metrics.length > 0) {
+      const now = new Date().toLocaleTimeString("ru-RU", {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+      const map: Record<string, SystemMetrics> = {};
+      metrics.forEach((m) => {
+        map[m.label] = m;
+      });
+      setHistory((prev) =>
+        [...prev, { timestamp: now, metrics: map }].slice(-60),
+      );
+    }
+  }, [metrics]);
+
+  const historyData = useMemo(() => {
+    return history
+      .map((s) => {
+        const m = s.metrics[agentLabel || ""];
+        return m
+          ? [
+              { timestamp: s.timestamp, value: m.cpu_percent, metric: "CPU" },
+              {
+                timestamp: s.timestamp,
+                value: m.memory_percent,
+                metric: "RAM",
+              },
+              { timestamp: s.timestamp, value: m.disk_percent, metric: "Disk" },
+            ]
+          : [];
+      })
+      .flat();
+  }, [history, agentLabel]);
+
+  const cpuHistory = useMemo(
+    () => historyData.filter((d) => d.metric === "CPU"),
+    [historyData],
+  );
+  const ramHistory = useMemo(
+    () => historyData.filter((d) => d.metric === "RAM"),
+    [historyData],
+  );
+  const diskHistory = useMemo(
+    () => historyData.filter((d) => d.metric === "Disk"),
+    [historyData],
+  );
+
+  const displayMetric = agentMetric;
+
+  if (!displayMetric) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <p style={{ color: "var(--text-muted)" }}>
+            Метрики для агента "{agentLabel}" не найдены
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: "16px 20px" }}>
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-6">
+        <button
+          onClick={() => navigate("/dashboard")}
+          style={{
+            background: "transparent",
+            border: "1px solid var(--border)",
+            color: "var(--text-primary)",
+            padding: "6px 10px",
+            borderRadius: "4px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+          }}
+        >
+          <FiArrowLeft size={14} />
+          Назад
+        </button>
+        <div>
+          <h1
+            style={{
+              fontSize: "16px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+              margin: 0,
+            }}
+          >
+            {displayMetric.label}
+          </h1>
+          <p
+            style={{
+              fontSize: "12px",
+              color: "var(--text-secondary)",
+              margin: "2px 0 0 0",
+            }}
+          >
+            {lastUpdated && (
+              <span>
+                Обновлено {new Date(lastUpdated).toLocaleTimeString()}
+              </span>
+            )}
+          </p>
+        </div>
+      </div>
+
+      {/* Metric cards */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+          gap: "12px",
+          marginBottom: "20px",
+        }}
+      >
+        <div
+          style={{
+            padding: "16px",
+            backgroundColor: "var(--card-bg)",
+            border: "1px solid var(--border)",
+            borderRadius: "8px",
+          }}
+        >
+          <div className="flex items-center gap-2 mb-2">
+            <FiCpu size={16} style={{ color: "#3b82f6" }} />
+            <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
+              CPU
+            </span>
+          </div>
+          <div
+            style={{
+              fontSize: "24px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            {displayMetric.cpu_percent.toFixed(1)}%
+          </div>
+        </div>
+
+        <div
+          style={{
+            padding: "16px",
+            backgroundColor: "var(--card-bg)",
+            border: "1px solid var(--border)",
+            borderRadius: "8px",
+          }}
+        >
+          <div className="flex items-center gap-2 mb-2">
+            <FaMemory size={16} style={{ color: "#10b981" }} />
+            <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
+              RAM
+            </span>
+          </div>
+          <div
+            style={{
+              fontSize: "24px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            {displayMetric.memory_percent.toFixed(1)}%
+          </div>
+        </div>
+
+        <div
+          style={{
+            padding: "16px",
+            backgroundColor: "var(--card-bg)",
+            border: "1px solid var(--border)",
+            borderRadius: "8px",
+          }}
+        >
+          <div className="flex items-center gap-2 mb-2">
+            <FiHardDrive size={16} style={{ color: "#f59e0b" }} />
+            <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
+              Disk
+            </span>
+          </div>
+          <div
+            style={{
+              fontSize: "24px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            {displayMetric.disk_percent.toFixed(1)}%
+          </div>
+        </div>
+
+        <div
+          style={{
+            padding: "16px",
+            backgroundColor: "var(--card-bg)",
+            border: "1px solid var(--border)",
+            borderRadius: "8px",
+          }}
+        >
+          <div className="flex items-center gap-2 mb-2">
+            <FaNetworkWired size={16} style={{ color: "#8b5cf6" }} />
+            <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
+              Network
+            </span>
+          </div>
+          <div
+            style={{
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            ↓ {formatBytes(displayMetric.network_rx_bytes)}
+          </div>
+          <div
+            style={{
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            ↑ {formatBytes(displayMetric.network_tx_bytes)}
+          </div>
+        </div>
+      </div>
+
+      {/* Charts */}
+      <div
+        style={{
+          maxWidth: "1100px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+        }}
+      >
+        {/* CPU History */}
+        <div style={{ height: 280 }}>
+          <h3
+            style={{
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+              marginBottom: "8px",
+            }}
+          >
+            CPU Usage History (%)
+          </h3>
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={cpuHistory}>
+              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+              <XAxis
+                dataKey="timestamp"
+                stroke="var(--text-secondary)"
+                fontSize={11}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                stroke="var(--text-secondary)"
+                fontSize={12}
+                domain={[0, 100]}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "var(--card-bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                }}
+              />
+              <Bar
+                dataKey="value"
+                radius={[4, 4, 0, 0]}
+                fill="#3b82f6"
+                label={{
+                  position: "top",
+                  fill: "var(--text-primary)",
+                  fontSize: 10,
+                  formatter: (v: number) => `${v.toFixed(0)}%`,
+                }}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* RAM History */}
+        <div style={{ height: 280 }}>
+          <h3
+            style={{
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+              marginBottom: "8px",
+            }}
+          >
+            Memory Usage History (%)
+          </h3>
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={ramHistory}>
+              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+              <XAxis
+                dataKey="timestamp"
+                stroke="var(--text-secondary)"
+                fontSize={11}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                stroke="var(--text-secondary)"
+                fontSize={12}
+                domain={[0, 100]}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "var(--card-bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                }}
+              />
+              <Bar
+                dataKey="value"
+                radius={[4, 4, 0, 0]}
+                fill="#10b981"
+                label={{
+                  position: "top",
+                  fill: "var(--text-primary)",
+                  fontSize: 10,
+                  formatter: (v: number) => `${v.toFixed(0)}%`,
+                }}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/dashboard.page.tsx

@@ -0,0 +1,197 @@
+import { DashboardChart } from "@/modules/dashboard/components/dashboard.chart";
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+const generateTimeData = (count: number, base: number, variance: number) => {
+  const data = [];
+  const now = new Date();
+  for (let i = count - 1; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 60000);
+    const h = time.getHours().toString().padStart(2, "0");
+    const m = time.getMinutes().toString().padStart(2, "0");
+    data.push({
+      timestamp: `${h}:${m}`,
+      value: Math.round(
+        base + Math.sin(i / 3) * variance + Math.random() * variance * 0.5,
+      ),
+    });
+  }
+  return data;
+};
+
+const cpuData = generateTimeData(20, 45, 25).map((d, i) => ({
+  timestamp: d.timestamp,
+  "Использование %": d.value,
+}));
+
+const ramData = generateTimeData(20, 60, 15).map((d) => ({
+  timestamp: d.timestamp,
+  "Использовано ГБ": d.value / 10,
+  "Свободно ГБ": 16 - d.value / 10,
+}));
+
+const diskData = generateTimeData(20, 70, 5).map((d) => ({
+  timestamp: d.timestamp,
+  "Занято ГБ": d.value,
+}));
+
+const networkData = generateTimeData(20, 50, 30).map((d) => ({
+  timestamp: d.timestamp,
+  "Входящий Мбит/с": d.value,
+  "Исходящий Мбит/с": Math.round(d.value * 0.4),
+}));
+
+const metricData = [
+  { name: "INFO", value: 125 },
+  { name: "WARN", value: 42 },
+  { name: "ERROR", value: 18 },
+  { name: "CRITICAL", value: 5 },
+];
+
+export const DashboardPage = () => {
+  return (
+    <div style={{ padding: "16px 20px" }}>
+      <h1
+        style={{
+          fontSize: "16px",
+          fontWeight: 600,
+          color: "var(--text-primary)",
+          marginBottom: "16px",
+        }}
+      >
+        Мониторинг системы
+      </h1>
+
+      <div
+        style={{
+          maxWidth: "1100px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+        }}
+      >
+        {/* Центр: Метрика логов — круговая диаграмма */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <div style={{ width: "100%", maxWidth: 600 }}>
+            <h3
+              style={{
+                fontSize: "13px",
+                fontWeight: 600,
+                color: "var(--text-primary)",
+                marginBottom: "8px",
+                textAlign: "center",
+              }}
+            >
+              Метрики логов
+            </h3>
+            <div style={{ height: 320 }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={metricData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={65}
+                    outerRadius={110}
+                    paddingAngle={4}
+                    dataKey="value"
+                    nameKey="name"
+                    strokeWidth={0}
+                  >
+                    {metricData.map((entry, index) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={
+                          ["#10b981", "#f59e0b", "#ef4444", "#dc2626"][index]
+                        }
+                      />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "var(--card-bg)",
+                      border: "1px solid var(--border)",
+                      borderRadius: "4px",
+                      fontSize: "11px",
+                      padding: "4px 8px",
+                    }}
+                  />
+                  <Legend
+                    wrapperStyle={{
+                      fontSize: "11px",
+                      paddingTop: "4px",
+                    }}
+                    iconType="circle"
+                    iconSize={8}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
+        {/* Верхний ряд: CPU + RAM */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: "12px",
+          }}
+        >
+          <DashboardChart
+            title="CPU"
+            type="line"
+            data={cpuData}
+            dataKeys={["Использование %"]}
+            colors={["#3b82f6"]}
+          />
+
+          <DashboardChart
+            title="Оперативная память"
+            type="area"
+            data={ramData}
+            dataKeys={["Использовано ГБ", "Свободно ГБ"]}
+            colors={["#10b981", "#64748b"]}
+          />
+        </div>
+
+        {/* Нижний ряд: Диск + Сеть */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: "12px",
+          }}
+        >
+          <DashboardChart
+            title="Жесткий диск"
+            type="line"
+            data={diskData}
+            dataKeys={["Занято ГБ"]}
+            colors={["#f59e0b"]}
+          />
+
+          <DashboardChart
+            title="Сеть"
+            type="area"
+            data={networkData}
+            dataKeys={["Входящий Мбит/с", "Исходящий Мбит/с"]}
+            colors={["#8b5cf6", "#06b6d4"]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/graphs.page.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect, useMemo } from "react";
+import {
+  Graph,
+  type GraphData,
+  type GraphNode,
+  type GraphLink,
+} from "@/modules/graph";
+import { agentApiService } from "@/modules/agent/api/agent.api.service";
+import { FaSpinner } from "react-icons/fa";
+
+import { useAgentStore } from "@/app/providers/layout/store/agent.store";
+
+const buildGraphFromApi = (apiData: any, agents: any[]): GraphData => {
+  const nodes: GraphNode[] = [];
+  const links: GraphLink[] = [];
+
+  // Build a map of service statuses from agents
+  const serviceStatusMap = new Map<string, "up" | "down">();
+  agents.forEach((agent) => {
+    const services = agent.services || [];
+    services.forEach((svc: string) => {
+      // Parse "serviceName:up" or "serviceName:down"
+      const parts = svc.split(":");
+      const svcName = parts[0];
+      const status = parts[1] === "down" ? "down" : "up";
+      serviceStatusMap.set(`${agent.label}-${svcName}`, status);
+    });
+  });
+
+  if (!apiData?.nodes) return { nodes, links };
+
+  Object.entries(apiData.nodes).forEach(
+    ([agentLabel, agentNode]: [string, any]) => {
+      // Агент как узел
+      nodes.push({
+        id: agentLabel,
+        name: agentLabel,
+        type: "agent",
+        val: 8,
+        description: `Агент: ${agentLabel}`,
+      });
+
+      // Сервисы агента
+      const services = agentNode?.services || {};
+      Object.entries(services).forEach(
+        ([serviceName, serviceNode]: [string, any]) => {
+          const serviceId = `${agentLabel}-${serviceName}`;
+          const status = serviceStatusMap.get(serviceId) || "up";
+
+          nodes.push({
+            id: serviceId,
+            name: serviceName,
+            type: "service",
+            val: 12,
+            description: `Сервис: ${serviceName}`,
+            status,
+          });
+
+          // Связь агент → сервис
+          links.push({
+            source: agentLabel,
+            target: serviceId,
+            type: "hosts",
+          });
+
+          // Зависимости между сервисами
+          const dependencies = serviceNode?.dependencies || [];
+          dependencies.forEach((dep: any) => {
+            const targetServiceName = dep?.target?.name;
+            if (targetServiceName) {
+              const targetServiceId = `${agentLabel}-${targetServiceName}`;
+              links.push({
+                source: serviceId,
+                target: targetServiceId,
+                type: dep.condition || "dependency",
+              });
+            }
+          });
+        },
+      );
+    },
+  );
+
+  return { nodes, links };
+};
+
+export const GraphsPage = () => {
+  const agents = useAgentStore((s) => s.agents);
+  const [graphData, setGraphData] = useState<GraphData>({
+    nodes: [],
+    links: [],
+  });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchGraph = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const apiData = await agentApiService.getGraph();
+        const data = buildGraphFromApi(apiData, agents);
+        setGraphData(data);
+      } catch (e) {
+        console.error("Failed to fetch graph:", e);
+        setError(e instanceof Error ? e.message : "Failed to load graph");
+        setGraphData({ nodes: [], links: [] });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchGraph();
+    const interval = setInterval(fetchGraph, 30000);
+    return () => clearInterval(interval);
+  }, [agents]);
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-center">
+          <FaSpinner
+            className="animate-spin mx-auto mb-4"
+            size={32}
+            style={{ color: "var(--accent)" }}
+          />
+          <p style={{ color: "var(--text-secondary)" }}>Загрузка графа...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && graphData.nodes.length === 0) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-center">
+          <p style={{ color: "var(--error-text)", marginBottom: "12px" }}>
+            {error}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full">
+      <Graph initialData={graphData} />
+    </div>
+  );
+};

frontend/src/pages/ide.page.tsx

@@ -1,14 +1,18 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { IDE } from "../modules/ide";
+import type { FileNode } from "../modules/ide";
 
 export const IDEPage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const files: FileNode | undefined = location.state?.files;
+
   return (
-    <div className="absolute top-0 left-0 w-full h-full z-90">
+    <div
-      <IDE
+      className="absolute top-0 left-0 w-full h-full z-90"
-        onBack={() => navigate("/home")}
+      style={{ backgroundColor: "var(--bg-primary)" }}
-        initialFiles={{ name: "тест", type: "folder" }}
+    >
-      />
+      <IDE onBack={() => navigate("/templates")} initialFiles={files} />
     </div>
   );
 };

frontend/src/pages/logs.page.tsx

@@ -15,17 +15,36 @@ import {
 } from "react-icons/fi";
 
 const logLevelIcons: Record<string, React.ReactNode> = {
-  INFO: <FiInfo size={14} />,
+  info: <FiInfo size={14} />,
-  WARNING: <FiAlertTriangle size={14} />,
+  warning: <FiAlertTriangle size={14} />,
-  ERROR: <FiAlertCircle size={14} />,
+  error: <FiAlertCircle size={14} />,
-  FATAL: <FiXOctagon size={14} />,
+  fatal: <FiXOctagon size={14} />,
 };
 
-const logLevelColors: Record<string, { bg: string; text: string; border: string }> = {
+const logLevelColors: Record<
-  INFO: { bg: "var(--info-bg)", text: "var(--info-text)", border: "var(--info-border)" },
+  string,
-  WARNING: { bg: "var(--warning-bg)", text: "var(--warning-text)", border: "var(--warning-border)" },
+  { bg: string; text: string; border: string }
-  ERROR: { bg: "var(--error-bg)", text: "var(--error-text)", border: "var(--error-border)" },
+> = {
-  FATAL: { bg: "var(--fatal-bg)", text: "var(--fatal-text)", border: "var(--fatal-border)" },
+  info: {
+    bg: "rgba(59, 130, 246, 0.1)",
+    text: "#3b82f6",
+    border: "rgba(59, 130, 246, 0.3)",
+  },
+  warning: {
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    border: "rgba(245, 158, 11, 0.3)",
+  },
+  error: {
+    bg: "var(--error-bg)",
+    text: "var(--error-text)",
+    border: "var(--error-border)",
+  },
+  fatal: {
+    bg: "rgba(168, 85, 247, 0.1)",
+    text: "#a855f7",
+    border: "rgba(168, 85, 247, 0.3)",
+  },
 };
 
 export const LogsPage: React.FC = () => {
@@ -44,10 +63,20 @@ export const LogsPage: React.FC = () => {
     try {
       const filters = getFilters();
       const data = await agentApiService.searchLogs(filters);
+      if (!Array.isArray(data)) {
+        console.error("[Logs] Expected array, got:", typeof data);
+        setLogs([]);
+        setTotalLogs(0);
+        return;
+      }
       setLogs(data);
       setTotalLogs(data.length);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при загрузке логов");
+      setError(
+        err instanceof Error ? err.message : "Ошибка при загрузке логов",
+      );
+      setLogs([]);
+      setTotalLogs(0);
     } finally {
       setIsLoading(false);
     }
@@ -55,14 +84,44 @@ export const LogsPage: React.FC = () => {
 
   const fetchDistinctData = useCallback(async () => {
     try {
-      const [services, agents] = await Promise.all([
+      const [servicesResult, agentsResult] = await Promise.allSettled([
         agentApiService.getDistinctServices(),
         agentApiService.getDistinctAgents(),
       ]);
-      setAvailableServices(services);
+
-      setAvailableAgents(agents);
+      if (
+        servicesResult.status === "fulfilled" &&
+        Array.isArray(servicesResult.value)
+      ) {
+        setAvailableServices(servicesResult.value);
+      } else {
+        console.error(
+          "[Logs] Failed to fetch services:",
+          servicesResult.status === "rejected"
+            ? servicesResult.reason
+            : "non-array response",
+        );
+        setAvailableServices([]);
+      }
+
+      if (
+        agentsResult.status === "fulfilled" &&
+        Array.isArray(agentsResult.value)
+      ) {
+        setAvailableAgents(agentsResult.value);
+      } else {
+        console.error(
+          "[Logs] Failed to fetch agents:",
+          agentsResult.status === "rejected"
+            ? agentsResult.reason
+            : "non-array response",
+        );
+        setAvailableAgents([]);
+      }
     } catch (err) {
-      console.error("Failed to fetch distinct data:", err);
+      console.error("[Logs] Failed to fetch distinct data:", err);
+      setAvailableServices([]);
+      setAvailableAgents([]);
     }
   }, []);
 
@@ -87,8 +146,10 @@ export const LogsPage: React.FC = () => {
     setOffset(Math.max(0, offset - limit));
   };
 
-  const formatTimestamp = (timestamp: string) => {
+  const formatTimestamp = (timestamp: string | undefined | null) => {
+    if (!timestamp) return "—";
     const date = new Date(timestamp);
+    if (isNaN(date.getTime())) return "—";
     return date.toLocaleString("ru-RU", {
       year: "numeric",
       month: "2-digit",
@@ -112,7 +173,10 @@ export const LogsPage: React.FC = () => {
               className="w-14 h-14 rounded-xl flex items-center justify-center"
               style={{ backgroundColor: "var(--bg-secondary)" }}
             >
-              <FiFileText className="w-7 h-7" style={{ color: "var(--accent)" }} />
+              <FiFileText
+                className="w-7 h-7"
+                style={{ color: "var(--accent)" }}
+              />
             </div>
             <div>
               <h1
@@ -160,8 +224,14 @@ export const LogsPage: React.FC = () => {
           }}
         >
           {/* Table Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: "var(--border)" }}>
+          <div
-            <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
+            className="flex items-center justify-between px-4 py-3 border-b"
+            style={{ borderColor: "var(--border)" }}
+          >
+            <span
+              className="text-sm font-medium"
+              style={{ color: "var(--text-primary)" }}
+            >
               Найдено: {totalLogs} записей
             </span>
             <button
@@ -173,18 +243,27 @@ export const LogsPage: React.FC = () => {
                 borderColor: "var(--border)",
               }}
             >
-              <FiRefreshCw size={12} className={isLoading ? "animate-spin" : ""} />
+              <FiRefreshCw
+                size={12}
+                className={isLoading ? "animate-spin" : ""}
+              />
               Обновить
             </button>
           </div>
 
           {isLoading ? (
-            <div className="flex items-center justify-center py-12" style={{ color: "var(--text-secondary)" }}>
+            <div
+              className="flex items-center justify-center py-12"
+              style={{ color: "var(--text-secondary)" }}
+            >
               <FiRefreshCw size={24} className="animate-spin mr-3" />
               Загрузка логов...
             </div>
           ) : logs.length === 0 ? (
-            <div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
+            <div
+              className="text-center py-12"
+              style={{ color: "var(--text-muted)" }}
+            >
               Логи не найдены
             </div>
           ) : (
@@ -193,37 +272,70 @@ export const LogsPage: React.FC = () => {
                 <table className="w-full">
                   <thead>
                     <tr style={{ backgroundColor: "var(--bg-secondary)" }}>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                         Время
                       </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                         Уровень
                       </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                         Сервис
                       </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                         Агент
                       </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                         Сообщение
                       </th>
                     </tr>
                   </thead>
                   <tbody>
                     {logs.map((log, index) => {
-                      const colors = logLevelColors[log.level] || logLevelColors.INFO;
+                      const level = log.Level?.toLowerCase() || "info";
+                      const colors =
+                        logLevelColors[level] || logLevelColors.info;
                       return (
                         <tr
                           key={index}
-                          className="border-t"
+                          className="border-t transition-colors"
                           style={{
                             borderColor: "var(--border)",
-                            backgroundColor: index % 2 === 0 ? "var(--card-bg)" : "var(--bg-secondary)",
+                            backgroundColor:
+                              index % 2 === 0
+                                ? "var(--card-bg)"
+                                : "var(--bg-secondary)",
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.backgroundColor =
+                              "var(--border)";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.backgroundColor =
+                              index % 2 === 0
+                                ? "var(--card-bg)"
+                                : "var(--bg-secondary)";
                           }}
                         >
-                          <td className="px-4 py-3 text-sm font-mono whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                          <td
-                            {formatTimestamp(log.timestamp)}
+                            className="px-4 py-3 text-sm font-mono whitespace-nowrap"
+                            style={{ color: "var(--text-secondary)" }}
+                          >
+                            {formatTimestamp(log.Timestamp)}
                           </td>
                           <td className="px-4 py-3">
                             <span
@@ -234,18 +346,27 @@ export const LogsPage: React.FC = () => {
                                 borderColor: colors.border,
                               }}
                             >
-                              {logLevelIcons[log.level]}
+                              {logLevelIcons[level]}
-                              {log.level}
+                              {level}
                             </span>
                           </td>
-                          <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>
+                          <td
-                            {log.service}
+                            className="px-4 py-3 text-sm"
+                            style={{ color: "var(--text-primary)" }}
+                          >
+                            {log.Service || "—"}
                           </td>
-                          <td className="px-4 py-3 text-sm font-mono" style={{ color: "var(--text-primary)" }}>
+                          <td
-                            {log.agent}
+                            className="px-4 py-3 text-sm font-mono"
+                            style={{ color: "var(--text-primary)" }}
+                          >
+                            {log.Agent || "—"}
                           </td>
-                          <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>
+                          <td
-                            {log.message}
+                            className="px-4 py-3 text-sm"
+                            style={{ color: "var(--text-primary)" }}
+                          >
+                            {log.Message || "—"}
                           </td>
                         </tr>
                       );
@@ -255,7 +376,10 @@ export const LogsPage: React.FC = () => {
               </div>
 
               {/* Pagination */}
-              <div className="flex items-center justify-between px-4 py-3 border-t" style={{ borderColor: "var(--border)" }}>
+              <div
+                className="flex items-center justify-between px-4 py-3 border-t"
+                style={{ borderColor: "var(--border)" }}
+              >
                 <button
                   onClick={handlePrevPage}
                   disabled={offset === 0}
@@ -269,7 +393,10 @@ export const LogsPage: React.FC = () => {
                   <FiChevronLeft size={16} />
                   Назад
                 </button>
-                <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                <span
+                  className="text-sm"
+                  style={{ color: "var(--text-secondary)" }}
+                >
                   Показано {logs.length} записей (смещение: {offset})
                 </span>
                 <button

frontend/src/pages/templates.page.tsx

@@ -0,0 +1,230 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { FiEdit3 } from "react-icons/fi";
+import { MdAdd } from "react-icons/md";
+import { FaSpinner } from "react-icons/fa";
+import { FilePicker } from "../modules/ide";
+import { RunScriptModal } from "../modules/ide/components/RunScriptModal";
+import { AddInterpreterModal } from "../modules/ide/components/AddInterpreterModal";
+import type { FileNode } from "../modules/ide";
+import { scriptsApi } from "../modules/ide/api/scripts.api";
+import { useAuthStore } from "@/modules/auth/store/useAuthStore";
+
+const convertTreeToFileNode = (data: any[]): FileNode => {
+  const convertItem = (item: any): FileNode => {
+    const node: FileNode = {
+      id: item.id,
+      name: item.name,
+      type: item.type === "folder" ? "folder" : "file",
+      content: item.content || "",
+      path: item.name,
+      interpreter_id: item.interpreter_id,
+    };
+
+    if (item.type === "folder") {
+      node.children = [];
+      if (item.children && Array.isArray(item.children)) {
+        node.children = item.children.map((child: any) => {
+          const childNode = convertItem(child);
+          childNode.path = `${item.name}/${child.name}`;
+          return childNode;
+        });
+      }
+    }
+
+    return node;
+  };
+
+  return {
+    name: "templates",
+    type: "folder",
+    children: data.map((item) => convertItem(item)),
+  };
+};
+
+export const TemplatesPage = () => {
+  const navigate = useNavigate();
+  const { user } = useAuthStore();
+  const canManageAgent = user?.permission_manage_agent;
+  const [files, setFiles] = useState<FileNode | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [runModal, setRunModal] = useState<{
+    scriptPath: string;
+    scriptId: number;
+  } | null>(null);
+  const [showAddInterpreter, setShowAddInterpreter] = useState(false);
+
+  const reloadTree = () => {
+    setLoading(true);
+    scriptsApi
+      .getTree()
+      .then((data) => {
+        setFiles(convertTreeToFileNode(data));
+      })
+      .catch((e) => {
+        console.error("Failed to load tree:", e);
+        setFiles({ name: "templates", type: "folder", children: [] });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    reloadTree();
+  }, []);
+
+  const handleRun = (path: string, id?: number) => {
+    if (!id) {
+      console.warn("Script ID not found for:", path);
+      return;
+    }
+    setRunModal({ scriptPath: path, scriptId: id });
+  };
+
+  return (
+    <div
+      style={{
+        height: "100vh",
+        backgroundColor: "var(--bg-primary)",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      {/* Header bar */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          padding: "12px 16px",
+          gap: "12px",
+          borderBottom: "1px solid var(--border)",
+          backgroundColor: "var(--card-bg)",
+          flexShrink: 0,
+        }}
+      >
+        {/* Add Interpreter button */}
+        <button
+          onClick={() => setShowAddInterpreter(true)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "6px 14px",
+            backgroundColor: "#238636",
+            border: "none",
+            borderRadius: "4px",
+            color: "#ffffff",
+            cursor: "pointer",
+            fontSize: "12px",
+            fontWeight: 500,
+            transition: "all 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "#2ea043";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "#238636";
+          }}
+        >
+          <MdAdd size={14} />
+          Add Interpreter
+        </button>
+
+        {/* Open in Editor button — только с правом manage_agent */}
+        {canManageAgent && (
+          <button
+            onClick={() => navigate("/ide")}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "6px 16px",
+              backgroundColor: "#0e639c",
+              border: "none",
+              borderRadius: "4px",
+              color: "#ffffff",
+              cursor: "pointer",
+              fontSize: "12px",
+              fontWeight: 500,
+              transition: "all 0.15s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#1177bb";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "#0e639c";
+            }}
+          >
+            <FiEdit3 size={14} />
+            Open Editor
+          </button>
+        )}
+      </div>
+
+      {/* File Picker (terminal встроен внутрь) */}
+      <div style={{ flex: 1, overflow: "hidden" }}>
+        {loading ? (
+          <div
+            style={{
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FaSpinner
+              size={24}
+              style={{
+                color: "var(--accent)",
+                animation: "spin 1s linear infinite",
+              }}
+            />
+          </div>
+        ) : files ? (
+          <FilePicker
+            files={files}
+            onRun={(path) => {
+              // Находим ID скрипта по пути
+              const findNodeById = (
+                node: FileNode,
+                p: string,
+              ): FileNode | null => {
+                if (node.path === p) return node;
+                if (node.children) {
+                  for (const child of node.children) {
+                    const found = findNodeById(child, p);
+                    if (found) return found;
+                  }
+                }
+                return null;
+              };
+              const node = findNodeById(files, path);
+              if (node?.id) {
+                handleRun(path, node.id);
+              } else {
+                console.warn("Script ID not found for path:", path);
+              }
+            }}
+          />
+        ) : null}
+      </div>
+
+      {/* Run Script Modal */}
+      {runModal && (
+        <RunScriptModal
+          scriptPath={runModal.scriptPath}
+          scriptId={runModal.scriptId}
+          onClose={() => setRunModal(null)}
+        />
+      )}
+
+      {/* Add Interpreter Modal */}
+      {showAddInterpreter && (
+        <AddInterpreterModal
+          onClose={() => setShowAddInterpreter(false)}
+          onSuccess={reloadTree}
+        />
+      )}
+    </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>
-  );
-};

frontend/src/pages/themes.page.tsx

@@ -1,9 +0,0 @@
-import { ThemeChanger } from "@/modules/theme-changer";
-
-export const ThemesPage = () => {
-  return (
-    <div>
-      <ThemeChanger label="Выбор тем приложения" />
-    </div>
-  );
-};

frontend/src/shared/api/axios.instance.ts

@@ -16,13 +16,40 @@ class ApiClient {
 
   constructor() {
     this.axiosInstance = axios.create({
-      baseURL: "http://194.113.106.59:8080/api/v1",
+      baseURL: "http://213.165.213.170:8080/api/v1",
       timeout: 10000,
       headers: {
         "Content-Type": "application/json",
       },
       validateStatus: (status) => {
-        return status >= 200 && status < 500;
+        return status >= 200 && status < 400;
+      },
+      // Добавляем кастомный сериализатор параметров
+      paramsSerializer: {
+        serialize: (params) => {
+          const parts: string[] = [];
+
+          Object.entries(params).forEach(([key, value]) => {
+            if (value === undefined || value === null) return;
+
+            if (Array.isArray(value)) {
+              // Преобразуем массив в множественные параметры: level=info&level=warning
+              value.forEach((item) => {
+                if (item !== undefined && item !== null) {
+                  parts.push(
+                    `${encodeURIComponent(key)}=${encodeURIComponent(item)}`,
+                  );
+                }
+              });
+            } else {
+              parts.push(
+                `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
+              );
+            }
+          });
+
+          return parts.join("&");
+        },
       },
     });
 

frontend/src/shared/api/websocket.service.ts

@@ -1,5 +1,5 @@
 // shared/api/websocket.service.ts
-import { useAgentStore } from "@/components/layout/sidebar/store/agent.store";
+import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 import { useWebSocket, type LogMessage } from "@/shared/hooks/useWebSocket";
 import { useEffect, useRef, useCallback, useMemo } from "react";
 
@@ -25,12 +25,12 @@ export const useWebSocketService = ({
     const selectedServices: string[] = [];
     const selectedHosts: string[] = [];
 
+    // TODO: реализовать механизм выбора сервисов
+    // Пока выбираем все
     agents.forEach((agent) => {
       agent.services.forEach((service) => {
-        if (service.isSelected) {
+        selectedServices.push(service);
-          selectedServices.push(service.name);
+        selectedHosts.push(agent.token);
-          selectedHosts.push(agent.token);
-        }
       });
     });
 

frontend/src/shared/styles/index.css

@@ -2,3 +2,13 @@
 @import "./normalize.css";
 @import "./root.css";
 @import "./themes.css";
+
+/* Hide scrollbar but keep functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}