feat: agent management page
All checks were successful
Deploy Web Client / deploy (push) Successful in 36s
All checks were successful
Deploy Web Client / deploy (push) Successful in 36s
This commit is contained in:
parent
32f9b26072
commit
7c02c6d213
96
src/app/(protected)/agents/page.tsx
Normal file
96
src/app/(protected)/agents/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
153
src/components/CreateAgentModal.tsx
Normal file
153
src/components/CreateAgentModal.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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)]"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user