From 652a863706d2699d47b3b26a2b74fdaa4a7c43eb Mon Sep 17 00:00:00 2001
From: Markov <markov@uix.su>
Date: Mon, 23 Feb 2026 11:49:44 +0100
Subject: [PATCH] feat: agent detail modal with edit and token regeneration

---
 bff/app.py                                   |   4 +
 src/app/(protected)/settings/agents/page.tsx |  29 ++-
 src/components/AgentModal.tsx                | 223 +++++++++++++++++++
 src/components/Sidebar.tsx                   |   4 +-
 src/lib/api.ts                               |  13 ++
 5 files changed, 260 insertions(+), 13 deletions(-)
 create mode 100644 src/components/AgentModal.tsx

diff --git a/bff/app.py b/bff/app.py
index c50744c..38975ce 100644
--- a/bff/app.py
+++ b/bff/app.py
@@ -233,6 +233,10 @@ async def update_member(slug: str, request: Request, user: dict = Depends(get_cu
     body = await request.json()
     return await tracker_patch(f"/api/v1/members/{slug}", json=body)
 
+@app.post("/api/v1/members/{slug}/regenerate-token")
+async def regenerate_token(slug: str, user: dict = Depends(get_current_user)):
+    return await tracker_post(f"/api/v1/members/{slug}/regenerate-token")
+
 
 # --- Health ---
 
diff --git a/src/app/(protected)/settings/agents/page.tsx b/src/app/(protected)/settings/agents/page.tsx
index 4e5624d..9a256f9 100644
--- a/src/app/(protected)/settings/agents/page.tsx
+++ b/src/app/(protected)/settings/agents/page.tsx
@@ -3,11 +3,13 @@
 import { useEffect, useState } from "react";
 import { getMembers, Member, MemberCreateResponse } from "@/lib/api";
 import CreateAgentModal from "@/components/CreateAgentModal";
+import AgentModal from "@/components/AgentModal";
 
 export default function AgentsPage() {
   const [agents, setAgents] = useState<Member[]>([]);
   const [loading, setLoading] = useState(true);
-  const [showModal, setShowModal] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [selected, setSelected] = useState<Member | null>(null);
 
   const load = async () => {
     try {
@@ -22,16 +24,12 @@ export default function AgentsPage() {
     load();
   }, []);
 
-  const handleCreated = (_member: MemberCreateResponse) => {
-    load();
-  };
-
   return (
-    <div className="flex-1 overflow-y-auto p-6">
+    <div className="p-6">
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">🤖 Агенты</h1>
         <button
-          onClick={() => setShowModal(true)}
+          onClick={() => setShowCreate(true)}
           className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90"
         >
           + Создать агента
@@ -47,7 +45,8 @@ export default function AgentsPage() {
           {agents.map((agent) => (
             <div
               key={agent.id}
-              className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4"
+              onClick={() => setSelected(agent)}
+              className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 cursor-pointer hover:border-[var(--accent)]/50 transition-colors"
             >
               <div className="flex items-center justify-between mb-2">
                 <h3 className="font-semibold">{agent.name}</h3>
@@ -85,10 +84,18 @@ export default function AgentsPage() {
         </div>
       )}
 
-      {showModal && (
+      {showCreate && (
         <CreateAgentModal
-          onCreated={handleCreated}
-          onClose={() => setShowModal(false)}
+          onCreated={() => load()}
+          onClose={() => setShowCreate(false)}
+        />
+      )}
+
+      {selected && (
+        <AgentModal
+          agent={selected}
+          onClose={() => setSelected(null)}
+          onUpdated={() => { setSelected(null); load(); }}
         />
       )}
     </div>
diff --git a/src/components/AgentModal.tsx b/src/components/AgentModal.tsx
new file mode 100644
index 0000000..e9e0f99
--- /dev/null
+++ b/src/components/AgentModal.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from "react";
+import { Member, updateMember, regenerateToken } from "@/lib/api";
+
+interface Props {
+  agent: Member;
+  onClose: () => void;
+  onUpdated: (agent: Member) => void;
+}
+
+export default function AgentModal({ agent, onClose, onUpdated }: Props) {
+  const [name, setName] = useState(agent.name);
+  const [capabilities, setCapabilities] = useState(
+    agent.agent_config?.capabilities?.join(", ") || ""
+  );
+  const [chatListen, setChatListen] = useState(agent.agent_config?.chat_listen || "mentions");
+  const [taskListen, setTaskListen] = useState(agent.agent_config?.task_listen || "assigned");
+  const [prompt, setPrompt] = useState(agent.agent_config?.prompt || "");
+  const [model, setModel] = useState(agent.agent_config?.model || "");
+  const [saving, setSaving] = useState(false);
+  const [newToken, setNewToken] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [confirmRegen, setConfirmRegen] = useState(false);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const caps = capabilities.split(",").map((c) => c.trim()).filter(Boolean);
+      const updated = await updateMember(agent.slug, {
+        name: name.trim(),
+        agent_config: {
+          capabilities: caps,
+          chat_listen: chatListen,
+          task_listen: taskListen,
+          prompt: prompt.trim() || null,
+          model: model.trim() || null,
+        },
+      });
+      onUpdated(updated);
+      onClose();
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRegenerate = async () => {
+    try {
+      const { token } = await regenerateToken(agent.slug);
+      setNewToken(token);
+      setConfirmRegen(false);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const copyToken = () => {
+    if (newToken) {
+      navigator.clipboard.writeText(newToken);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+      <div
+        className="bg-[var(--card)] border border-[var(--border)] rounded-xl w-full max-w-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-5 border-b border-[var(--border)] flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold">{agent.name}</h2>
+            <div className="text-xs text-[var(--muted)]">@{agent.slug}</div>
+          </div>
+          <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="p-5 space-y-4">
+          <div>
+            <label className="block text-sm text-[var(--muted)] mb-1">Название</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
+            />
+          </div>
+
+          <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 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>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-sm text-[var(--muted)] mb-1">Chat listen</label>
+              <select
+                value={chatListen}
+                onChange={(e) => setChatListen(e.target.value)}
+                className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
+              >
+                <option value="all">all</option>
+                <option value="mentions">mentions</option>
+                <option value="none">none</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm text-[var(--muted)] mb-1">Task listen</label>
+              <select
+                value={taskListen}
+                onChange={(e) => setTaskListen(e.target.value)}
+                className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
+              >
+                <option value="all">all</option>
+                <option value="assigned">assigned</option>
+                <option value="none">none</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm text-[var(--muted)] mb-1">Prompt</label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm resize-y min-h-[60px]"
+              rows={3}
+              placeholder="Системный промпт агента..."
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm text-[var(--muted)] mb-1">Модель</label>
+            <input
+              value={model}
+              onChange={(e) => setModel(e.target.value)}
+              className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
+              placeholder="claude-sonnet-4-20250514, gpt-4o, ..."
+            />
+          </div>
+
+          {/* Token section */}
+          <div className="pt-3 border-t border-[var(--border)]">
+            <div className="text-sm text-[var(--muted)] mb-2">Токен доступа</div>
+            {newToken ? (
+              <div>
+                <div className="mb-2 p-2 bg-yellow-500/10 border border-yellow-500/30 rounded text-yellow-400 text-xs">
+                  ⚠️ Сохраните токен — он больше не будет показан!
+                </div>
+                <div className="p-3 bg-[var(--bg)] border border-[var(--border)] rounded-lg font-mono text-xs break-all select-all mb-2">
+                  {newToken}
+                </div>
+                <button
+                  onClick={copyToken}
+                  className="px-3 py-1.5 bg-[var(--accent)] text-white rounded text-xs hover:opacity-90"
+                >
+                  {copied ? "Скопировано!" : "Скопировать"}
+                </button>
+              </div>
+            ) : confirmRegen ? (
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-red-400">Старый токен перестанет работать!</span>
+                <button
+                  onClick={handleRegenerate}
+                  className="px-3 py-1.5 bg-red-500/20 text-red-400 rounded text-xs hover:bg-red-500/30"
+                >
+                  Да, перегенерировать
+                </button>
+                <button
+                  onClick={() => setConfirmRegen(false)}
+                  className="px-3 py-1.5 text-xs text-[var(--muted)]"
+                >
+                  Отмена
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                <span className="text-xs text-[var(--muted)]">Токен скрыт</span>
+                <button
+                  onClick={() => setConfirmRegen(true)}
+                  className="text-xs text-[var(--accent)] hover:underline"
+                >
+                  Перегенерировать
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="p-5 border-t border-[var(--border)] flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
+          >
+            Отмена
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving || !name.trim()}
+            className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50"
+          >
+            {saving ? "..." : "Сохранить"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 7a2bb8a..66c97cf 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -62,14 +62,14 @@ export default function Sidebar({ projects, activeSlug }: Props) {
           <Link
             href="/settings"
             onClick={() => setOpen(false)}
-            className="text-[var(--muted)] hover:text-[var(--fg)] transition-colors"
+            className="text-[var(--muted)] hover:text-[var(--fg)] transition-colors cursor-pointer"
             title="Настройки"
           >
             ⚙️
           </Link>
           <button
             onClick={logout}
-            className="text-[var(--muted)] hover:text-[var(--fg)] transition-colors"
+            className="text-[var(--muted)] hover:text-[var(--fg)] transition-colors cursor-pointer"
             title="Выйти"
           >
             🚪
diff --git a/src/lib/api.ts b/src/lib/api.ts
index c5f6f90..146cc78 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -225,3 +225,16 @@ export async function createMember(data: {
 }): Promise<MemberCreateResponse> {
   return request("/api/v1/members", { method: "POST", body: JSON.stringify(data) });
 }
+
+export async function updateMember(slug: string, data: {
+  name?: string;
+  role?: string;
+  status?: string;
+  agent_config?: Partial<AgentConfig>;
+}): Promise<Member> {
+  return request(`/api/v1/members/${slug}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function regenerateToken(slug: string): Promise<{ token: string }> {
+  return request(`/api/v1/members/${slug}/regenerate-token`, { method: "POST" });
+}