From 7c02c6d213ec7d728b70ea3bdc8fe662a1770303 Mon Sep 17 00:00:00 2001
From: Markov <markov@uix.su>
Date: Mon, 23 Feb 2026 10:53:55 +0100
Subject: [PATCH] feat: agent management page

---
 src/app/(protected)/agents/page.tsx |  96 +++++++++++++++++
 src/components/CreateAgentModal.tsx | 153 ++++++++++++++++++++++++++++
 src/components/Sidebar.tsx          |  12 ++-
 3 files changed, 260 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(protected)/agents/page.tsx
 create mode 100644 src/components/CreateAgentModal.tsx

diff --git a/src/app/(protected)/agents/page.tsx b/src/app/(protected)/agents/page.tsx
new file mode 100644
index 0000000..4e5624d
--- /dev/null
+++ b/src/app/(protected)/agents/page.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getMembers, Member, MemberCreateResponse } from "@/lib/api";
+import CreateAgentModal from "@/components/CreateAgentModal";
+
+export default function AgentsPage() {
+  const [agents, setAgents] = useState<Member[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+
+  const load = async () => {
+    try {
+      const members = await getMembers();
+      setAgents(members.filter((m) => m.type === "agent"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const handleCreated = (_member: MemberCreateResponse) => {
+    load();
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">🤖 Агенты</h1>
+        <button
+          onClick={() => setShowModal(true)}
+          className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90"
+        >
+          + Создать агента
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="text-[var(--muted)] text-sm">Загрузка...</div>
+      ) : agents.length === 0 ? (
+        <div className="text-[var(--muted)] text-sm">Нет агентов</div>
+      ) : (
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {agents.map((agent) => (
+            <div
+              key={agent.id}
+              className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4"
+            >
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="font-semibold">{agent.name}</h3>
+                <span
+                  className={`text-xs px-2 py-0.5 rounded-full ${
+                    agent.status === "online"
+                      ? "bg-green-500/20 text-green-400"
+                      : "bg-gray-500/20 text-gray-400"
+                  }`}
+                >
+                  {agent.status === "online" ? "online" : "offline"}
+                </span>
+              </div>
+              <div className="text-xs text-[var(--muted)] mb-3">@{agent.slug}</div>
+
+              {agent.agent_config?.capabilities && agent.agent_config.capabilities.length > 0 && (
+                <div className="flex flex-wrap gap-1 mb-3">
+                  {agent.agent_config.capabilities.map((cap) => (
+                    <span
+                      key={cap}
+                      className="text-xs px-2 py-0.5 bg-[var(--accent)]/10 text-[var(--accent)] rounded"
+                    >
+                      {cap}
+                    </span>
+                  ))}
+                </div>
+              )}
+
+              <div className="text-xs text-[var(--muted)] space-y-1">
+                <div>💬 chat: {agent.agent_config?.chat_listen || "—"}</div>
+                <div>📋 tasks: {agent.agent_config?.task_listen || "—"}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showModal && (
+        <CreateAgentModal
+          onCreated={handleCreated}
+          onClose={() => setShowModal(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/CreateAgentModal.tsx b/src/components/CreateAgentModal.tsx
new file mode 100644
index 0000000..24ebc9b
--- /dev/null
+++ b/src/components/CreateAgentModal.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import { createMember, MemberCreateResponse } from "@/lib/api";
+
+interface Props {
+  onCreated: (member: MemberCreateResponse) => void;
+  onClose: () => void;
+}
+
+export default function CreateAgentModal({ onCreated, onClose }: Props) {
+  const [name, setName] = useState("");
+  const [capabilities, setCapabilities] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [token, setToken] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const slug = name
+    .toLowerCase()
+    .replace(/[^a-zа-яё0-9\s-]/gi, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .slice(0, 50);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !slug) return;
+    setLoading(true);
+    setError("");
+    try {
+      const caps = capabilities
+        .split(",")
+        .map((c) => c.trim())
+        .filter(Boolean);
+      const member = await createMember({
+        name: name.trim(),
+        slug,
+        type: "agent",
+        agent_config: {
+          capabilities: caps,
+          chat_listen: "mentions",
+          task_listen: "assigned",
+        },
+      });
+      if (member.token) {
+        setToken(member.token);
+      }
+      onCreated(member);
+    } catch {
+      setError("Ошибка создания агента");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const copyToken = () => {
+    if (token) {
+      navigator.clipboard.writeText(token);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (token) {
+    return (
+      <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 w-96"
+        >
+          <h2 className="text-lg font-bold mb-4">Агент создан</h2>
+          <div className="mb-3 p-2 bg-yellow-500/10 border border-yellow-500/30 rounded text-yellow-400 text-sm">
+            ⚠️ Токен показывается только один раз. Сохраните его сейчас!
+          </div>
+          <div className="mb-4 p-3 bg-[var(--bg)] border border-[var(--border)] rounded-lg font-mono text-xs break-all select-all">
+            {token}
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button
+              onClick={copyToken}
+              className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90"
+            >
+              {copied ? "Скопировано!" : "Скопировать"}
+            </button>
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
+            >
+              Закрыть
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+      <form
+        onClick={(e) => e.stopPropagation()}
+        onSubmit={handleSubmit}
+        className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 w-96"
+      >
+        <h2 className="text-lg font-bold mb-4">Новый агент</h2>
+
+        {error && (
+          <div className="mb-3 p-2 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
+            {error}
+          </div>
+        )}
+
+        <label className="block text-sm text-[var(--muted)] mb-1">Название</label>
+        <input
+          autoFocus
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full mb-1 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg
+                     outline-none focus:border-[var(--accent)] text-sm"
+          placeholder="Code Assistant"
+        />
+        {slug && <div className="text-xs text-[var(--muted)] mb-3">Slug: {slug}</div>}
+
+        <label className="block text-sm text-[var(--muted)] mb-1">Capabilities</label>
+        <input
+          value={capabilities}
+          onChange={(e) => setCapabilities(e.target.value)}
+          className="w-full mb-4 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg
+                     outline-none focus:border-[var(--accent)] text-sm"
+          placeholder="code, review, deploy"
+        />
+
+        <div className="flex gap-2 justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
+          >
+            Отмена
+          </button>
+          <button
+            type="submit"
+            disabled={loading || !name.trim()}
+            className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm
+                       hover:opacity-90 disabled:opacity-50"
+          >
+            {loading ? "..." : "Создать"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 33b7370..7415e86 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -39,6 +39,16 @@ export default function Sidebar({ projects, activeSlug }: Props) {
           Новый проект
         </Link>
 
+        <Link
+          href="/agents"
+          onClick={() => setOpen(false)}
+          className="flex items-center gap-2 px-3 py-2 mb-2 rounded text-sm text-[var(--fg)]
+                     hover:bg-white/5 transition-colors"
+        >
+          <span className="text-lg leading-none">🤖</span>
+          Агенты
+        </Link>
+
         <div className="text-xs uppercase text-[var(--muted)] px-2 py-1 mb-1">Проекты</div>
         {projects.map((p) => (
           <Link
@@ -57,7 +67,7 @@ export default function Sidebar({ projects, activeSlug }: Props) {
       </nav>
 
       <div className="p-3 border-t border-[var(--border)] flex items-center justify-between">
-        <span className="text-xs text-[var(--muted)]">Team Board v0.1</span>
+        <span className="text-xs text-[var(--muted)]">Team Board v0.2</span>
         <button
           onClick={logout}
           className="text-xs text-[var(--muted)] hover:text-[var(--fg)]"