@harbinger-ai/harbinger 0.1.2 → 0.1.4

package/lib/chat/components/agents-page.js

@@ -0,0 +1,918 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { UsersIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, PlusIcon, PencilIcon, CheckIcon, XIcon, SearchIcon, CpuIcon, PackageIcon, DatabaseIcon, FolderIcon, ClockIcon, SlidersIcon, TagIcon, HashIcon, PlayIcon } from "./icons.js";
+import { getAgentProfilesWithStatus, getAgentProfile, updateAgentFile, createAgent, createAgentJob, getAvailableMcpTools, getLlmProviders } from "../actions.js";
+const PROVIDER_MODELS = {
+  anthropic: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-haiku-4-5-20251001"],
+  openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "o1", "o1-mini", "o3-mini"],
+  google: ["gemini-2.5-pro", "gemini-2.5-flash", "gemini-2.0-flash"],
+  custom: []
+};
+const ROLE_OPTIONS = ["Recon", "Exploitation", "Reporting", "Infrastructure", "Research", "Analysis", "Development", "Custom"];
+const SPEC_OPTIONS = ["Web", "API", "Mobile", "Cloud", "Network", "Blockchain", "IoT", "Social Engineering", "Custom"];
+const RUN_MODES = ["manual", "scheduled", "continuous", "event-triggered"];
+const SOUL_TEMPLATES = {
+  recon: `# {{CODENAME}}
+
+You are {{NAME}}, an autonomous reconnaissance specialist.
+
+## Mission
+Discover and enumerate all attack surface for the assigned target.
+
+## Approach
+- Start with passive reconnaissance
+- Enumerate subdomains, ports, services
+- Identify technologies and frameworks
+- Map the application architecture
+- Document all findings systematically
+
+## Personality
+- Methodical and thorough
+- Never skip steps
+- Always verify findings`,
+  exploit: `# {{CODENAME}}
+
+You are {{NAME}}, an autonomous exploitation specialist.
+
+## Mission
+Identify and validate security vulnerabilities in assigned targets.
+
+## Approach
+- Analyze attack surface from recon data
+- Test for common vulnerability classes (OWASP Top 10)
+- Develop and validate proof-of-concept exploits
+- Assess impact and severity
+- Document reproduction steps clearly
+
+## Personality
+- Creative and persistent
+- Ethical \u2014 never cause damage
+- Report accurately, no exaggeration`,
+  report: `# {{CODENAME}}
+
+You are {{NAME}}, an autonomous report writer.
+
+## Mission
+Create clear, actionable security reports from findings data.
+
+## Approach
+- Gather all findings and evidence
+- Assess severity using CVSS
+- Write clear reproduction steps
+- Suggest remediation
+- Format for platform submission
+
+## Personality
+- Precise and concise
+- Technical but accessible
+- Focus on impact`,
+  custom: `# {{CODENAME}}
+
+You are {{NAME}}, a specialized AI agent.
+
+## Role
+{{ROLE}}
+
+## Specialization
+{{SPEC}}
+
+## Mission
+Describe the agent's primary objective here.
+
+## Approach
+- Step 1
+- Step 2
+- Step 3`
+};
+function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
+  const codename = agent.codename || agent.name || agent.id;
+  const initial = codename.charAt(0).toUpperCase();
+  const isActive = agent.status === "active";
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, delay: index * 0.04 },
+      className: `rounded-lg border bg-[--card] transition-all hover:border-[--cyan]/20 ${isActive ? "border-green-500/20 shadow-[0_0_15px_oklch(0.7_0.17_145/8%)]" : "border-white/[0.06]"}`,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 w-12 h-12 rounded-lg bg-[--cyan]/10 border border-[--cyan]/20 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xl font-mono font-bold text-[--cyan]", children: initial }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-mono font-semibold text-foreground", children: [
+              "@",
+              codename.toUpperCase()
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full shrink-0 ${isActive ? "bg-green-500 animate-pulse" : "bg-muted-foreground/40"}` }),
+            isActive && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-500 border border-green-500/20 px-2 py-0.5 text-[9px] font-mono font-medium", children: [
+              agent.activeJobs,
+              " job",
+              agent.activeJobs !== 1 ? "s" : "",
+              " running"
+            ] })
+          ] }),
+          agent.role && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 font-mono truncate", children: agent.role }),
+          agent.specialization && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/70 mt-0.5 font-mono truncate", children: agent.specialization })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onViewProfile(agent.id),
+              className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors",
+              children: "View"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onAssignTask(agent),
+              className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors",
+              children: "Assign Task"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function AgentProfilePanel({ agentId, onClose }) {
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [editingFile, setEditingFile] = useState(null);
+  const [editContent, setEditContent] = useState("");
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    setLoading(true);
+    getAgentProfile(agentId).then((p) => {
+      setProfile(p);
+      setLoading(false);
+    });
+  }, [agentId]);
+  async function handleSave() {
+    if (!editingFile) return;
+    setSaving(true);
+    await updateAgentFile(agentId, editingFile, editContent);
+    const updated = await getAgentProfile(agentId);
+    setProfile(updated);
+    setEditingFile(null);
+    setSaving(false);
+  }
+  function startEdit(filename, content) {
+    setEditingFile(filename);
+    setEditContent(content || "");
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, className: "rounded-lg border border-[--cyan]/20 bg-[--card] p-5", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-12 animate-shimmer rounded-md border border-white/[0.06]" }, i)) }) });
+  }
+  if (!profile) return null;
+  const codename = profile.codename || profile.name || profile.id;
+  const files = [
+    { name: "SOUL.md", content: profile.soul, label: "Soul" },
+    { name: "SKILLS.md", content: profile.skills, label: "Skills" },
+    { name: "TOOLS.md", content: profile.tools, label: "Tools" },
+    { name: "HEARTBEAT.md", content: profile.heartbeat, label: "Heartbeat" },
+    { name: "IDENTITY.md", content: null, label: "Identity" }
+  ];
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 12 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 12 },
+      className: "rounded-lg border border-[--cyan]/20 bg-[--card] overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-white/[0.06]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-[--cyan]/10 border border-[--cyan]/20 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-mono font-bold text-[--cyan]", children: codename.charAt(0).toUpperCase() }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-mono font-semibold", children: [
+                "@",
+                codename.toUpperCase()
+              ] }),
+              profile.role && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground", children: profile.role })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(XIcon, { size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-white/[0.06]", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Identity" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 mt-2", children: [
+            profile.name && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground uppercase", children: "Name" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono", children: profile.name })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground uppercase", children: "Codename" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono", children: codename })
+            ] }),
+            profile.role && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground uppercase", children: "Role" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono", children: profile.role })
+            ] }),
+            profile.specialization && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground uppercase", children: "Specialization" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-mono", children: profile.specialization })
+            ] })
+          ] })
+        ] }),
+        profile.config && /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-white/[0.06]", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Config" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-2 text-[11px] bg-black/30 rounded-md p-2.5 font-mono overflow-auto max-h-32 text-foreground/80 border border-white/[0.04] scrollbar-thin", children: JSON.stringify(profile.config, null, 2) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Files" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mt-2", children: files.map((f) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: f.name }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                f.content ? /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-green-500", children: "exists" }) : /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-muted-foreground/50", children: "empty" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => editingFile === f.name ? setEditingFile(null) : startEdit(f.name, f.content),
+                    className: "text-muted-foreground hover:text-[--cyan] transition-colors p-0.5",
+                    children: /* @__PURE__ */ jsx(PencilIcon, { size: 10 })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: editingFile === f.name && /* @__PURE__ */ jsxs(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, className: "overflow-hidden", children: [
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  value: editContent,
+                  onChange: (e) => setEditContent(e.target.value),
+                  rows: 8,
+                  className: "w-full mt-1 text-[11px] border border-white/[0.06] rounded-md p-2.5 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors resize-y"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleSave,
+                    disabled: saving,
+                    className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+                    children: [
+                      saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 10 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 10 }),
+                      " Save"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setEditingFile(null),
+                    className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground",
+                    children: "Cancel"
+                  }
+                )
+              ] })
+            ] }) })
+          ] }, f.name)) })
+        ] })
+      ]
+    }
+  );
+}
+function AssignTaskDialog({ agent, onClose }) {
+  const [prompt, setPrompt] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState(null);
+  async function handleSubmit() {
+    if (!prompt) return;
+    setSubmitting(true);
+    const res = await createAgentJob(agent.id, prompt);
+    setResult(res);
+    setSubmitting(false);
+  }
+  const codename = agent.codename || agent.name || agent.id;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-lg rounded-lg border border-[--cyan]/20 bg-[--card] shadow-2xl", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-white/[0.06]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider ml-1", children: [
+                "Assign Task to @",
+                codename.toUpperCase()
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                value: prompt,
+                onChange: (e) => setPrompt(e.target.value),
+                placeholder: "Describe the task for this agent...",
+                rows: 4,
+                className: "w-full text-sm border border-white/[0.06] rounded-md p-3 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors resize-y",
+                autoFocus: true
+              }
+            ),
+            result && /* @__PURE__ */ jsx("p", { className: `text-xs font-mono mt-2 ${result.error ? "text-[--destructive]" : "text-green-500"}`, children: result.error || "Job created successfully" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-3", children: [
+              /* @__PURE__ */ jsx("button", { onClick: onClose, className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground", children: "Cancel" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleSubmit,
+                  disabled: submitting || !prompt,
+                  className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+                  children: submitting ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : "Create Job"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TabBtn({ active, onClick, icon: Icon, label }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: `inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono font-medium rounded-md border transition-colors ${active ? "bg-[--cyan]/10 text-[--cyan] border-[--cyan]/20" : "border-white/[0.06] text-muted-foreground hover:text-foreground hover:bg-white/[0.04]"}`,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { size: 12 }),
+        label
+      ]
+    }
+  );
+}
+function FormField({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1", children: label }),
+    children
+  ] });
+}
+const inputClass = "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors";
+const selectClass = "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono focus:outline-none focus:border-[--cyan]/40 transition-colors";
+const textareaClass = "w-full text-sm border border-white/[0.06] rounded-md p-3 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors resize-y";
+function CreateAgentForm({ onCreated, onClose }) {
+  const [tab, setTab] = useState("basic");
+  const [creating, setCreating] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [result, setResult] = useState(null);
+  const [mcpTools, setMcpTools] = useState([]);
+  const [loadingTools, setLoadingTools] = useState(false);
+  const [name, setName] = useState("");
+  const [codename, setCodename] = useState("");
+  const [role, setRole] = useState("");
+  const [specialization, setSpecialization] = useState("");
+  const [description, setDescription] = useState("");
+  const [goal, setGoal] = useState("");
+  const [tags, setTags] = useState([]);
+  const [tagInput, setTagInput] = useState("");
+  const [llmProvider, setLlmProvider] = useState("");
+  const [llmModel, setLlmModel] = useState("");
+  const [temperature, setTemperature] = useState(0.7);
+  const [maxTokens, setMaxTokens] = useState(4096);
+  const [soulTemplate, setSoulTemplate] = useState("custom");
+  const [soul, setSoul] = useState("");
+  const [skills, setSkills] = useState("");
+  const [heartbeat, setHeartbeat] = useState("");
+  const [selectedTools, setSelectedTools] = useState([]);
+  const [runMode, setRunMode] = useState("manual");
+  const [schedule, setSchedule] = useState("");
+  const [maxConcurrent, setMaxConcurrent] = useState(1);
+  const [timeout, setTimeout_] = useState(0);
+  const [cpu, setCpu] = useState("1");
+  const [memory, setMemory] = useState("1GB");
+  const [disk, setDisk] = useState("5GB");
+  const [network, setNetwork] = useState("full");
+  const [workDir, setWorkDir] = useState("/workspace");
+  const [allowedPaths, setAllowedPaths] = useState("");
+  const [envVars, setEnvVars] = useState([]);
+  const [swarm, setSwarm] = useState("");
+  const [supervisor, setSupervisor] = useState("");
+  useEffect(() => {
+    if (name && !codename) {
+      setCodename(name.toUpperCase().replace(/[^A-Z0-9]/g, "_").replace(/_+/g, "_"));
+    }
+  }, [name]);
+  useEffect(() => {
+    if (tab === "tools" && mcpTools.length === 0 && !loadingTools) {
+      setLoadingTools(true);
+      getAvailableMcpTools().then((t) => {
+        setMcpTools(t);
+        setLoadingTools(false);
+      }).catch(() => setLoadingTools(false));
+    }
+  }, [tab]);
+  function applySoulTemplate(templateKey) {
+    setSoulTemplate(templateKey);
+    let content = SOUL_TEMPLATES[templateKey] || SOUL_TEMPLATES.custom;
+    content = content.replace(/\{\{CODENAME\}\}/g, codename || "AGENT");
+    content = content.replace(/\{\{NAME\}\}/g, name || "Agent");
+    content = content.replace(/\{\{ROLE\}\}/g, role || "General Agent");
+    content = content.replace(/\{\{SPEC\}\}/g, specialization || "General");
+    setSoul(content);
+  }
+  function addTag() {
+    const t = tagInput.trim().toLowerCase();
+    if (t && !tags.includes(t)) setTags([...tags, t]);
+    setTagInput("");
+  }
+  function addEnvVar() {
+    setEnvVars([...envVars, { key: "", value: "" }]);
+  }
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    const issues = [];
+    if (!name && !codename) issues.push("Name or codename is required");
+    if (llmProvider && !llmModel) issues.push("LLM model not selected");
+    if (runMode === "scheduled" && !schedule) issues.push("Schedule expression is required for scheduled mode");
+    setTestResult(issues.length === 0 ? { success: true } : { issues });
+    setTesting(false);
+  }
+  async function handleCreate() {
+    if (!name && !codename) return;
+    setCreating(true);
+    const identity = {
+      name,
+      codename,
+      role,
+      specialization,
+      description,
+      goal,
+      tags,
+      soul: soul || void 0,
+      skills: skills || void 0,
+      heartbeat: heartbeat || void 0,
+      llm: llmProvider ? { provider: llmProvider, model: llmModel, temperature, maxTokens } : void 0,
+      scheduling: runMode !== "manual" ? { mode: runMode, schedule, maxConcurrent, timeout: timeout || void 0 } : void 0,
+      resources: { cpu, memory, disk, network },
+      mcpTools: selectedTools.length > 0 ? selectedTools : void 0,
+      envVars: envVars.reduce((acc, v) => {
+        if (v.key) acc[v.key] = v.value;
+        return acc;
+      }, {}),
+      team: swarm || supervisor ? { swarm: swarm || void 0, supervisor: supervisor || void 0 } : void 0
+    };
+    const res = await createAgent(identity);
+    setResult(res);
+    if (!res.error) onCreated();
+    setCreating(false);
+  }
+  const TABS = [
+    { id: "basic", label: "Basic", icon: UsersIcon },
+    { id: "llm", label: "LLM", icon: CpuIcon },
+    { id: "soul", label: "Soul", icon: PencilIcon },
+    { id: "tools", label: "Tools", icon: PackageIcon },
+    { id: "schedule", label: "Schedule", icon: ClockIcon },
+    { id: "resources", label: "Resources", icon: SlidersIcon },
+    { id: "files", label: "Files", icon: FolderIcon },
+    { id: "env", label: "Env", icon: HashIcon },
+    { id: "team", label: "Team", icon: UsersIcon }
+  ];
+  return /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-[--cyan]/20 bg-[--card] mt-4 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-white/[0.06]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider ml-1", children: "Create New Agent" })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 p-4 pb-0 overflow-x-auto scrollbar-thin", children: TABS.map((t) => /* @__PURE__ */ jsx(TabBtn, { active: tab === t.id, onClick: () => setTab(t.id), icon: t.icon, label: t.label }, t.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      tab === "basic" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: "Reaper", className: inputClass }) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Codename (auto-generated)", children: /* @__PURE__ */ jsx("input", { value: codename, onChange: (e) => setCodename(e.target.value), placeholder: "REAPER", className: inputClass }) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Role", children: /* @__PURE__ */ jsxs("select", { value: role, onChange: (e) => setRole(e.target.value), className: selectClass, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select role..." }),
+            ROLE_OPTIONS.map((r) => /* @__PURE__ */ jsx("option", { value: r, children: r }, r))
+          ] }) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Specialization", children: /* @__PURE__ */ jsxs("select", { value: specialization, onChange: (e) => setSpecialization(e.target.value), className: selectClass, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select specialization..." }),
+            SPEC_OPTIONS.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s }, s))
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsx("input", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief purpose statement", className: inputClass }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Goal", children: /* @__PURE__ */ jsx("textarea", { value: goal, onChange: (e) => setGoal(e.target.value), placeholder: "Specific mission objective...", rows: 2, className: textareaClass }) }),
+        /* @__PURE__ */ jsxs(FormField, { label: "Tags", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 mb-2", children: tags.map((t) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 px-2 py-0.5 text-[10px] font-mono", children: [
+            t,
+            /* @__PURE__ */ jsx("button", { onClick: () => setTags(tags.filter((x) => x !== t)), className: "hover:text-[--destructive]", children: /* @__PURE__ */ jsx(XIcon, { size: 8 }) })
+          ] }, t)) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: tagInput,
+                onChange: (e) => setTagInput(e.target.value),
+                onKeyDown: (e) => e.key === "Enter" && (e.preventDefault(), addTag()),
+                placeholder: "Add tag...",
+                className: inputClass
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { onClick: addTag, className: "shrink-0 inline-flex items-center gap-1 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors", children: /* @__PURE__ */ jsx(PlusIcon, { size: 12 }) })
+          ] })
+        ] })
+      ] }),
+      tab === "llm" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx(FormField, { label: "Provider", children: /* @__PURE__ */ jsxs("select", { value: llmProvider, onChange: (e) => {
+            setLlmProvider(e.target.value);
+            setLlmModel("");
+          }, className: selectClass, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Default (inherit)" }),
+            /* @__PURE__ */ jsx("option", { value: "anthropic", children: "Anthropic" }),
+            /* @__PURE__ */ jsx("option", { value: "openai", children: "OpenAI" }),
+            /* @__PURE__ */ jsx("option", { value: "google", children: "Google" }),
+            /* @__PURE__ */ jsx("option", { value: "custom", children: "Custom" })
+          ] }) }),
+          /* @__PURE__ */ jsxs(FormField, { label: "Model", children: [
+            /* @__PURE__ */ jsxs("select", { value: llmModel, onChange: (e) => setLlmModel(e.target.value), className: selectClass, disabled: !llmProvider, children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select model..." }),
+              (PROVIDER_MODELS[llmProvider] || []).map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+            ] }),
+            llmProvider === "custom" && /* @__PURE__ */ jsx("input", { value: llmModel, onChange: (e) => setLlmModel(e.target.value), placeholder: "model-name", className: `${inputClass} mt-2` })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { label: `Temperature: ${temperature}`, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "1",
+              step: "0.05",
+              value: temperature,
+              onChange: (e) => setTemperature(parseFloat(e.target.value)),
+              className: "w-full accent-[--cyan]"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[9px] font-mono text-muted-foreground mt-1", children: [
+            /* @__PURE__ */ jsx("span", { children: "Precise (0)" }),
+            /* @__PURE__ */ jsx("span", { children: "Creative (1)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(FormField, { label: "Max Tokens", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", value: maxTokens, onChange: (e) => setMaxTokens(parseInt(e.target.value) || 4096), className: inputClass }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [4096, 8192, 16384].map((v) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMaxTokens(v),
+              className: `px-2 py-1 text-[10px] font-mono rounded border transition-colors ${maxTokens === v ? "bg-[--cyan]/10 text-[--cyan] border-[--cyan]/20" : "border-white/[0.06] text-muted-foreground hover:text-foreground"}`,
+              children: v >= 1e3 ? `${v / 1e3}k` : v
+            },
+            v
+          )) })
+        ] }) })
+      ] }),
+      tab === "soul" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Template", children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 mb-2", children: Object.entries({ recon: "Recon Agent", exploit: "Exploit Dev", report: "Report Writer", custom: "Custom" }).map(([k, label]) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => applySoulTemplate(k),
+            className: `px-3 py-1.5 text-xs font-mono rounded-md border transition-colors ${soulTemplate === k ? "bg-[--cyan]/10 text-[--cyan] border-[--cyan]/20" : "border-white/[0.06] text-muted-foreground hover:text-foreground hover:bg-white/[0.04]"}`,
+            children: label
+          },
+          k
+        )) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "SOUL.md", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: soul,
+            onChange: (e) => setSoul(e.target.value),
+            rows: 10,
+            placeholder: "Agent personality and system prompt...",
+            className: textareaClass
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField, { label: "SKILLS.md (optional)", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: skills,
+            onChange: (e) => setSkills(e.target.value),
+            rows: 4,
+            placeholder: "Define agent skills and capabilities...",
+            className: textareaClass
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField, { label: "HEARTBEAT.md (optional)", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: heartbeat,
+            onChange: (e) => setHeartbeat(e.target.value),
+            rows: 3,
+            placeholder: "Self-monitoring behavior...",
+            className: textareaClass
+          }
+        ) })
+      ] }),
+      tab === "tools" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground", children: "Select MCP tools this agent can use." }),
+        loadingTools ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-4", children: [
+          /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground", children: "Loading tools..." })
+        ] }) : mcpTools.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-muted-foreground py-4", children: "No MCP tools configured. Add tools in Settings > MCP." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-[300px] overflow-y-auto scrollbar-thin", children: mcpTools.map((tool) => {
+          const checked = selectedTools.includes(tool.name);
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: `flex items-start gap-2.5 p-2.5 rounded-lg border cursor-pointer transition-colors ${checked ? "border-[--cyan]/30 bg-[--cyan]/5" : "border-white/[0.06] bg-[--card] hover:border-white/[0.12]"}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked,
+                    onChange: (e) => setSelectedTools(e.target.checked ? [...selectedTools, tool.name] : selectedTools.filter((t) => t !== tool.name)),
+                    className: "mt-0.5 accent-[--cyan]"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-mono font-medium truncate", children: tool.name }),
+                  tool.description && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground truncate mt-0.5", children: tool.description })
+                ] })
+              ]
+            },
+            tool.name
+          );
+        }) }),
+        selectedTools.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: "Selected:" }),
+          selectedTools.map((t) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 px-2 py-0.5 text-[9px] font-mono", children: [
+            t,
+            /* @__PURE__ */ jsx("button", { onClick: () => setSelectedTools(selectedTools.filter((x) => x !== t)), children: /* @__PURE__ */ jsx(XIcon, { size: 8 }) })
+          ] }, t))
+        ] })
+      ] }),
+      tab === "schedule" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Run Mode", children: /* @__PURE__ */ jsx("select", { value: runMode, onChange: (e) => setRunMode(e.target.value), className: selectClass, children: RUN_MODES.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m)) }) }),
+        runMode === "scheduled" && /* @__PURE__ */ jsxs(FormField, { label: "Cron Schedule", children: [
+          /* @__PURE__ */ jsx("input", { value: schedule, onChange: (e) => setSchedule(e.target.value), placeholder: "0 */6 * * *", className: inputClass }),
+          /* @__PURE__ */ jsx("p", { className: "text-[9px] font-mono text-muted-foreground mt-1", children: "Standard cron expression (min hour dom month dow)" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx(FormField, { label: "Max Concurrent Jobs", children: /* @__PURE__ */ jsx("select", { value: maxConcurrent, onChange: (e) => setMaxConcurrent(parseInt(e.target.value)), className: selectClass, children: [1, 2, 5, 10].map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v)) }) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Timeout (seconds, 0=none)", children: /* @__PURE__ */ jsx("input", { type: "number", value: timeout, onChange: (e) => setTimeout_(parseInt(e.target.value) || 0), className: inputClass, min: "0" }) })
+        ] })
+      ] }),
+      tab === "resources" && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "CPU Cores", children: /* @__PURE__ */ jsx("select", { value: cpu, onChange: (e) => setCpu(e.target.value), className: selectClass, children: ["0.5", "1", "2", "4"].map((v) => /* @__PURE__ */ jsxs("option", { value: v, children: [
+          v,
+          " core",
+          v !== "1" ? "s" : ""
+        ] }, v)) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Memory", children: /* @__PURE__ */ jsx("select", { value: memory, onChange: (e) => setMemory(e.target.value), className: selectClass, children: ["512MB", "1GB", "2GB", "4GB", "8GB"].map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v)) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Disk", children: /* @__PURE__ */ jsx("select", { value: disk, onChange: (e) => setDisk(e.target.value), className: selectClass, children: ["1GB", "5GB", "10GB", "Unlimited"].map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v)) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Network", children: /* @__PURE__ */ jsxs("select", { value: network, onChange: (e) => setNetwork(e.target.value), className: selectClass, children: [
+          /* @__PURE__ */ jsx("option", { value: "isolated", children: "Isolated" }),
+          /* @__PURE__ */ jsx("option", { value: "internal", children: "Internal only" }),
+          /* @__PURE__ */ jsx("option", { value: "full", children: "Full internet" })
+        ] }) })
+      ] }) }),
+      tab === "files" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Working Directory", children: /* @__PURE__ */ jsx("input", { value: workDir, onChange: (e) => setWorkDir(e.target.value), className: inputClass }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Allowed Paths (comma-separated)", children: /* @__PURE__ */ jsx("input", { value: allowedPaths, onChange: (e) => setAllowedPaths(e.target.value), placeholder: "/workspace, /tmp", className: inputClass }) })
+      ] }),
+      tab === "env" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground", children: "Agent-specific environment variables." }),
+        envVars.map((v, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: v.key,
+              onChange: (e) => {
+                const nv = [...envVars];
+                nv[i] = { ...nv[i], key: e.target.value };
+                setEnvVars(nv);
+              },
+              placeholder: "KEY",
+              className: inputClass
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: v.value,
+              onChange: (e) => {
+                const nv = [...envVars];
+                nv[i] = { ...nv[i], value: e.target.value };
+                setEnvVars(nv);
+              },
+              placeholder: "value",
+              className: inputClass
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setEnvVars(envVars.filter((_, j) => j !== i)),
+              className: "shrink-0 p-2 text-muted-foreground hover:text-[--destructive] transition-colors",
+              children: /* @__PURE__ */ jsx(TrashIcon, { size: 12 })
+            }
+          )
+        ] }, i)),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: addEnvVar,
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-mono font-medium border border-dashed border-white/[0.12] hover:bg-white/[0.04] transition-colors text-muted-foreground hover:text-foreground self-start",
+            children: [
+              /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
+              " Add Variable"
+            ]
+          }
+        )
+      ] }),
+      tab === "team" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Part of Swarm", children: /* @__PURE__ */ jsxs("select", { value: swarm, onChange: (e) => setSwarm(e.target.value), className: selectClass, children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "None" }),
+          /* @__PURE__ */ jsx("option", { value: "recon-team", children: "Recon Team" }),
+          /* @__PURE__ */ jsx("option", { value: "exploit-team", children: "Exploit Team" }),
+          /* @__PURE__ */ jsx("option", { value: "full-swarm", children: "Full Swarm" })
+        ] }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Supervisor Agent", children: /* @__PURE__ */ jsx("input", { value: supervisor, onChange: (e) => setSupervisor(e.target.value), placeholder: "@OVERSEER", className: inputClass }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-4 pt-4 border-t border-white/[0.06]", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleCreate,
+            disabled: creating || !name && !codename,
+            className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+            children: [
+              creating ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
+              " Create Agent"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleTest,
+            disabled: testing,
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground hover:text-foreground disabled:opacity-50",
+            children: [
+              testing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 12 }),
+              " Validate"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground",
+            children: "Cancel"
+          }
+        ),
+        result && /* @__PURE__ */ jsx("p", { className: `text-xs font-mono ml-2 ${result.error ? "text-[--destructive]" : "text-green-500"}`, children: result.error || `Agent created: ${result.id}` }),
+        testResult && /* @__PURE__ */ jsx("p", { className: `text-xs font-mono ml-2 ${testResult.success ? "text-green-500" : "text-yellow-500"}`, children: testResult.success ? "Configuration valid" : testResult.issues?.join(", ") })
+      ] })
+    ] })
+  ] }) });
+}
+function AgentsPage() {
+  const [agents, setAgents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [viewingProfile, setViewingProfile] = useState(null);
+  const [assigningTask, setAssigningTask] = useState(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [search, setSearch] = useState("");
+  async function load() {
+    try {
+      const a = await getAgentProfilesWithStatus();
+      setAgents(a);
+    } catch {
+    }
+    setLoading(false);
+    setRefreshing(false);
+  }
+  useEffect(() => {
+    load();
+  }, []);
+  const activeCount = agents.filter((a) => a.status === "active").length;
+  const filtered = agents.filter((a) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    const codename = (a.codename || a.name || a.id || "").toLowerCase();
+    const role = (a.role || "").toLowerCase();
+    return codename.includes(q) || role.includes(q);
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded-lg bg-white/[0.04]" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-mono font-semibold text-[--cyan] text-glow-cyan", children: "Agents" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-1 font-mono", children: "Manage agent profiles, roles, and assignments" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20", children: [
+          agents.length,
+          " agents"
+        ] }),
+        activeCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-green-500/10 text-green-500 border border-green-500/20", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" }),
+          activeCount,
+          " active"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setShowCreate(!showCreate),
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
+              " New Agent"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setRefreshing(true);
+              load();
+            },
+            disabled: refreshing,
+            className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium border border-white/[0.06] text-muted-foreground hover:text-foreground hover:bg-white/[0.04] disabled:opacity-50 transition-colors",
+            children: refreshing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }) : /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-4 rounded-lg border border-white/[0.06] bg-[--card]", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-[--cyan] font-mono", children: agents.length }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1", children: "Agents" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-4 rounded-lg border border-white/[0.06] bg-[--card]", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-green-500 font-mono", children: activeCount }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1", children: "Active" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-4 rounded-lg border border-white/[0.06] bg-[--card]", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold font-mono text-muted-foreground", children: agents.length - activeCount }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1", children: "Idle" })
+      ] })
+    ] }),
+    agents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          placeholder: "Search agents...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: "w-full text-sm border border-white/[0.06] rounded-md pl-9 pr-3 py-2 bg-black/20 font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: showCreate && /* @__PURE__ */ jsx(CreateAgentForm, { onCreated: () => {
+      load();
+      setShowCreate(false);
+    }, onClose: () => setShowCreate(false) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 mt-4", children: filtered.length === 0 && agents.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center rounded-lg border border-white/[0.06] bg-[--card]", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-[--cyan]/10 p-4 mb-4", children: /* @__PURE__ */ jsx(UsersIcon, { size: 24, className: "text-[--cyan]" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "No agents configured" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground font-mono max-w-sm", children: [
+        "Create agent profiles in the ",
+        /* @__PURE__ */ jsx("span", { className: "text-[--cyan]", children: "agents/" }),
+        " directory or click \u201CNew Agent\u201D above."
+      ] })
+    ] }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-12 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(SearchIcon, { size: 24 }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-mono text-muted-foreground", children: "No agents match your search." })
+    ] }) : filtered.map((agent, i) => /* @__PURE__ */ jsx(AgentCard, { agent, onViewProfile: setViewingProfile, onAssignTask: setAssigningTask, index: i }, agent.id)) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: viewingProfile && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(AgentProfilePanel, { agentId: viewingProfile, onClose: () => setViewingProfile(null) }) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: assigningTask && /* @__PURE__ */ jsx(AssignTaskDialog, { agent: assigningTask, onClose: () => setAssigningTask(null) }) })
+  ] });
+}
+export {
+  AgentsPage
+};