@harbinger-ai/harbinger 0.1.1 → 0.1.3

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

@@ -0,0 +1,545 @@
+"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 } from "./icons.js";
+import { getAgentProfilesWithStatus, getAgentProfile, updateAgentFile, createAgent, createAgentJob } from "../actions.js";
+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" }
+  ];
+  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-24 text-foreground/80 border border-white/[0.04]", 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 CreateAgentForm({ onCreated, onClose }) {
+  const [name, setName] = useState("");
+  const [codename, setCodename] = useState("");
+  const [role, setRole] = useState("");
+  const [specialization, setSpecialization] = useState("");
+  const [soul, setSoul] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [result, setResult] = useState(null);
+  async function handleCreate() {
+    if (!name && !codename) return;
+    setCreating(true);
+    const res = await createAgent({ name, codename, role, specialization, soul });
+    setResult(res);
+    if (!res.error) {
+      onCreated();
+      setName("");
+      setCodename("");
+      setRole("");
+      setSpecialization("");
+      setSoul("");
+    }
+    setCreating(false);
+  }
+  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] p-5 mt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", 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__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "Name" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "Reaper",
+                className: "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"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "Codename" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: codename,
+                onChange: (e) => setCodename(e.target.value),
+                placeholder: "REAPER",
+                className: "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"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "Role" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: role,
+                onChange: (e) => setRole(e.target.value),
+                placeholder: "Autonomous Recon Specialist",
+                className: "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"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "Specialization" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: specialization,
+                onChange: (e) => setSpecialization(e.target.value),
+                placeholder: "Bug Bounty Recon",
+                className: "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"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "SOUL.md (optional)" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: soul,
+              onChange: (e) => setSoul(e.target.value),
+              rows: 4,
+              placeholder: "Agent personality and system prompt...",
+              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"
+            }
+          )
+        ] }),
+        result && /* @__PURE__ */ jsx("p", { className: `text-xs font-mono mb-2 ${result.error ? "text-[--destructive]" : "text-green-500"}`, children: result.error || `Agent created: ${result.id}` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", 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__ */ 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"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+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 p-6", 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 "New Agent" 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
+};