fix: sidebar & admin.api

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

@@ -15,6 +15,7 @@ import {
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 import { Graph, type GraphData } from "@/modules/graph";
+import { adminApi } from "@/modules/admin/api/admin.api";
 
 interface SidebarProps {
   isOpen?: boolean;
@@ -36,6 +37,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
     new Set(agents.map((a) => a.label)),
   );
 
+  // 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);
@@ -90,13 +97,38 @@ export const Sidebar: React.FC<SidebarProps> = ({
   }, [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 (
       <button
@@ -439,7 +471,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
         <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"
@@ -459,11 +491,11 @@ export const Sidebar: React.FC<SidebarProps> = ({
                   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)" }}
               >
@@ -472,27 +504,72 @@ export const Sidebar: React.FC<SidebarProps> = ({
             </div>
 
             <div className="p-4 space-y-3">
-              <div>
+              {/* Error */}
-                <label
+              {tokenError && (
-                  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"
+                  className="text-xs p-2 rounded"
                   style={{
-                    backgroundColor: "var(--bg-secondary)",
+                    backgroundColor: "rgba(239,68,68,0.1)",
-                    borderColor: "var(--border)",
+                    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"
@@ -507,20 +584,56 @@ export const Sidebar: React.FC<SidebarProps> = ({
                         <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={{
+                  <button
-                  backgroundColor: "var(--accent)",
+                    onClick={() => {
-                  color: "var(--accent-text)",
+                      setGeneratedToken(null);
-                }}
+                      setTokenLabel("");
-              >
+                    }}
-                Закрыть
+                    className="flex-1 py-2 rounded-lg text-xs font-medium transition-colors"
-              </button>
+                    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/modules/admin/api/admin.api.ts

@@ -85,4 +85,13 @@ export const adminApi = {
       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;
+  },
 };