@mndrk/agx 2.0.19 → 2.0.21

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/app/agents/page.tsx

@@ -1,15 +1,19 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import Link from "next/link";
 import {
   ArrowLeft,
   ChevronDown,
   ChevronRight,
+  Copy,
+  Check,
   Download,
+  Eye,
   Hash,
   Pencil,
   Plus,
+  Share2,
   Trash2,
   Upload,
   Users,
@@ -74,31 +78,61 @@ export default function AgentLibraryPage() {
   const [renameModal, setRenameModal] = useState<{ teamId: string; currentName: string } | null>(null);
   const [renameValue, setRenameValue] = useState("");
 
-  // Export state
-  const [exportModal, setExportModal] = useState(false);
-  const [exportAgents, setExportAgents] = useState<Set<string>>(new Set());
-  const [exportIncludeSelf, setExportIncludeSelf] = useState(true);
-  const [exporting, setExporting] = useState(false);
-
-  // Import state
-  const [importModal, setImportModal] = useState(false);
-  const [importBundle, setImportBundle] = useState<AgentBundle | null>(null);
-  const [importAgents, setImportAgents] = useState<Set<string>>(new Set());
-  const [importTeams, setImportTeams] = useState<Set<string>>(new Set());
-  const [importing, setImporting] = useState(false);
-  const [importError, setImportError] = useState<string | null>(null);
+  // Edit agent state
+  const [editAgent, setEditAgent] = useState<Participant | null>(null);
+
+  // Outbound modal (Share = Push to Hub + Export to File)
+  const [outboundModal, setOutboundModal] = useState(false);
+  const [outboundAgents, setOutboundAgents] = useState<Set<string>>(new Set());
+  const [outboundIncludeSelf, setOutboundIncludeSelf] = useState(true);
+  const [outboundBusy, setOutboundBusy] = useState(false);
+  const [shareCode, setShareCode] = useState<string | null>(null);
+  const [shareExpiresAt, setShareExpiresAt] = useState<string | null>(null);
+  const [codeCopied, setCodeCopied] = useState(false);
+
+  // Inbound modal (Import = Pull from Hub + Upload File)
+  const [inboundModal, setInboundModal] = useState(false);
+  const [inboundMode, setInboundMode] = useState<"choice" | "pull" | "file">("choice");
+  const [pullCode, setPullCode] = useState("");
+  const [pulling, setPulling] = useState(false);
+  const [inboundBundle, setInboundBundle] = useState<AgentBundle | null>(null);
+  const [inboundAgents, setInboundAgents] = useState<Set<string>>(new Set());
+  const [inboundTeams, setInboundTeams] = useState<Set<string>>(new Set());
+  const [inboundBusy, setInboundBusy] = useState(false);
+  const [inboundError, setInboundError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Track which agents have active processes
+  const [workingAgents, setWorkingAgents] = useState<Set<string>>(new Set());
+
   const refreshParticipants = () => {
     void fetch("/api/participants")
       .then((r) => r.json())
       .then((data) => setParticipants(Array.isArray(data) ? data : []));
   };
 
+  const pollProcesses = useCallback(async () => {
+    try {
+      const res = await fetch("/api/processes");
+      if (!res.ok) return;
+      const entries: { agentId: string; state: string }[] = await res.json();
+      setWorkingAgents(
+        new Set(
+          entries
+            .filter((e) => e.state === "spawning" || e.state === "running")
+            .map((e) => e.agentId)
+        )
+      );
+    } catch { /* ignore */ }
+  }, []);
+
   useEffect(() => {
     refreshParticipants();
     void threadService.listThreads().then(setThreads);
-  }, []);
+    pollProcesses();
+    const id = setInterval(pollProcesses, 3000);
+    return () => clearInterval(id);
+  }, [pollProcesses]);
 
   const threadById = new Map(threads.map((t) => [t.id, t]));
   const nonDefaultTeams = teams.filter((t) => !t.is_default);
@@ -130,20 +164,45 @@ export default function AgentLibraryPage() {
     setRenameModal(null);
   };
 
-  // ── Export ──────────────────────────────────────────────────────────────
+  // ── Outbound (Share / Export) ──────────────────────────────────────
 
-  const openExportModal = () => {
-    setExportAgents(new Set(participants.map((p) => p.id)));
-    setExportIncludeSelf(true);
-    setExportModal(true);
+  const openOutboundModal = () => {
+    setOutboundAgents(new Set(participants.map((p) => p.id)));
+    setOutboundIncludeSelf(true);
+    setShareCode(null);
+    setShareExpiresAt(null);
+    setCodeCopied(false);
+    setOutboundModal(true);
   };
 
-  const handleExport = async () => {
-    if (exportAgents.size === 0) return;
-    setExporting(true);
+  const handlePushToHub = async () => {
+    if (outboundAgents.size === 0) return;
+    setOutboundBusy(true);
     try {
-      // Fetch agent data including self.md from server
-      const agentIds = Array.from(exportAgents);
+      const res = await fetch("/api/agent-specs", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          agentIds: Array.from(outboundAgents),
+          includeSelf: outboundIncludeSelf,
+        }),
+      });
+      if (!res.ok) throw new Error("Share failed");
+      const data = await res.json();
+      setShareCode(data.code);
+      setShareExpiresAt(data.expires_at);
+    } catch (e) {
+      console.error("Share error:", e);
+    } finally {
+      setOutboundBusy(false);
+    }
+  };
+
+  const handleExportToFile = async () => {
+    if (outboundAgents.size === 0) return;
+    setOutboundBusy(true);
+    try {
+      const agentIds = Array.from(outboundAgents);
       const res = await fetch("/api/agents/export", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -154,7 +213,7 @@ export default function AgentLibraryPage() {
 
       const bundleAgents: BundleAgent[] = (data.agents as BundleAgent[]).map((a) => ({
         ...a,
-        self: exportIncludeSelf ? a.self : null,
+        self: outboundIncludeSelf ? a.self : null,
       }));
 
       const bundle: AgentBundle = {
@@ -164,7 +223,6 @@ export default function AgentLibraryPage() {
         teams: [],
       };
 
-      // Download as JSON
       const blob = new Blob([JSON.stringify(bundle, null, 2)], { type: "application/json" });
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
@@ -175,20 +233,37 @@ export default function AgentLibraryPage() {
       a.download = nameHint;
       a.click();
       URL.revokeObjectURL(url);
-      setExportModal(false);
+      setOutboundModal(false);
     } catch (e) {
       console.error("Export error:", e);
     } finally {
-      setExporting(false);
+      setOutboundBusy(false);
     }
   };
 
-  // ── Import ──────────────────────────────────────────────────────────────
+  const copyCode = () => {
+    if (!shareCode) return;
+    navigator.clipboard.writeText(shareCode);
+    setCodeCopied(true);
+    setTimeout(() => setCodeCopied(false), 2000);
+  };
+
+  // ── Inbound (Pull / Upload) ─────────────────────────────────────
+
+  const openInboundModal = () => {
+    setInboundMode("choice");
+    setPullCode("");
+    setInboundBundle(null);
+    setInboundAgents(new Set());
+    setInboundTeams(new Set());
+    setInboundError(null);
+    setInboundModal(true);
+  };
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-    setImportError(null);
+    setInboundError(null);
 
     const reader = new FileReader();
     reader.onload = () => {
@@ -197,29 +272,49 @@ export default function AgentLibraryPage() {
         if (!bundle.version || !Array.isArray(bundle.agents)) {
           throw new Error("Invalid bundle format");
         }
-        setImportBundle(bundle);
-        setImportAgents(new Set(bundle.agents.map((a) => a.id)));
-        setImportTeams(new Set((bundle.teams ?? []).map((t) => t.name)));
-        setImportModal(true);
+        setInboundBundle(bundle);
+        setInboundAgents(new Set(bundle.agents.map((a) => a.id)));
+        setInboundTeams(new Set((bundle.teams ?? []).map((t) => t.name)));
       } catch {
-        setImportError("Invalid file. Expected an .agent.json bundle.");
+        setInboundError("Invalid file. Expected an .agent.json bundle.");
       }
     };
     reader.readAsText(file);
-    // Reset so same file can be re-selected
     e.target.value = "";
   };
 
-  const handleImport = async () => {
-    if (!importBundle) return;
-    setImporting(true);
+  const handlePullFetch = async () => {
+    if (pullCode.trim().length === 0) return;
+    setPulling(true);
+    setInboundError(null);
+    setInboundBundle(null);
     try {
-      const existingIds = new Set(participants.map((p) => p.id));
+      const res = await fetch(`/api/agent-specs/pull?code=${encodeURIComponent(pullCode.trim())}`);
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Failed to pull" }));
+        setInboundError(data.error || "Code not found or expired");
+        return;
+      }
+      const data = await res.json();
+      const bundle = data.bundle as AgentBundle;
+      setInboundBundle(bundle);
+      setInboundAgents(new Set(bundle.agents.map((a) => a.id)));
+      setInboundTeams(new Set((bundle.teams ?? []).map((t) => t.name)));
+    } catch {
+      setInboundError("Failed to connect. Is agx-api running?");
+    } finally {
+      setPulling(false);
+    }
+  };
 
-      // Import selected agents
-      for (const agent of importBundle.agents) {
-        if (!importAgents.has(agent.id)) continue;
+  const handleInboundImport = async () => {
+    if (!inboundBundle) return;
+    setInboundBusy(true);
+    try {
+      const existingIds = new Set(participants.map((p) => p.id));
 
+      for (const agent of inboundBundle.agents) {
+        if (!inboundAgents.has(agent.id)) continue;
         const payload: Record<string, unknown> = {
           name: agent.name,
           provider: agent.provider,
@@ -230,9 +325,7 @@ export default function AgentLibraryPage() {
           skills: agent.skills || [],
           variables: agent.variables || {},
         };
-
         if (existingIds.has(agent.id)) {
-          // Update existing
           payload.id = agent.id;
           await fetch("/api/participants", {
             method: "PATCH",
@@ -240,7 +333,6 @@ export default function AgentLibraryPage() {
             body: JSON.stringify(payload),
           });
         } else {
-          // Create new
           await fetch("/api/participants", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
@@ -249,30 +341,27 @@ export default function AgentLibraryPage() {
         }
       }
 
-      // Import selected teams
-      for (const bundleTeam of importBundle.teams ?? []) {
-        if (!importTeams.has(bundleTeam.name)) continue;
-
+      for (const bundleTeam of inboundBundle.teams ?? []) {
+        if (!inboundTeams.has(bundleTeam.name)) continue;
         const team = await createTeam(bundleTeam.name);
         if (team) {
           for (const agentId of bundleTeam.agentIds) {
-            if (importAgents.has(agentId)) {
+            if (inboundAgents.has(agentId)) {
               await addAgentToTeam(team.id, agentId);
             }
           }
         }
       }
 
-      // Refresh data
       refreshParticipants();
       await refreshTeams();
-      setImportModal(false);
-      setImportBundle(null);
+      setInboundModal(false);
+      setInboundBundle(null);
     } catch (e) {
       console.error("Import error:", e);
-      setImportError("Import failed. Check console for details.");
+      setInboundError("Import failed. Check console for details.");
     } finally {
-      setImporting(false);
+      setInboundBusy(false);
     }
   };
 
@@ -314,10 +403,19 @@ export default function AgentLibraryPage() {
             </button>
             <button
               type="button"
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors"
-              onClick={() => fileInputRef.current?.click()}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-700 transition-colors"
+              onClick={openOutboundModal}
+              disabled={participants.length === 0}
             >
-              <Upload size={13} />
+              <Share2 size={13} />
+              Share
+            </button>
+            <button
+              type="button"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-violet-600 bg-violet-50 border border-violet-200 rounded-lg hover:bg-violet-100 transition-colors"
+              onClick={openInboundModal}
+            >
+              <Download size={13} />
               Import
             </button>
             <input
@@ -327,22 +425,13 @@ export default function AgentLibraryPage() {
               className="hidden"
               onChange={handleFileSelect}
             />
-            <button
-              type="button"
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors"
-              onClick={openExportModal}
-              disabled={participants.length === 0}
-            >
-              <Download size={13} />
-              Export
-            </button>
           </div>
         </div>
 
-        {importError && (
+        {inboundError && !inboundModal && (
           <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700 flex items-center justify-between">
-            <span>{importError}</span>
-            <button type="button" onClick={() => setImportError(null)} className="text-red-400 hover:text-red-600"><X size={14} /></button>
+            <span>{inboundError}</span>
+            <button type="button" onClick={() => setInboundError(null)} className="text-red-400 hover:text-red-600"><X size={14} /></button>
           </div>
         )}
 
@@ -352,10 +441,9 @@ export default function AgentLibraryPage() {
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {participants.map((p) => (
-              <Link
+              <div
                 key={p.id}
-                href={`/agents/${p.id}`}
-                className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow text-left cursor-pointer block"
+                className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow text-left group"
               >
                 <div className="flex items-start gap-3 mb-3">
                   <img
@@ -366,6 +454,12 @@ export default function AgentLibraryPage() {
                   <div className="min-w-0 flex-1">
                     <h3 className="font-medium text-slate-900 truncate">{p.name}</h3>
                     <p className="text-xs text-slate-400 truncate mt-0.5">{p.model}</p>
+                    {workingAgents.has(p.id) && (
+                      <span className="inline-flex items-center gap-1 mt-1 text-[10px] font-medium text-emerald-600">
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                        Working
+                      </span>
+                    )}
                   </div>
                 </div>
 
@@ -387,12 +481,29 @@ export default function AgentLibraryPage() {
                   </div>
                 )}
 
-                <div className="flex items-center gap-1.5 pt-2 border-t border-slate-100">
+                <div className="flex items-center justify-between pt-2 border-t border-slate-100">
                   <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-600 uppercase tracking-wide">
                     {p.provider}
                   </span>
+                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button
+                      type="button"
+                      title="Edit"
+                      onClick={() => setEditAgent(p)}
+                      className="p-1.5 text-slate-400 hover:text-slate-600 rounded hover:bg-slate-50 transition-colors"
+                    >
+                      <Pencil size={13} />
+                    </button>
+                    <Link
+                      href={`/agents/${p.id}`}
+                      title="View profile"
+                      className="p-1.5 text-slate-400 hover:text-slate-600 rounded hover:bg-slate-50 transition-colors"
+                    >
+                      <Eye size={13} />
+                    </Link>
+                  </div>
                 </div>
-              </Link>
+              </div>
             ))}
           </div>
         )}
@@ -539,286 +650,180 @@ export default function AgentLibraryPage() {
         </div>
       </div>
 
-      {/* ── Export Modal ──────────────────────────────────────────────────── */}
-      {exportModal && (
+      {/* ── Outbound Modal (Share: Push to Hub / Export to File) ─────────── */}
+      {outboundModal && (
         <div
           className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
-          onClick={() => setExportModal(false)}
+          onClick={() => setOutboundModal(false)}
         >
           <div
             className="bg-white rounded-xl shadow-xl border border-slate-200 w-[440px] max-h-[80vh] flex flex-col"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-100">
-              <h3 className="text-sm font-medium text-slate-900">Export Agents & Teams</h3>
-              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setExportModal(false)}>
+              <h3 className="text-sm font-medium text-slate-900">Share Agents</h3>
+              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setOutboundModal(false)}>
                 <X size={16} />
               </button>
             </div>
 
-            <div className="overflow-y-auto flex-1">
-              {/* Teams as quick-select presets */}
-              {nonDefaultTeams.length > 0 && (
-                <div className="border-b border-slate-100 px-5 py-3">
-                  <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide mb-2">Select by team</p>
-                  <div className="flex flex-wrap gap-1.5">
-                    {nonDefaultTeams.map((t) => {
-                      const teamAgentIds = t.agents.map((a) => a.agent_id);
-                      const allSelected = teamAgentIds.length > 0 && teamAgentIds.every((id) => exportAgents.has(id));
-                      const someSelected = teamAgentIds.some((id) => exportAgents.has(id));
+            {shareCode ? (
+              <div className="px-5 py-6 flex flex-col items-center gap-4">
+                <div className="text-center">
+                  <p className="text-sm text-slate-600 mb-3">Share this code with the recipient:</p>
+                  <div className="flex items-center justify-center gap-3">
+                    <span className="text-3xl font-mono font-bold tracking-[0.3em] text-slate-900">{shareCode}</span>
+                    <button type="button" className="p-2 text-slate-400 hover:text-slate-600 transition-colors" onClick={copyCode}>
+                      {codeCopied ? <Check size={18} className="text-green-500" /> : <Copy size={18} />}
+                    </button>
+                  </div>
+                </div>
+                {shareExpiresAt && (
+                  <p className="text-[11px] text-slate-400">Expires {new Date(shareExpiresAt).toLocaleTimeString()}</p>
+                )}
+                <button
+                  type="button"
+                  className="px-4 py-2 text-xs font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors"
+                  onClick={() => setOutboundModal(false)}
+                >
+                  Done
+                </button>
+              </div>
+            ) : (
+              <>
+                <div className="overflow-y-auto flex-1">
+                  {/* Teams as quick-select presets */}
+                  {nonDefaultTeams.length > 0 && (
+                    <div className="border-b border-slate-100 px-5 py-3">
+                      <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide mb-2">Select by team</p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {nonDefaultTeams.map((t) => {
+                          const teamAgentIds = t.agents.map((a) => a.agent_id);
+                          const allSelected = teamAgentIds.length > 0 && teamAgentIds.every((id) => outboundAgents.has(id));
+                          const someSelected = teamAgentIds.some((id) => outboundAgents.has(id));
+                          return (
+                            <button
+                              key={t.id}
+                              type="button"
+                              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${
+                                allSelected
+                                  ? "bg-slate-900 text-white"
+                                  : someSelected
+                                    ? "bg-slate-300 text-slate-700"
+                                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
+                              }`}
+                              onClick={() => {
+                                setOutboundAgents((prev) => {
+                                  const next = new Set(prev);
+                                  if (allSelected) {
+                                    teamAgentIds.forEach((id) => next.delete(id));
+                                  } else {
+                                    teamAgentIds.forEach((id) => next.add(id));
+                                  }
+                                  return next;
+                                });
+                              }}
+                              title={teamAgentIds.map((id) => participants.find((p) => p.id === id)?.name ?? id).join(", ")}
+                            >
+                              <Users size={10} />
+                              {t.name}
+                              <span className={`text-[10px] ${allSelected ? "text-slate-300" : "text-slate-400"}`}>
+                                {t.agents.length}
+                              </span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Agents selection */}
+                  <div className="border-b border-slate-100">
+                    <div className="px-5 pt-3 pb-1 flex items-center justify-between">
+                      <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
+                      <button
+                        type="button"
+                        className="text-[11px] text-slate-400 hover:text-slate-600"
+                        onClick={() => {
+                          if (outboundAgents.size === participants.length) setOutboundAgents(new Set());
+                          else setOutboundAgents(new Set(participants.map((p) => p.id)));
+                        }}
+                      >
+                        {outboundAgents.size === participants.length ? "Deselect all" : "Select all"}
+                      </button>
+                    </div>
+                    {participants.map((p) => {
+                      const selected = outboundAgents.has(p.id);
                       return (
                         <button
-                          key={t.id}
+                          key={p.id}
                           type="button"
-                          className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${
-                            allSelected
-                              ? "bg-slate-900 text-white"
-                              : someSelected
-                                ? "bg-slate-300 text-slate-700"
-                                : "bg-slate-100 text-slate-600 hover:bg-slate-200"
-                          }`}
+                          className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
                           onClick={() => {
-                            setExportAgents((prev) => {
+                            setOutboundAgents((prev) => {
                               const next = new Set(prev);
-                              if (allSelected) {
-                                teamAgentIds.forEach((id) => next.delete(id));
-                              } else {
-                                teamAgentIds.forEach((id) => next.add(id));
-                              }
+                              if (next.has(p.id)) next.delete(p.id);
+                              else next.add(p.id);
                               return next;
                             });
                           }}
-                          title={teamAgentIds.map((id) => participants.find((p) => p.id === id)?.name ?? id).join(", ")}
                         >
-                          <Users size={10} />
-                          {t.name}
-                          <span className={`text-[10px] ${allSelected ? "text-slate-300" : "text-slate-400"}`}>
-                            {t.agents.length}
-                          </span>
+                          <Checkbox checked={selected} />
+                          <img src={agentAvatarUrl(p.id, 24, p.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
+                          <span className="truncate text-xs font-medium flex-1">{p.name}</span>
+                          <span className="text-[10px] text-slate-400">{p.provider}</span>
                         </button>
                       );
                     })}
                   </div>
-                </div>
-              )}
 
-              {/* Agents selection */}
-              <div className="border-b border-slate-100">
-                <div className="px-5 pt-3 pb-1 flex items-center justify-between">
-                  <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
-                  <button
-                    type="button"
-                    className="text-[11px] text-slate-400 hover:text-slate-600"
-                    onClick={() => {
-                      if (exportAgents.size === participants.length) setExportAgents(new Set());
-                      else setExportAgents(new Set(participants.map((p) => p.id)));
-                    }}
-                  >
-                    {exportAgents.size === participants.length ? "Deselect all" : "Select all"}
-                  </button>
-                </div>
-                {participants.map((p) => {
-                  const selected = exportAgents.has(p.id);
-                  return (
+                  {/* Options */}
+                  <div className="px-5 py-3">
                     <button
-                      key={p.id}
                       type="button"
-                      className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
-                      onClick={() => {
-                        setExportAgents((prev) => {
-                          const next = new Set(prev);
-                          if (next.has(p.id)) next.delete(p.id);
-                          else next.add(p.id);
-                          return next;
-                        });
-                      }}
+                      className={`flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm transition-colors ${outboundIncludeSelf ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                      onClick={() => setOutboundIncludeSelf(!outboundIncludeSelf)}
                     >
-                      <Checkbox checked={selected} />
-                      <img src={agentAvatarUrl(p.id, 24, p.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
-                      <span className="truncate text-xs font-medium flex-1">{p.name}</span>
-                      <span className="text-[10px] text-slate-400">{p.provider}</span>
+                      <Checkbox checked={outboundIncludeSelf} />
+                      <span className="text-xs font-medium">Include self.md (agent bio)</span>
                     </button>
-                  );
-                })}
-              </div>
-
-              {/* Options */}
-              <div className="px-5 py-3">
-                <button
-                  type="button"
-                  className={`flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm transition-colors ${exportIncludeSelf ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
-                  onClick={() => setExportIncludeSelf(!exportIncludeSelf)}
-                >
-                  <Checkbox checked={exportIncludeSelf} />
-                  <span className="text-xs font-medium">Include self.md (agent bio)</span>
-                </button>
-              </div>
-            </div>
-
-            <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
-              <span className="text-[11px] text-slate-400">
-                {exportAgents.size} {exportAgents.size === 1 ? "agent" : "agents"}
-              </span>
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors"
-                  onClick={() => setExportModal(false)}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  disabled={exportAgents.size === 0 || exporting}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-                  onClick={() => void handleExport()}
-                >
-                  <Download size={12} />
-                  {exporting ? "Exporting..." : "Export"}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* ── Import Modal ──────────────────────────────────────────────────── */}
-      {importModal && importBundle && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
-          onClick={() => { setImportModal(false); setImportBundle(null); }}
-        >
-          <div
-            className="bg-white rounded-xl shadow-xl border border-slate-200 w-[440px] max-h-[80vh] flex flex-col"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-100">
-              <h3 className="text-sm font-medium text-slate-900">Import Agents & Teams</h3>
-              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => { setImportModal(false); setImportBundle(null); }}>
-                <X size={16} />
-              </button>
-            </div>
-
-            <div className="overflow-y-auto flex-1">
-              {/* Bundle info */}
-              <div className="px-5 py-3 border-b border-slate-100 bg-slate-50">
-                <p className="text-[11px] text-slate-400">
-                  Exported {new Date(importBundle.exportedAt).toLocaleDateString()} · {importBundle.agents.length} agents, {(importBundle.teams ?? []).length} teams
-                </p>
-              </div>
-
-              {/* Agents */}
-              <div className="border-b border-slate-100">
-                <div className="px-5 pt-3 pb-1 flex items-center justify-between">
-                  <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
-                  <button
-                    type="button"
-                    className="text-[11px] text-slate-400 hover:text-slate-600"
-                    onClick={() => {
-                      if (importAgents.size === importBundle.agents.length) setImportAgents(new Set());
-                      else setImportAgents(new Set(importBundle.agents.map((a) => a.id)));
-                    }}
-                  >
-                    {importAgents.size === importBundle.agents.length ? "Deselect all" : "Select all"}
-                  </button>
+                  </div>
                 </div>
-                {importBundle.agents.map((a) => {
-                  const selected = importAgents.has(a.id);
-                  const existing = participants.find((p) => p.id === a.id);
-                  return (
+
+                <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
+                  <span className="text-[11px] text-slate-400">
+                    {outboundAgents.size} {outboundAgents.size === 1 ? "agent" : "agents"}
+                  </span>
+                  <div className="flex gap-2">
                     <button
-                      key={a.id}
                       type="button"
-                      className={`w-full flex items-center gap-3 px-5 py-2.5 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
-                      onClick={() => {
-                        setImportAgents((prev) => {
-                          const next = new Set(prev);
-                          if (next.has(a.id)) next.delete(a.id);
-                          else next.add(a.id);
-                          return next;
-                        });
-                      }}
+                      disabled={outboundAgents.size === 0 || outboundBusy}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      onClick={() => void handleExportToFile()}
                     >
-                      <Checkbox checked={selected} />
-                      <img src={agentAvatarUrl(a.id, 24, a.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
-                      <div className="min-w-0 flex-1 text-left">
-                        <div className="truncate text-xs font-medium">{a.name}</div>
-                        <div className="truncate text-[10px] text-slate-400">{a.provider} · {a.model}</div>
-                      </div>
-                      {existing && (
-                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 flex-shrink-0">
-                          update
-                        </span>
-                      )}
-                      {!existing && (
-                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-green-50 text-green-600 flex-shrink-0">
-                          new
-                        </span>
-                      )}
-                      {a.self && (
-                        <span className="text-[10px] text-slate-400 flex-shrink-0">+ self.md</span>
-                      )}
+                      <Download size={12} />
+                      {outboundBusy ? "Exporting..." : "Export to File"}
+                    </button>
+                    <button
+                      type="button"
+                      disabled={outboundAgents.size === 0 || outboundBusy}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      onClick={() => void handlePushToHub()}
+                    >
+                      <Share2 size={12} />
+                      {outboundBusy ? "Pushing..." : "Push to Hub"}
+                    </button>
+                    <button
+                      type="button"
+                      className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors"
+                      onClick={() => setOutboundModal(false)}
+                    >
+                      Cancel
                     </button>
-                  );
-                })}
-              </div>
-
-              {/* Teams */}
-              {(importBundle.teams ?? []).length > 0 && (
-                <div>
-                  <div className="px-5 pt-3 pb-1">
-                    <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Teams</p>
                   </div>
-                  {(importBundle.teams ?? []).map((t) => {
-                    const selected = importTeams.has(t.name);
-                    return (
-                      <button
-                        key={t.name}
-                        type="button"
-                        className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
-                        onClick={() => {
-                          setImportTeams((prev) => {
-                            const next = new Set(prev);
-                            if (next.has(t.name)) next.delete(t.name);
-                            else next.add(t.name);
-                            return next;
-                          });
-                        }}
-                      >
-                        <Checkbox checked={selected} />
-                        <Users size={14} className="text-slate-400 flex-shrink-0" />
-                        <span className="truncate text-xs font-medium flex-1">{t.name}</span>
-                        <span className="text-[10px] text-slate-400">{t.agentIds.length} agents</span>
-                      </button>
-                    );
-                  })}
                 </div>
-              )}
-            </div>
-
-            <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
-              <span className="text-[11px] text-slate-400">
-                {importAgents.size} {importAgents.size === 1 ? "agent" : "agents"}, {importTeams.size} {importTeams.size === 1 ? "team" : "teams"}
-              </span>
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors"
-                  onClick={() => { setImportModal(false); setImportBundle(null); }}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  disabled={importAgents.size === 0 || importing}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-                  onClick={() => void handleImport()}
-                >
-                  <Upload size={12} />
-                  {importing ? "Importing..." : "Import"}
-                </button>
-              </div>
-            </div>
+              </>
+            )}
           </div>
         </div>
       )}
@@ -1048,6 +1053,45 @@ export default function AgentLibraryPage() {
         />
       )}
 
+      {/* ── Edit Agent Modal ──────────────────────────────────────────────── */}
+      {editAgent && (
+        <AgentForm
+          title="Edit agent"
+          initial={{
+            name: editAgent.name,
+            provider: editAgent.provider,
+            model: editAgent.model || "",
+            identity: editAgent.identity || "",
+            identityFile: editAgent.identityFile || "",
+            skills: editAgent.skills || [],
+            variables: editAgent.variables ?? {},
+            color: editAgent.color,
+          }}
+          agentId={editAgent.id}
+          submitLabel="Save"
+          onSubmit={async (data: AgentFormData) => {
+            await fetch("/api/participants", {
+              method: "PATCH",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                id: editAgent.id,
+                name: data.name,
+                provider: data.provider,
+                model: data.model,
+                color: data.color,
+                ...(data.identity ? { identity: data.identity } : {}),
+                ...(data.identityFile ? { identityFile: data.identityFile } : {}),
+                skills: data.skills,
+                variables: data.variables,
+              }),
+            });
+            setEditAgent(null);
+            refreshParticipants();
+          }}
+          onCancel={() => setEditAgent(null)}
+        />
+      )}
+
       {/* ── Rename Team Modal ────────────────────────────────────────────── */}
       {renameModal && (
         <div
@@ -1088,6 +1132,251 @@ export default function AgentLibraryPage() {
           </div>
         </div>
       )}
+
+      {/* ── Inbound Modal (Import: Pull from Hub / Upload File) ────────── */}
+      {inboundModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setInboundModal(false)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-xl border border-slate-200 w-[440px] max-h-[80vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-100">
+              <h3 className="text-sm font-medium text-slate-900">Import Agents</h3>
+              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setInboundModal(false)}>
+                <X size={16} />
+              </button>
+            </div>
+
+            {inboundMode === "choice" && !inboundBundle && (
+              /* ── Choose source ── */
+              <div className="px-5 py-6 flex flex-col gap-3">
+                <button
+                  type="button"
+                  className="flex items-center gap-3 px-4 py-3.5 rounded-lg border border-slate-200 hover:border-violet-300 hover:bg-violet-50 transition-colors text-left"
+                  onClick={() => setInboundMode("pull")}
+                >
+                  <div className="w-9 h-9 rounded-lg bg-violet-100 flex items-center justify-center flex-shrink-0">
+                    <Download size={16} className="text-violet-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-slate-900">Pull from Hub</p>
+                    <p className="text-[11px] text-slate-400">Enter a share code to import agents</p>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-3 px-4 py-3.5 rounded-lg border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-colors text-left"
+                  onClick={() => {
+                    setInboundMode("file");
+                    setTimeout(() => fileInputRef.current?.click(), 100);
+                  }}
+                >
+                  <div className="w-9 h-9 rounded-lg bg-slate-100 flex items-center justify-center flex-shrink-0">
+                    <Upload size={16} className="text-slate-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-slate-900">Upload File</p>
+                    <p className="text-[11px] text-slate-400">Import from a .agent.json bundle</p>
+                  </div>
+                </button>
+              </div>
+            )}
+
+            {inboundMode === "pull" && !inboundBundle && (
+              /* ── Enter code ── */
+              <div className="px-5 py-5 flex flex-col gap-3">
+                <label className="text-sm text-slate-600">Enter share code:</label>
+                <input
+                  autoFocus
+                  type="text"
+                  value={pullCode}
+                  onChange={(e) => setPullCode(e.target.value.toUpperCase())}
+                  placeholder="e.g. A3X9K2"
+                  maxLength={6}
+                  className="w-full px-3 py-2.5 text-center text-2xl font-mono font-bold tracking-[0.3em] border border-slate-200 rounded-lg outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-200 transition-all"
+                  onKeyDown={(e) => { if (e.key === "Enter") void handlePullFetch(); }}
+                />
+                {inboundError && (
+                  <p className="text-xs text-red-500">{inboundError}</p>
+                )}
+                <div className="flex justify-end gap-2 mt-1">
+                  <button type="button" className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors" onClick={() => { setInboundMode("choice"); setInboundError(null); }}>
+                    Back
+                  </button>
+                  <button
+                    type="button"
+                    disabled={pullCode.trim().length === 0 || pulling}
+                    className="px-4 py-1.5 text-xs font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    onClick={() => void handlePullFetch()}
+                  >
+                    {pulling ? "Fetching..." : "Fetch"}
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {inboundMode === "file" && !inboundBundle && (
+              /* ── Waiting for file ── */
+              <div className="px-5 py-6 flex flex-col items-center gap-3">
+                <p className="text-sm text-slate-500">Select a .agent.json file to import</p>
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <Upload size={13} />
+                  Choose File
+                </button>
+                {inboundError && (
+                  <p className="text-xs text-red-500">{inboundError}</p>
+                )}
+                <button type="button" className="text-xs text-slate-400 hover:text-slate-600 mt-1" onClick={() => { setInboundMode("choice"); setInboundError(null); }}>
+                  Back
+                </button>
+              </div>
+            )}
+
+            {inboundBundle && (
+              /* ── Preview & select agents to import ── */
+              <>
+                <div className="overflow-y-auto flex-1">
+                  {/* Bundle info */}
+                  {inboundBundle.exportedAt && (
+                    <div className="px-5 py-3 border-b border-slate-100 bg-slate-50">
+                      <p className="text-[11px] text-slate-400">
+                        Exported {new Date(inboundBundle.exportedAt).toLocaleDateString()} · {inboundBundle.agents.length} agents{(inboundBundle.teams ?? []).length > 0 ? `, ${(inboundBundle.teams ?? []).length} teams` : ""}
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Agents */}
+                  <div className="border-b border-slate-100">
+                    <div className="px-5 pt-3 pb-1 flex items-center justify-between">
+                      <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">
+                        {inboundBundle.agents.length} agent{inboundBundle.agents.length === 1 ? "" : "s"} found
+                      </p>
+                      <button
+                        type="button"
+                        className="text-[11px] text-slate-400 hover:text-slate-600"
+                        onClick={() => {
+                          if (inboundAgents.size === inboundBundle.agents.length) setInboundAgents(new Set());
+                          else setInboundAgents(new Set(inboundBundle.agents.map((a) => a.id)));
+                        }}
+                      >
+                        {inboundAgents.size === inboundBundle.agents.length ? "Deselect all" : "Select all"}
+                      </button>
+                    </div>
+                    {inboundBundle.agents.map((a) => {
+                      const selected = inboundAgents.has(a.id);
+                      const existing = participants.find((p) => p.id === a.id);
+                      return (
+                        <button
+                          key={a.id}
+                          type="button"
+                          className={`w-full flex items-center gap-3 px-5 py-2.5 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                          onClick={() => {
+                            setInboundAgents((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(a.id)) next.delete(a.id);
+                              else next.add(a.id);
+                              return next;
+                            });
+                          }}
+                        >
+                          <Checkbox checked={selected} />
+                          <img src={agentAvatarUrl(a.id, 24, a.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
+                          <div className="min-w-0 flex-1 text-left">
+                            <div className="truncate text-xs font-medium">{a.name}</div>
+                            <div className="truncate text-[10px] text-slate-400">{a.provider}{a.model ? ` · ${a.model}` : ""}</div>
+                          </div>
+                          {existing && (
+                            <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 flex-shrink-0">
+                              update
+                            </span>
+                          )}
+                          {!existing && (
+                            <span className="text-[10px] px-1.5 py-0.5 rounded bg-green-50 text-green-600 flex-shrink-0">
+                              new
+                            </span>
+                          )}
+                          {a.self && (
+                            <span className="text-[10px] text-slate-400 flex-shrink-0">+ self.md</span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+
+                  {/* Teams */}
+                  {(inboundBundle.teams ?? []).length > 0 && (
+                    <div>
+                      <div className="px-5 pt-3 pb-1">
+                        <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Teams</p>
+                      </div>
+                      {(inboundBundle.teams ?? []).map((t) => {
+                        const selected = inboundTeams.has(t.name);
+                        return (
+                          <button
+                            key={t.name}
+                            type="button"
+                            className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                            onClick={() => {
+                              setInboundTeams((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(t.name)) next.delete(t.name);
+                                else next.add(t.name);
+                                return next;
+                              });
+                            }}
+                          >
+                            <Checkbox checked={selected} />
+                            <Users size={14} className="text-slate-400 flex-shrink-0" />
+                            <span className="truncate text-xs font-medium flex-1">{t.name}</span>
+                            <span className="text-[10px] text-slate-400">{t.agentIds.length} agents</span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {inboundError && (
+                  <div className="px-5 py-2">
+                    <p className="text-xs text-red-500">{inboundError}</p>
+                  </div>
+                )}
+
+                <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
+                  <span className="text-[11px] text-slate-400">
+                    {inboundAgents.size} {inboundAgents.size === 1 ? "agent" : "agents"}{inboundTeams.size > 0 ? `, ${inboundTeams.size} ${inboundTeams.size === 1 ? "team" : "teams"}` : ""}
+                  </span>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors"
+                      onClick={() => { setInboundBundle(null); setInboundAgents(new Set()); setInboundTeams(new Set()); }}
+                    >
+                      Back
+                    </button>
+                    <button
+                      type="button"
+                      disabled={inboundAgents.size === 0 || inboundBusy}
+                      className="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      onClick={() => void handleInboundImport()}
+                    >
+                      <Upload size={12} />
+                      {inboundBusy ? "Importing..." : `Import ${inboundAgents.size} agent${inboundAgents.size === 1 ? "" : "s"}`}
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }