@mndrk/agx 2.0.13 → 2.0.15

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

@@ -0,0 +1,1093 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  Download,
+  Hash,
+  Pencil,
+  Plus,
+  Trash2,
+  Upload,
+  Users,
+  X,
+} from "lucide-react";
+import type { Participant } from "@/lib/types";
+import { useTeams, type Team } from "@/hooks/useTeams";
+import { agentAvatarUrl, AgentForm, type AgentFormData } from "@/components/chat-ui/ParticipantBar";
+import type { Thread } from "@/lib/storage";
+import { threadService } from "@/services/threadService";
+
+// ── Bundle types ────────────────────────────────────────────────────────────
+
+interface BundleAgent {
+  id: string;
+  name: string;
+  provider: string;
+  model: string | null;
+  color: string;
+  identity?: string | null;
+  identityFile?: string | null;
+  skills?: { file: string; condition: string }[];
+  variables?: Record<string, string>;
+  self?: string | null;
+}
+
+interface BundleTeam {
+  name: string;
+  agentIds: string[];
+}
+
+interface AgentBundle {
+  version: 1;
+  exportedAt: string;
+  agents: BundleAgent[];
+  teams: BundleTeam[];
+}
+
+// ── Component ───────────────────────────────────────────────────────────────
+
+export default function AgentLibraryPage() {
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [threads, setThreads] = useState<Thread[]>([]);
+  const {
+    teams,
+    createTeam,
+    deleteTeam,
+    renameTeam,
+    addAgent: addAgentToTeam,
+    removeAgent: removeAgentFromTeam,
+    refresh: refreshTeams,
+  } = useTeams();
+
+  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
+  const [createModal, setCreateModal] = useState(false);
+  const [createName, setCreateName] = useState("");
+  const [createAgents, setCreateAgents] = useState<Set<string>>(new Set());
+  const [createWorkspaces, setCreateWorkspaces] = useState<Set<string>>(new Set());
+  const [addAgentModal, setAddAgentModal] = useState<{ teamId: string } | null>(null);
+  const [addAgentSelection, setAddAgentSelection] = useState<Set<string>>(new Set());
+  const [creatingNewAgent, setCreatingNewAgent] = useState(false);
+  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);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const refreshParticipants = () => {
+    void fetch("/api/participants")
+      .then((r) => r.json())
+      .then((data) => setParticipants(Array.isArray(data) ? data : []));
+  };
+
+  useEffect(() => {
+    refreshParticipants();
+    void threadService.listThreads().then(setThreads);
+  }, []);
+
+  const threadById = new Map(threads.map((t) => [t.id, t]));
+  const nonDefaultTeams = teams.filter((t) => !t.is_default);
+
+  const toggleTeam = (id: string) => {
+    setExpandedTeams((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleCreateSubmit = async () => {
+    if (!createName.trim()) return;
+    const wsIds = Array.from(createWorkspaces);
+    const team = await createTeam(createName.trim(), wsIds.length > 0 ? wsIds : undefined);
+    if (team) {
+      for (const agentId of createAgents) {
+        await addAgentToTeam(team.id, agentId);
+      }
+    }
+    setCreateModal(false);
+  };
+
+  const handleRenameSubmit = async () => {
+    if (!renameModal || !renameValue.trim()) return;
+    await renameTeam(renameModal.teamId, renameValue.trim());
+    setRenameModal(null);
+  };
+
+  // ── Export ──────────────────────────────────────────────────────────────
+
+  const openExportModal = () => {
+    setExportAgents(new Set(participants.map((p) => p.id)));
+    setExportIncludeSelf(true);
+    setExportModal(true);
+  };
+
+  const handleExport = async () => {
+    if (exportAgents.size === 0) return;
+    setExporting(true);
+    try {
+      // Fetch agent data including self.md from server
+      const agentIds = Array.from(exportAgents);
+      const res = await fetch("/api/agents/export", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ agentIds }),
+      });
+      if (!res.ok) throw new Error("Export failed");
+      const data = await res.json();
+
+      const bundleAgents: BundleAgent[] = (data.agents as BundleAgent[]).map((a) => ({
+        ...a,
+        self: exportIncludeSelf ? a.self : null,
+      }));
+
+      const bundle: AgentBundle = {
+        version: 1,
+        exportedAt: new Date().toISOString(),
+        agents: bundleAgents,
+        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");
+      a.href = url;
+      const nameHint = bundleAgents.length === 1
+        ? `${bundleAgents[0].name.toLowerCase().replace(/\s+/g, "-")}.agent.json`
+        : "agents.bundle.json";
+      a.download = nameHint;
+      a.click();
+      URL.revokeObjectURL(url);
+      setExportModal(false);
+    } catch (e) {
+      console.error("Export error:", e);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  // ── Import ──────────────────────────────────────────────────────────────
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setImportError(null);
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const bundle = JSON.parse(reader.result as string) as AgentBundle;
+        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);
+      } catch {
+        setImportError("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);
+    try {
+      const existingIds = new Set(participants.map((p) => p.id));
+
+      // Import selected agents
+      for (const agent of importBundle.agents) {
+        if (!importAgents.has(agent.id)) continue;
+
+        const payload: Record<string, unknown> = {
+          name: agent.name,
+          provider: agent.provider,
+          model: agent.model,
+          color: agent.color,
+          identity: agent.identity || undefined,
+          identityFile: agent.identityFile || undefined,
+          skills: agent.skills || [],
+          variables: agent.variables || {},
+        };
+
+        if (existingIds.has(agent.id)) {
+          // Update existing
+          payload.id = agent.id;
+          await fetch("/api/participants", {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          });
+        } else {
+          // Create new
+          await fetch("/api/participants", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          });
+        }
+      }
+
+      // Import selected teams
+      for (const bundleTeam of importBundle.teams ?? []) {
+        if (!importTeams.has(bundleTeam.name)) continue;
+
+        const team = await createTeam(bundleTeam.name);
+        if (team) {
+          for (const agentId of bundleTeam.agentIds) {
+            if (importAgents.has(agentId)) {
+              await addAgentToTeam(team.id, agentId);
+            }
+          }
+        }
+      }
+
+      // Refresh data
+      refreshParticipants();
+      await refreshTeams();
+      setImportModal(false);
+      setImportBundle(null);
+    } catch (e) {
+      console.error("Import error:", e);
+      setImportError("Import failed. Check console for details.");
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  // Add agent modal helpers
+  const addAgentModalTeam = addAgentModal ? teams.find((t) => t.id === addAgentModal.teamId) : null;
+  const addAgentModalMemberIds = new Set(addAgentModalTeam?.agents.map((a) => a.agent_id) ?? []);
+  const addAgentModalAvailable = addAgentModal ? participants.filter((p) => !addAgentModalMemberIds.has(p.id)) : [];
+
+  // ── Checkbox helper ─────────────────────────────────────────────────────
+
+  const Checkbox = ({ checked }: { checked: boolean }) => (
+    <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${checked ? "bg-slate-900 border-slate-900" : "border-slate-300"}`}>
+      {checked && (
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-slate-50 p-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700 transition-colors"
+          >
+            <ArrowLeft size={16} />
+            Back
+          </Link>
+          <h1 className="text-2xl font-semibold text-slate-900">Manage Agents</h1>
+          <div className="ml-auto flex items-center gap-2">
+            <button
+              type="button"
+              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 transition-colors"
+              onClick={() => setCreatingNewAgent(true)}
+            >
+              <Plus size={13} />
+              New Agent
+            </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()}
+            >
+              <Upload size={13} />
+              Import
+            </button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".json"
+              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 && (
+          <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>
+          </div>
+        )}
+
+        {/* Agent Grid */}
+        {participants.length === 0 ? (
+          <p className="text-slate-500 text-sm">No agents configured yet.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {participants.map((p) => (
+              <Link
+                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"
+              >
+                <div className="flex items-start gap-3 mb-3">
+                  <img
+                    src={agentAvatarUrl(p.id, 48, p.color)}
+                    alt={p.name}
+                    className="w-12 h-12 rounded-full bg-slate-100"
+                  />
+                  <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>
+                  </div>
+                </div>
+
+                {p.skills && p.skills.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mb-3">
+                    {p.skills.slice(0, 3).map((s, i) => (
+                      <span
+                        key={i}
+                        className="text-[10px] px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 truncate max-w-[120px]"
+                      >
+                        {s.file.split("/").pop()}
+                      </span>
+                    ))}
+                    {p.skills.length > 3 && (
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-slate-50 text-slate-400">
+                        +{p.skills.length - 3}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex items-center gap-1.5 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>
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* Teams Section */}
+        <div className="mt-10">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold text-slate-900">Teams</h2>
+            <button
+              type="button"
+              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 transition-colors"
+              onClick={() => {
+                setCreateName("");
+                setCreateAgents(new Set());
+                setCreateWorkspaces(new Set());
+                setCreateModal(true);
+              }}
+            >
+              <Plus size={13} />
+              Add team
+            </button>
+          </div>
+
+          {nonDefaultTeams.length === 0 ? (
+            <p className="text-sm text-slate-400">No teams yet. Create one to group agents for a workspace.</p>
+          ) : (
+            <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
+              {nonDefaultTeams.map((team) => {
+                const isExpanded = expandedTeams.has(team.id);
+                const wsNames = (team.workspace_ids ?? [])
+                  .map((id) => threadById.get(id)?.title?.trim() || "Untitled")
+                  .filter(Boolean);
+
+                return (
+                  <div key={team.id}>
+                    <div className="flex items-center gap-3 px-5 py-3.5 group">
+                      <button
+                        type="button"
+                        className="flex items-center gap-3 flex-1 min-w-0 text-left"
+                        onClick={() => toggleTeam(team.id)}
+                      >
+                        {isExpanded ? (
+                          <ChevronDown size={16} className="text-slate-400 flex-shrink-0" />
+                        ) : (
+                          <ChevronRight size={16} className="text-slate-400 flex-shrink-0" />
+                        )}
+                        <Users size={16} className="text-slate-400 flex-shrink-0" />
+                        <span className="font-medium text-slate-800 text-sm">{team.name}</span>
+                        <span className="text-xs text-slate-400">
+                          {team.agents.length} {team.agents.length === 1 ? "agent" : "agents"}
+                          {wsNames.length > 0 && ` · ${wsNames.length} ${wsNames.length === 1 ? "workspace" : "workspaces"}`}
+                        </span>
+                      </button>
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                          type="button"
+                          className="p-1.5 text-slate-400 hover:text-slate-600 rounded hover:bg-slate-50 transition-colors"
+                          title="Add agent"
+                          onClick={() => {
+                            setAddAgentSelection(new Set());
+                            setAddAgentModal({ teamId: team.id });
+                          }}
+                        >
+                          <Plus size={14} />
+                        </button>
+                        <button
+                          type="button"
+                          className="p-1.5 text-slate-400 hover:text-slate-600 rounded hover:bg-slate-50 transition-colors"
+                          title="Rename team"
+                          onClick={() => {
+                            setRenameValue(team.name);
+                            setRenameModal({ teamId: team.id, currentName: team.name });
+                          }}
+                        >
+                          <Pencil size={13} />
+                        </button>
+                        <button
+                          type="button"
+                          className="p-1.5 text-slate-400 hover:text-red-500 rounded hover:bg-slate-50 transition-colors"
+                          title="Delete team"
+                          onClick={() => void deleteTeam(team.id)}
+                        >
+                          <Trash2 size={13} />
+                        </button>
+                      </div>
+                    </div>
+
+                    {isExpanded && (
+                      <div className="px-5 pb-4 pt-1 ml-9 flex flex-col gap-1">
+                        {team.agents.length === 0 && (
+                          <p className="text-xs text-slate-400 py-1">No agents in this team.</p>
+                        )}
+                        {team.agents.map((ta) => {
+                          const agent = participants.find((p) => p.id === ta.agent_id);
+                          return (
+                            <div
+                              key={ta.agent_id}
+                              className="flex items-center gap-2.5 py-1.5 group/agent"
+                            >
+                              <img
+                                src={agentAvatarUrl(ta.agent_id, 24, agent?.color)}
+                                alt=""
+                                className="w-6 h-6 rounded-full flex-shrink-0"
+                              />
+                              <span className="text-sm text-slate-700 truncate flex-1">
+                                {agent?.name ?? ta.agent_id}
+                              </span>
+                              <span className="text-[10px] text-slate-400">{agent?.model}</span>
+                              <button
+                                type="button"
+                                className="opacity-0 group-hover/agent:opacity-100 text-slate-400 hover:text-red-500 transition-opacity"
+                                onClick={() => void removeAgentFromTeam(team.id, ta.agent_id)}
+                                title="Remove from team"
+                              >
+                                <X size={14} />
+                              </button>
+                            </div>
+                          );
+                        })}
+
+                        {wsNames.length > 0 && (
+                          <div className="mt-2 pt-2 border-t border-slate-100">
+                            <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1">Workspaces</p>
+                            <div className="flex flex-wrap gap-1.5">
+                              {wsNames.map((name, i) => (
+                                <span
+                                  key={i}
+                                  className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-md bg-indigo-50 text-indigo-600"
+                                >
+                                  <Hash size={11} />
+                                  {name}
+                                </span>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Export Modal ──────────────────────────────────────────────────── */}
+      {exportModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setExportModal(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)}>
+                <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));
+                      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={() => {
+                            setExportAgents((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 (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 (
+                    <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;
+                        });
+                      }}
+                    >
+                      <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>
+
+              {/* 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>
+                {importBundle.agents.map((a) => {
+                  const selected = importAgents.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={() => {
+                        setImportAgents((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}</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 */}
+              {(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>
+      )}
+
+      {/* ── Create Team Modal ────────────────────────────────────────────── */}
+      {createModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setCreateModal(false)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-xl border border-slate-200 w-[420px] 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">Create team</h3>
+              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setCreateModal(false)}>
+                <X size={16} />
+              </button>
+            </div>
+
+            <div className="overflow-y-auto flex-1">
+              <div className="px-5 py-3 border-b border-slate-100">
+                <label className="text-[11px] font-medium text-slate-400 uppercase tracking-wide block mb-1.5">Name</label>
+                <input
+                  autoFocus
+                  type="text"
+                  value={createName}
+                  onChange={(e) => setCreateName(e.target.value)}
+                  placeholder="e.g. Frontend Crew"
+                  className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg outline-none focus:border-slate-400 focus:ring-1 focus:ring-slate-200 transition-all"
+                />
+              </div>
+
+              <div className="px-5 py-3 border-b border-slate-100">
+                <label className="text-[11px] font-medium text-slate-400 uppercase tracking-wide block mb-1.5">Workspaces</label>
+                {threads.length === 0 ? (
+                  <p className="text-xs text-slate-400">No workspaces available.</p>
+                ) : (
+                  <div className="flex flex-col gap-0.5">
+                    {threads.map((ws) => {
+                      const selected = createWorkspaces.has(ws.id);
+                      const title = ws.title?.trim() || "Untitled";
+                      return (
+                        <button
+                          key={ws.id}
+                          type="button"
+                          className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors ${selected ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50"}`}
+                          onClick={() => {
+                            setCreateWorkspaces((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(ws.id)) next.delete(ws.id);
+                              else next.add(ws.id);
+                              return next;
+                            });
+                          }}
+                        >
+                          <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${selected ? "bg-indigo-600 border-indigo-600" : "border-slate-300"}`}>
+                            {selected && (
+                              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                            )}
+                          </div>
+                          <Hash size={13} className="flex-shrink-0 text-slate-400" />
+                          <span className="truncate text-xs font-medium">{title}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              <div className="py-1">
+                <p className="px-5 py-1.5 text-[11px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
+                {participants.map((p) => {
+                  const selected = createAgents.has(p.id);
+                  return (
+                    <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-100 text-slate-900" : "text-slate-700 hover:bg-slate-50"}`}
+                      onClick={() => {
+                        setCreateAgents((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(p.id)) next.delete(p.id);
+                          else next.add(p.id);
+                          return next;
+                        });
+                      }}
+                    >
+                      <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">{p.name}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="px-5 py-3 border-t border-slate-100 flex justify-end gap-2">
+              <button type="button" className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors" onClick={() => setCreateModal(false)}>Cancel</button>
+              <button
+                type="button"
+                disabled={!createName.trim()}
+                className="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 handleCreateSubmit()}
+              >
+                Create
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Add Agent to Team Modal ──────────────────────────────────────── */}
+      {addAgentModal && !creatingNewAgent && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setAddAgentModal(null)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-xl border border-slate-200 w-80 max-h-[70vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100">
+              <h3 className="text-sm font-medium text-slate-900">Add to {addAgentModalTeam?.name ?? "team"}</h3>
+              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setAddAgentModal(null)}><X size={16} /></button>
+            </div>
+            <div className="overflow-y-auto py-1 flex-1">
+              <button
+                type="button"
+                className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors border-b border-slate-100"
+                onClick={() => setCreatingNewAgent(true)}
+              >
+                <Plus size={14} className="text-slate-400" />
+                <span className="text-xs font-medium">Create new agent</span>
+              </button>
+              {addAgentModalAvailable.length === 0 ? (
+                <p className="px-4 py-6 text-xs text-slate-400 text-center">All agents are already in this team</p>
+              ) : (
+                addAgentModalAvailable.map((p) => {
+                  const selected = addAgentSelection.has(p.id);
+                  return (
+                    <button
+                      key={p.id}
+                      type="button"
+                      className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${selected ? "bg-slate-100 text-slate-900" : "text-slate-700 hover:bg-slate-50"}`}
+                      onClick={() => {
+                        setAddAgentSelection((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(p.id)) next.delete(p.id);
+                          else next.add(p.id);
+                          return next;
+                        });
+                      }}
+                    >
+                      <Checkbox checked={selected} />
+                      <img src={agentAvatarUrl(p.id, 24, p.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
+                      <div className="min-w-0 flex-1 text-left">
+                        <div className="truncate font-medium text-xs">{p.name}</div>
+                      </div>
+                    </button>
+                  );
+                })
+              )}
+            </div>
+            {addAgentModalAvailable.length > 0 && (
+              <div className="px-4 py-3 border-t border-slate-100 flex justify-end gap-2">
+                <button type="button" className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors" onClick={() => setAddAgentModal(null)}>Cancel</button>
+                <button
+                  type="button"
+                  disabled={addAgentSelection.size === 0}
+                  className="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={() => {
+                    for (const agentId of addAgentSelection) {
+                      void addAgentToTeam(addAgentModal.teamId, agentId);
+                    }
+                    setAddAgentModal(null);
+                  }}
+                >
+                  Add {addAgentSelection.size > 0 ? `(${addAgentSelection.size})` : ""}
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Create New Agent Modal (AgentForm) ────────────────────────────── */}
+      {creatingNewAgent && (
+        <AgentForm
+          title="Create new agent"
+          initial={{ name: "", provider: "claude", model: "", identity: "", identityFile: "", skills: [], variables: {} }}
+          submitLabel="Create"
+          teams={nonDefaultTeams.map((t) => {
+            const wsName = (t.workspace_ids ?? []).map((wid) => threadById.get(wid)?.title?.trim()).filter(Boolean).join(", ") || "No workspace";
+            return { id: t.id, name: t.name, label: `${wsName} › ${t.name}` };
+          })}
+          initialTeamIds={addAgentModal ? [addAgentModal.teamId] : []}
+          onSubmit={async (data: AgentFormData, teamIds?: string[]) => {
+            const colors = ["#D97706", "#2563EB", "#059669", "#DC2626", "#7C3AED", "#DB2777", "#0891B2"];
+            const color = colors[participants.length % colors.length];
+            const id = data.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+            const firstTeamId = teamIds?.[0];
+            const res = await fetch("/api/participants", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                id, name: data.name, provider: data.provider, model: data.model, color,
+                ...(data.identity ? { identity: data.identity } : {}),
+                ...(data.identityFile ? { identityFile: data.identityFile } : {}),
+                skills: data.skills,
+                variables: data.variables,
+                ...(firstTeamId ? { teamId: firstTeamId } : {}),
+              }),
+            });
+            if (res.ok) {
+              for (const tid of (teamIds ?? []).slice(1)) {
+                await addAgentToTeam(tid, id);
+              }
+              setCreatingNewAgent(false);
+              setAddAgentModal(null);
+              refreshParticipants();
+              refreshTeams();
+            }
+          }}
+          onCancel={() => { setCreatingNewAgent(false); }}
+        />
+      )}
+
+      {/* ── Rename Team Modal ────────────────────────────────────────────── */}
+      {renameModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setRenameModal(null)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-xl border border-slate-200 w-80 flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100">
+              <h3 className="text-sm font-medium text-slate-900">Rename team</h3>
+              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setRenameModal(null)}><X size={16} /></button>
+            </div>
+            <form
+              className="px-4 py-4 flex flex-col gap-3"
+              onSubmit={(e) => { e.preventDefault(); void handleRenameSubmit(); }}
+            >
+              <input
+                autoFocus
+                type="text"
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                placeholder="Team name"
+                className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg outline-none focus:border-slate-400 focus:ring-1 focus:ring-slate-200 transition-all"
+              />
+              <div className="flex justify-end gap-2">
+                <button type="button" className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors" onClick={() => setRenameModal(null)}>Cancel</button>
+                <button
+                  type="submit"
+                  disabled={!renameValue.trim() || renameValue.trim() === renameModal.currentName}
+                  className="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"
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}