@mndrk/agx 2.0.13 → 2.0.15

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/thread/WorkspaceSidebar.tsx

@@ -0,0 +1,1376 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Hash,
+  Bot,
+  Check,
+  GripVertical,
+  Minus,
+  PanelLeftClose,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  Users,
+  X,
+} from "lucide-react";
+import Link from "next/link";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { Thread } from "@/lib/storage";
+import type { ChatProvider, Participant } from "@/lib/types";
+import type { Team, TeamAgent } from "@/hooks/useTeams";
+import { useFocusManagement } from "@/hooks/useFocusManagement";
+import { useProjects } from "@/hooks/useProjects";
+import { agentAvatarUrl, AgentForm, type AgentFormData } from "@/components/chat-ui/ParticipantBar";
+import RichTextEditor from "@/components/RichTextEditor";
+
+interface WorkspaceSidebarProps {
+  threads: Thread[];
+  participants?: Participant[];
+  activeThreadId: string | null;
+  isLoading: boolean;
+  isCreating: boolean;
+  onSelectThread: (threadId: string) => void;
+  onCreateThread: (input?: { title?: string }) => Promise<unknown> | void;
+  onRenameThread: (threadId: string, title: string) => Promise<unknown> | void;
+  onDeleteThread: (threadId: string) => void;
+  deletingThreadId?: string | null;
+  renamingThreadId?: string | null;
+  activeParticipantIds?: string[];
+  onToggleParticipantActive?: (participantId: string, active: boolean) => void;
+  visible?: boolean;
+  isRestoringActiveThread?: boolean;
+  onToggle?: () => void;
+  onSearch?: () => void;
+  // Teams
+  teams?: Team[];
+  onCreateTeam?: (name: string, threadId?: string) => Promise<unknown>;
+  onRenameTeam?: (id: string, name: string) => Promise<unknown>;
+  onDeleteTeam?: (id: string) => Promise<unknown>;
+  onAddAgentToTeam?: (teamId: string, agentId: string) => Promise<unknown>;
+  onRemoveAgentFromTeam?: (teamId: string, agentId: string) => Promise<unknown>;
+  onMoveAgent?: (agentId: string, fromTeamId: string, toTeamId: string) => Promise<unknown>;
+  onReorderAgents?: (teamId: string, orderedAgentIds: string[]) => Promise<unknown>;
+  onAddAgentViaForm?: (teamId: string) => void;
+  onUpdateParticipant?: (participant: Participant) => Promise<unknown>;
+  onSelectTeam?: (teamId: string) => void;
+}
+
+function SortableTeamAgentItem({
+  ta,
+  agent,
+  index,
+  onClick,
+}: {
+  ta: TeamAgent;
+  agent: Participant | undefined;
+  index: number;
+  onClick?: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: ta.agent_id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex items-center gap-1 px-2 py-0.5 text-xs text-slate-500 group/agent-row cursor-pointer hover:bg-slate-50 rounded"
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+    >
+      <button
+        type="button"
+        className="cursor-grab active:cursor-grabbing p-0 bg-transparent border-none text-slate-300 hover:text-slate-500 flex-shrink-0"
+        onClick={(e) => e.stopPropagation()}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical size={10} />
+      </button>
+      <img
+        src={agentAvatarUrl(ta.agent_id, 14, agent?.color)}
+        alt=""
+        className="w-3.5 h-3.5 rounded-full flex-shrink-0"
+      />
+      <span className="truncate">{agent?.name ?? ta.agent_id}</span>
+      {index === 0 && (
+        <span className="ml-auto text-[9px] font-medium text-indigo-400 uppercase tracking-wider">primary</span>
+      )}
+    </div>
+  );
+}
+
+export function WorkspaceSidebar({
+  threads,
+  participants = [],
+  activeThreadId,
+  isLoading,
+  isCreating,
+  onSelectThread,
+  onCreateThread,
+  onRenameThread,
+  onDeleteThread,
+  deletingThreadId = null,
+  renamingThreadId = null,
+  activeParticipantIds = [],
+  onToggleParticipantActive,
+  visible = false,
+  isRestoringActiveThread = false,
+  onToggle,
+  onSearch,
+  teams = [],
+  onCreateTeam,
+  onRenameTeam,
+  onDeleteTeam,
+  onAddAgentToTeam,
+  onRemoveAgentFromTeam,
+  onMoveAgent,
+  onReorderAgents,
+  onAddAgentViaForm,
+  onUpdateParticipant,
+  onSelectTeam,
+}: WorkspaceSidebarProps) {
+  const emptyCtaRef = useRef<HTMLButtonElement | null>(null);
+  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
+  const [expandedWorkspaces, setExpandedWorkspaces] = 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 [createTeamModal, setCreateTeamModal] = useState<{ threadId: string } | null>(null);
+  const [createTeamName, setCreateTeamName] = useState("");
+  const [createTeamAgents, setCreateTeamAgents] = useState<Set<string>>(new Set());
+  const { projects } = useProjects();
+
+  // Generic text input modal state
+  const [inputModal, setInputModal] = useState<{
+    title: string;
+    placeholder: string;
+    defaultValue: string;
+    onSubmit: (value: string) => void;
+  } | null>(null);
+  const inputModalRef = useCallback((el: HTMLInputElement | null) => {
+    if (el) {
+      el.focus();
+      el.select();
+    }
+  }, []);
+
+  // Confirm modal state
+  const [confirmModal, setConfirmModal] = useState<{
+    title: string;
+    message: string;
+    onConfirm: () => void;
+  } | null>(null);
+
+  // Agent detail modal
+  const [agentDetailId, setAgentDetailId] = useState<string | null>(null);
+  const agentDetailAgent = agentDetailId ? participants.find((p) => p.id === agentDetailId) ?? null : null;
+
+  const toggleTeamExpanded = (teamId: string) => {
+    setExpandedTeams((prev) => {
+      const next = new Set(prev);
+      if (next.has(teamId)) next.delete(teamId);
+      else next.add(teamId);
+      return next;
+    });
+  };
+
+  const handleCreateTeam = (threadId?: string) => {
+    if (threadId) {
+      setCreateTeamName("");
+      setCreateTeamAgents(new Set());
+      setCreateTeamModal({ threadId });
+    } else {
+      setInputModal({
+        title: "Create team",
+        placeholder: "Team name",
+        defaultValue: "",
+        onSubmit: (name) => void onCreateTeam?.(name),
+      });
+    }
+  };
+
+  const handleCreateTeamSubmit = async () => {
+    if (!createTeamModal || !createTeamName.trim()) return;
+    const team = await onCreateTeam?.(createTeamName.trim(), createTeamModal.threadId) as Team | null | undefined;
+    if (team && onAddAgentToTeam) {
+      for (const agentId of createTeamAgents) {
+        await onAddAgentToTeam(team.id, agentId);
+      }
+    }
+    setCreateTeamModal(null);
+  };
+
+  const toggleWorkspaceExpanded = (workspaceId: string) => {
+    setExpandedWorkspaces((prev) => {
+      const next = new Set(prev);
+      if (next.has(workspaceId)) next.delete(workspaceId);
+      else next.add(workspaceId);
+      return next;
+    });
+  };
+
+  const handleRenameTeam = (teamId: string, currentName: string) => {
+    setInputModal({
+      title: "Rename team",
+      placeholder: "Team name",
+      defaultValue: currentName,
+      onSubmit: (name) => void onRenameTeam?.(teamId, name),
+    });
+  };
+
+  const handleDeleteTeam = (teamId: string) => {
+    const team = teams.find((t) => t.id === teamId);
+    setConfirmModal({
+      title: "Delete team",
+      message: `Delete "${team?.name ?? "team"}"? Its agents will move to the Default team.`,
+      onConfirm: () => void onDeleteTeam?.(teamId),
+    });
+  };
+
+  const handleAddAgentToTeam = (teamId: string) => {
+    if (onAddAgentViaForm) {
+      onAddAgentViaForm(teamId);
+      return;
+    }
+    setAddAgentSelection(new Set());
+    setAddAgentModal({ teamId });
+  };
+
+  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)) : [];
+
+  const dndSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const handleTeamDragEnd = useCallback(
+    (teamId: string) => (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id || !onReorderAgents) return;
+      const team = teams.find((t) => t.id === teamId);
+      if (!team) return;
+      const ids = team.agents.map((a) => a.agent_id);
+      const oldIndex = ids.indexOf(active.id as string);
+      const newIndex = ids.indexOf(over.id as string);
+      if (oldIndex === -1 || newIndex === -1) return;
+      const reordered = [...ids];
+      const [moved] = reordered.splice(oldIndex, 1);
+      reordered.splice(newIndex, 0, moved);
+      void onReorderAgents(teamId, reordered);
+    },
+    [teams, onReorderAgents]
+  );
+
+  const hasThreads = threads.length > 0;
+  const showRestoringState = isRestoringActiveThread && hasThreads;
+  const showLoadingState = (isLoading && !hasThreads) || showRestoringState;
+  const showEmptyState = !showLoadingState && !hasThreads;
+  const isVisible = Boolean(visible);
+  const sortedWorkspaces = [...threads].sort((a, b) => (a.title ?? "").localeCompare(b.title ?? ""));
+
+  useFocusManagement({
+    focusTarget: emptyCtaRef,
+    shouldFocus: isVisible && showEmptyState && !isCreating,
+  });
+
+  const handleCreateClick = () => {
+    setInputModal({
+      title: "Create workspace",
+      placeholder: "Workspace title",
+      defaultValue: "",
+      onSubmit: (title) => void onCreateThread({ title }),
+    });
+  };
+
+  const handleDeleteClick = (workspaceId: string) => {
+    const ws = threads.find((t) => t.id === workspaceId);
+    setConfirmModal({
+      title: "Delete workspace",
+      message: `Delete "${ws?.title ?? "workspace"}"? This cannot be undone.`,
+      onConfirm: () => void onDeleteThread(workspaceId),
+    });
+  };
+
+  const handleRenameClick = (workspaceId: string, currentTitle: string) => {
+    setInputModal({
+      title: "Rename workspace",
+      placeholder: "Workspace title",
+      defaultValue: currentTitle,
+      onSubmit: (title) => void onRenameThread(workspaceId, title),
+    });
+  };
+
+  if (!isVisible) {
+    return (
+      <aside
+        id="workspace-sidebar"
+        className="workspace-sidebar workspace-sidebar--collapsed"
+        aria-label="Workspace sidebar"
+      >
+        <div className="workspace-sidebar__brand">
+          <button
+            type="button"
+            onClick={onToggle}
+            className="workspace-sidebar__brand-icon p-0 bg-transparent hover:bg-transparent border-none outline-none"
+            aria-label="Show workspaces"
+            title="Show workspaces"
+          >
+            <svg
+              width="52"
+              height="31"
+              viewBox="0 0 64 38"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="transition-transform hover:scale-105"
+            >
+              <rect width="64" height="38" rx="8" fill="black" />
+              <g stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M 14 27 C 17 16 19 10 20 8 C 21 12 23 20 25 27" />
+                <path d="M 16 20 C 19 19 21 21 23 20" />
+                <path d="M 40 13 C 35 10 30 13 30 19 C 30 25 34 28 38 27 C 40 26 40 22 40 20 L 36 20" />
+                <path d="M 46 11 C 48 16 51 22 54 27" />
+                <path d="M 54 11 C 52 16 49 22 46 27" />
+              </g>
+            </svg>
+          </button>
+        </div>
+        <div className="mt-auto p-2">
+          <a
+            href="https://discord.gg/y77e9Euz"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center w-8 h-8 rounded-lg text-white transition-colors"
+            style={{ backgroundColor: '#5865F2' }}
+            onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#4752C4')}
+            onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#5865F2')}
+            title="Join Discord"
+          >
+            <svg width="14" height="14" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path d="M60.1 4.9A58.5 58.5 0 0045.4.2a.2.2 0 00-.2.1 40.8 40.8 0 00-1.8 3.7 54 54 0 00-16.2 0A37.4 37.4 0 0025.4.3a.2.2 0 00-.2-.1A58.4 58.4 0 0010.5 4.9a.2.2 0 00-.1.1C1.5 18.7-.9 32.2.3 45.5v.1a58.8 58.8 0 0017.7 9a.2.2 0 00.3-.1 42 42 0 003.6-5.9.2.2 0 00-.1-.3 38.8 38.8 0 01-5.5-2.6.2.2 0 01 0-.4l1.1-.9a.2.2 0 01.2 0 42 42 0 0035.6 0 .2.2 0 01.2 0l1.1.9a.2.2 0 010 .4 36.4 36.4 0 01-5.5 2.6.2.2 0 00-.1.3 47.2 47.2 0 003.6 5.9.2.2 0 00.3.1 58.6 58.6 0 0017.7-9v-.1c1.4-15.2-2.4-28.4-10-40.1a.2.2 0 00-.1-.1zM23.7 37.3c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7zm23.3 0c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7z"/>
+            </svg>
+          </a>
+        </div>
+      </aside>
+    );
+  }
+
+  return (
+    <aside
+      id="workspace-sidebar"
+      className="workspace-sidebar"
+      aria-label="Workspace sidebar"
+      aria-busy={isLoading ? "true" : undefined}
+    >
+      <div className="workspace-sidebar__brand">
+        <div className="flex items-center justify-center mr-2" aria-hidden="true">
+          <svg
+            width="52"
+            height="31"
+            viewBox="0 0 64 38"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="64" height="38" rx="8" fill="black" />
+            <g stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M 14 27 C 17 16 19 10 20 8 C 21 12 23 20 25 27" />
+              <path d="M 16 20 C 19 19 21 21 23 20" />
+              <path d="M 40 13 C 35 10 30 13 30 19 C 30 25 34 28 38 27 C 40 26 40 22 40 20 L 36 20" />
+              <path d="M 46 11 C 48 16 51 22 54 27" />
+              <path d="M 54 11 C 52 16 49 22 46 27" />
+            </g>
+          </svg>
+        </div>
+        {onToggle && (
+          <button
+            type="button"
+            onClick={onToggle}
+            aria-label="Hide workspaces"
+            title="Hide workspaces"
+            className="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600"
+          >
+            <PanelLeftClose className="h-4 w-4" strokeWidth={1.75} />
+          </button>
+        )}
+      </div>
+
+      <div className="workspace-sidebar__content">
+        {onSearch && (
+          <div className="px-3 pt-2 pb-1">
+            <button
+              type="button"
+              onClick={onSearch}
+              className="flex items-center gap-2 w-full h-8 px-2.5 rounded-lg border border-slate-200 bg-white text-slate-400 text-xs hover:border-slate-300 hover:text-slate-500 transition-all"
+            >
+              <Search className="h-3.5 w-3.5 shrink-0" strokeWidth={1.75} />
+              <span>Search...</span>
+              <kbd className="ml-auto text-[10px] font-sans font-medium text-slate-300 bg-slate-50 border border-slate-200 rounded px-1 py-0.5">&#8984;K</kbd>
+            </button>
+          </div>
+        )}
+
+        <nav className="workspace-sidebar__section">
+          <div className="workspace-sidebar__section-header">
+            <Link
+              href="/agents"
+              className="workspace-sidebar__section-link"
+            >
+              <Bot size={13} className="flex-shrink-0" />
+              Manage Agents
+            </Link>
+          </div>
+        </nav>
+
+        <nav className="workspace-sidebar__section">
+          <div className="workspace-sidebar__section-header">
+            <p className="workspace-sidebar__section-label">Workspaces</p>
+            <div className="workspace-sidebar__header-actions">
+              <button
+                type="button"
+                className="workspace-sidebar__action"
+                onClick={handleCreateClick}
+                disabled={isCreating}
+                aria-label={isCreating ? "Creating workspace" : "Create workspace"}
+                title={isCreating ? "Creating..." : "Create workspace"}
+              >
+                <Plus size={14} />
+              </button>
+            </div>
+          </div>
+          {sortedWorkspaces.map((workspace) => {
+            const isActive = workspace.id === activeThreadId;
+            const isDeletingWorkspace = deletingThreadId === workspace.id;
+            const isRenamingWorkspace = renamingThreadId === workspace.id;
+            const title = workspace.title?.trim() || "Untitled workspace";
+            const isExpanded = expandedWorkspaces.has(workspace.id);
+            const workspaceTeams = teams.filter((t) => !t.is_default && t.workspace_ids?.includes(workspace.id));
+
+            return (
+              <div key={workspace.id}>
+                <div className="workspace-sidebar__workspace-item group">
+                  <button
+                    type="button"
+                    className={`workspace-sidebar__nav-item workspace-sidebar__workspace-nav-item ${isActive ? "workspace-sidebar__nav-item--active workspace-sidebar__workspace-nav-item--active" : ""}`}
+                    onClick={() => {
+                      onSelectThread(workspace.id);
+                      if (!isExpanded) toggleWorkspaceExpanded(workspace.id);
+                    }}
+                    aria-current={isActive ? "page" : undefined}
+                  >
+                    {isExpanded ? (
+                      <ChevronDown size={14} className="flex-shrink-0 text-slate-400" onClick={(e) => { e.stopPropagation(); toggleWorkspaceExpanded(workspace.id); }} />
+                    ) : (
+                      <ChevronRight size={14} className="flex-shrink-0 text-slate-400" onClick={(e) => { e.stopPropagation(); toggleWorkspaceExpanded(workspace.id); }} />
+                    )}
+                    <span className="workspace-sidebar__workspace-title">{title}</span>
+                    {workspaceTeams.length > 0 && (
+                      <span className="ml-auto text-[10px] text-slate-400">{workspaceTeams.length}</span>
+                    )}
+                  </button>
+                  <div className="workspace-sidebar__workspace-actions">
+                    <button
+                      type="button"
+                      className="workspace-sidebar__workspace-action"
+                      onClick={() => handleCreateTeam(workspace.id)}
+                      aria-label={`Add team to ${title}`}
+                      title="Add team"
+                    >
+                      <Users size={12} />
+                    </button>
+                    <button
+                      type="button"
+                      className="workspace-sidebar__workspace-action"
+                      onClick={() => handleRenameClick?.(workspace.id, title)}
+                      disabled={isRenamingWorkspace || isDeletingWorkspace}
+                      aria-label={`Rename workspace ${title}`}
+                      title={`Rename workspace ${title}`}
+                    >
+                      <Pencil size={12} />
+                    </button>
+                    <button
+                      type="button"
+                      className="workspace-sidebar__workspace-action workspace-sidebar__workspace-action--delete"
+                      onClick={() => handleDeleteClick(workspace.id)}
+                      disabled={isDeletingWorkspace || isRenamingWorkspace}
+                      aria-label={`Delete workspace ${title}`}
+                      title={`Delete workspace ${title}`}
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  </div>
+                </div>
+                {isExpanded && (
+                  <div className="pl-4 py-0.5 flex flex-col gap-0.5">
+                    {workspaceTeams.map((team) => {
+                      const teamIsExpanded = expandedTeams.has(team.id);
+                      return (
+                        <div key={team.id}>
+                          <div className="workspace-sidebar__workspace-item group">
+                            <button
+                              type="button"
+                              className="workspace-sidebar__nav-item"
+                              onClick={() => {
+                                if (onSelectTeam) onSelectTeam(team.id);
+                                toggleTeamExpanded(team.id);
+                              }}
+                            >
+                              {teamIsExpanded ? (
+                                <ChevronDown size={12} className="flex-shrink-0 text-slate-400" />
+                              ) : (
+                                <ChevronRight size={12} className="flex-shrink-0 text-slate-400" />
+                              )}
+                              <Users size={12} className="flex-shrink-0 text-slate-400" />
+                              <span className="workspace-sidebar__workspace-title text-xs">{team.name}</span>
+                              <span className="ml-auto text-[10px] text-slate-400">{team.agents.length}</span>
+                            </button>
+                            <div className="workspace-sidebar__workspace-actions">
+                              <button
+                                type="button"
+                                className="workspace-sidebar__workspace-action"
+                                onClick={() => handleAddAgentToTeam(team.id)}
+                                aria-label={`Add agent to ${team.name}`}
+                                title="Add agent"
+                              >
+                                <Plus size={11} />
+                              </button>
+                              <button
+                                type="button"
+                                className="workspace-sidebar__workspace-action"
+                                onClick={() => handleRenameTeam(team.id, team.name)}
+                                aria-label={`Rename team ${team.name}`}
+                                title="Rename team"
+                              >
+                                <Pencil size={11} />
+                              </button>
+                              <button
+                                type="button"
+                                className="workspace-sidebar__workspace-action workspace-sidebar__workspace-action--delete"
+                                onClick={() => handleDeleteTeam(team.id)}
+                                aria-label={`Delete team ${team.name}`}
+                                title="Delete team"
+                              >
+                                <Trash2 size={11} />
+                              </button>
+                            </div>
+                          </div>
+                          {teamIsExpanded && team.agents.length > 0 && (
+                            <div className="pl-4 py-0.5 flex flex-col gap-0.5">
+                              <DndContext
+                                sensors={dndSensors}
+                                collisionDetection={closestCenter}
+                                onDragEnd={handleTeamDragEnd(team.id)}
+                              >
+                                <SortableContext
+                                  items={team.agents.map((a) => a.agent_id)}
+                                  strategy={verticalListSortingStrategy}
+                                >
+                                  {team.agents.map((ta, idx) => {
+                                    const agent = participants.find((p) => p.id === ta.agent_id);
+                                    return (
+                                      <SortableTeamAgentItem
+                                        key={ta.agent_id}
+                                        ta={ta}
+                                        agent={agent}
+                                        index={idx}
+                                        onClick={() => setAgentDetailId(ta.agent_id)}
+                                      />
+                                    );
+                                  })}
+                                </SortableContext>
+                              </DndContext>
+                            </div>
+                          )}
+                          {teamIsExpanded && team.agents.length === 0 && (
+                            <p className="pl-6 py-0.5 text-[11px] text-slate-400">No agents</p>
+                          )}
+                        </div>
+                      );
+                    })}
+                    <button
+                      type="button"
+                      className="flex items-center gap-1.5 px-2 py-1 text-[11px] text-slate-400 hover:text-slate-600 transition-colors"
+                      onClick={() => handleCreateTeam(workspace.id)}
+                    >
+                      <Plus size={11} />
+                      <span>team</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </nav>
+
+        <nav className="workspace-sidebar__section">
+          <div className="workspace-sidebar__section-header">
+            <Link
+              href="/projects"
+              className="workspace-sidebar__section-label hover:text-slate-700 transition-colors cursor-pointer"
+            >
+              Boards
+            </Link>
+          </div>
+          <div className="workspace-sidebar__workspace-list">
+            {projects.map((p) => (
+              <div key={p.slug} className="workspace-sidebar__workspace-item group">
+                <Link
+                  href={`/projects/${p.slug}`}
+                  className="workspace-sidebar__nav-item workspace-sidebar__workspace-nav-item flex items-center gap-3"
+                >
+                  <Minus size={16} className="flex-shrink-0 text-slate-400" />
+                  <span className="workspace-sidebar__workspace-title">{p.name}</span>
+                </Link>
+              </div>
+            ))}
+          </div>
+        </nav>
+      </div>
+
+      <div className="mt-auto px-3 pb-3">
+        <a
+          href="https://discord.gg/y77e9Euz"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-center gap-2 w-full py-2 rounded-lg text-white text-sm font-medium transition-colors"
+          style={{ backgroundColor: '#5865F2' }}
+          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#4752C4')}
+          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#5865F2')}
+        >
+          <svg width="14" height="14" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path d="M60.1 4.9A58.5 58.5 0 0045.4.2a.2.2 0 00-.2.1 40.8 40.8 0 00-1.8 3.7 54 54 0 00-16.2 0A37.4 37.4 0 0025.4.3a.2.2 0 00-.2-.1A58.4 58.4 0 0010.5 4.9a.2.2 0 00-.1.1C1.5 18.7-.9 32.2.3 45.5v.1a58.8 58.8 0 0017.7 9a.2.2 0 00.3-.1 42 42 0 003.6-5.9.2.2 0 00-.1-.3 38.8 38.8 0 01-5.5-2.6.2.2 0 01 0-.4l1.1-.9a.2.2 0 01.2 0 42 42 0 0035.6 0 .2.2 0 01.2 0l1.1.9a.2.2 0 010 .4 36.4 36.4 0 01-5.5 2.6.2.2 0 00-.1.3 47.2 47.2 0 003.6 5.9.2.2 0 00.3.1 58.6 58.6 0 0017.7-9v-.1c1.4-15.2-2.4-28.4-10-40.1a.2.2 0 00-.1-.1zM23.7 37.3c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7zm23.3 0c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7z"/>
+          </svg>
+          Join Discord
+        </a>
+      </div>
+
+      {/* Agent profiles are now at /agents/[id] */}
+
+      {/* 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;
+                        });
+                      }}
+                    >
+                      <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${selected ? "bg-slate-900 border-slate-900" : "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>
+                      <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 className="truncate text-[11px] text-slate-400">{p.model}</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 onAddAgentToTeam?.(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 & Add"
+          teams={teams?.filter((t) => !t.is_default).map((t) => {
+            const wsName = (t.workspace_ids ?? []).map((wid) => threads.find((th) => th.id === 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) {
+              // Add to remaining teams
+              for (const tid of (teamIds ?? []).slice(1)) {
+                void onAddAgentToTeam?.(tid, id);
+              }
+              setCreatingNewAgent(false);
+              setAddAgentModal(null);
+            }
+          }}
+          onCancel={() => { setCreatingNewAgent(false); }}
+        />
+      )}
+
+      {/* Text input modal (create/rename) */}
+      {inputModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setInputModal(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">{inputModal.title}</h3>
+              <button
+                type="button"
+                className="text-slate-400 hover:text-slate-600"
+                onClick={() => setInputModal(null)}
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <form
+              className="px-4 py-4 flex flex-col gap-3"
+              onSubmit={(e) => {
+                e.preventDefault();
+                const fd = new FormData(e.currentTarget);
+                const value = (fd.get("value") as string)?.trim();
+                if (!value) return;
+                inputModal.onSubmit(value);
+                setInputModal(null);
+              }}
+            >
+              <input
+                ref={inputModalRef}
+                name="value"
+                type="text"
+                defaultValue={inputModal.defaultValue}
+                placeholder={inputModal.placeholder}
+                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={() => setInputModal(null)}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 transition-colors"
+                >
+                  {inputModal.defaultValue ? "Save" : "Create"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Confirm modal (delete) */}
+      {confirmModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setConfirmModal(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">{confirmModal.title}</h3>
+              <button
+                type="button"
+                className="text-slate-400 hover:text-slate-600"
+                onClick={() => setConfirmModal(null)}
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <div className="px-4 py-4 flex flex-col gap-4">
+              <p className="text-sm text-slate-600">{confirmModal.message}</p>
+              <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={() => setConfirmModal(null)}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="px-3 py-1.5 text-xs font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
+                  onClick={() => {
+                    confirmModal.onConfirm();
+                    setConfirmModal(null);
+                  }}
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Create Team modal (name + agent checklist) */}
+      {createTeamModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+          onClick={() => setCreateTeamModal(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">Create team</h3>
+              <button
+                type="button"
+                className="text-slate-400 hover:text-slate-600"
+                onClick={() => setCreateTeamModal(null)}
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <div className="px-4 py-3 border-b border-slate-100">
+              <input
+                ref={inputModalRef}
+                type="text"
+                value={createTeamName}
+                onChange={(e) => setCreateTeamName(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>
+            <div className="overflow-y-auto py-1 flex-1">
+              <p className="px-4 py-1.5 text-[11px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
+              {participants.map((p) => {
+                const selected = createTeamAgents.has(p.id);
+                return (
+                  <button
+                    key={p.id}
+                    type="button"
+                    className={`w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors ${selected ? "bg-slate-100 text-slate-900" : "text-slate-700 hover:bg-slate-50"}`}
+                    onClick={() => {
+                      setCreateTeamAgents((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(p.id)) next.delete(p.id);
+                        else next.add(p.id);
+                        return next;
+                      });
+                    }}
+                  >
+                    <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${selected ? "bg-slate-900 border-slate-900" : "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>
+                    <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 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={() => setCreateTeamModal(null)}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                disabled={!createTeamName.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 handleCreateTeamSubmit()}
+              >
+                Create{createTeamAgents.size > 0 ? ` (${createTeamAgents.size} agents)` : ""}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {agentDetailAgent && (
+        <AgentDetailModal
+          agent={agentDetailAgent}
+          teams={teams}
+          onClose={() => setAgentDetailId(null)}
+          onSave={onUpdateParticipant}
+          onAddToTeam={onAddAgentToTeam}
+          onRemoveFromTeam={onRemoveAgentFromTeam}
+        />
+      )}
+    </aside>
+  );
+}
+
+// ── Agent Detail/Edit Modal ─────────────────────────────────────────────────
+
+const PROVIDERS: ChatProvider[] = ["claude", "gemini", "ollama", "codex"];
+
+function AgentDetailModal({
+  agent,
+  teams,
+  onClose,
+  onSave,
+  onAddToTeam,
+  onRemoveFromTeam,
+}: {
+  agent: Participant | null;
+  teams: Team[];
+  onClose: () => void;
+  onSave?: (updated: Participant) => Promise<unknown>;
+  onAddToTeam?: (teamId: string, agentId: string) => Promise<unknown>;
+  onRemoveFromTeam?: (teamId: string, agentId: string) => Promise<unknown>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [name, setName] = useState("");
+  const [provider, setProvider] = useState<ChatProvider>("claude");
+  const [model, setModel] = useState("");
+  const [identity, setIdentity] = useState("");
+  const [identityFile, setIdentityFile] = useState("");
+  const [color, setColor] = useState("#6B7280");
+  const [skills, setSkills] = useState<{ file: string; condition: string }[]>([]);
+  const [variableEntries, setVariableEntries] = useState<{ key: string; value: string }[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // Reset form when agent changes
+  const resetForm = useCallback(() => {
+    if (!agent) return;
+    setName(agent.name);
+    setProvider(agent.provider);
+    setModel(agent.model ?? "");
+    setIdentity(agent.identity ?? "");
+    setIdentityFile(agent.identityFile ?? "");
+    setColor(agent.color ?? "#6B7280");
+    setSkills((agent.skills ?? []).map((s) => ({ file: s.file, condition: s.condition })));
+    setVariableEntries(
+      agent.variables && Object.keys(agent.variables).length > 0
+        ? Object.entries(agent.variables).map(([key, value]) => ({ key, value }))
+        : [{ key: "", value: "" }],
+    );
+  }, [agent]);
+
+  // Initialize on open
+  useEffect(() => { resetForm(); }, [resetForm]);
+
+  if (!agent) return null;
+
+  const agentTeams = teams.filter((t) => t.agents.some((a) => a.agent_id === agent.id));
+  const availableTeams = teams.filter((t) => !t.agents.some((a) => a.agent_id === agent.id));
+
+  const handleSave = async () => {
+    if (!onSave || !name.trim() || !model.trim()) return;
+    const parsedVars: Record<string, string> = {};
+    for (const entry of variableEntries) {
+      if (entry.key.trim()) parsedVars[entry.key.trim()] = entry.value;
+    }
+    setSaving(true);
+    try {
+      await onSave({
+        ...agent,
+        name: name.trim(),
+        provider,
+        model: model.trim(),
+        color,
+        skills: skills.filter((s) => s.file.trim()),
+        ...(identity.trim() ? { identity: identity.trim() } : {}),
+        ...(identityFile.trim() ? { identityFile: identityFile.trim() } : {}),
+        ...(Object.keys(parsedVars).length > 0 ? { variables: parsedVars } : {}),
+      });
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const inputClass = "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";
+  const labelClass = "text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1 block";
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-xl shadow-xl border border-slate-200 w-[640px] max-h-[85vh] flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+          <h3 className="text-sm font-medium text-slate-900">Agent Details</h3>
+          <button
+            type="button"
+            className="text-slate-400 hover:text-slate-600 transition-colors"
+            onClick={onClose}
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="overflow-y-auto px-5 py-5 flex flex-col gap-4">
+          {/* Avatar + Name */}
+          <div className="flex items-center gap-4">
+            <img
+              src={agentAvatarUrl(agent.id, 64, color)}
+              alt={agent.name}
+              className="w-16 h-16 rounded-full bg-slate-100"
+            />
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-col gap-2">
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Agent name"
+                  className={inputClass}
+                />
+                <div className="flex items-center gap-2">
+                  <label className="text-[10px] text-slate-400">Color</label>
+                  <input
+                    type="color"
+                    value={color}
+                    onChange={(e) => setColor(e.target.value)}
+                    className="w-6 h-6 rounded border border-slate-200 cursor-pointer p-0"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Provider + Model */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className={labelClass}>Provider</label>
+              <select
+                value={provider}
+                onChange={(e) => setProvider(e.target.value as ChatProvider)}
+                className={inputClass}
+              >
+                {PROVIDERS.map((p) => (
+                  <option key={p} value={p}>{p}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>Model</label>
+              <input
+                type="text"
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                placeholder="e.g. claude-sonnet-4-20250514"
+                className={`${inputClass} font-mono`}
+              />
+            </div>
+          </div>
+
+          {/* Identity File */}
+          <div>
+            <label className={labelClass}>Identity file</label>
+            <input
+              type="text"
+              value={identityFile}
+              onChange={(e) => setIdentityFile(e.target.value)}
+              placeholder="/path/to/identity.md"
+              className={`${inputClass} font-mono`}
+            />
+          </div>
+
+          {/* Identity text */}
+          <div>
+            <label className={labelClass}>Identity prompt</label>
+            <div className="border border-slate-200 rounded-lg overflow-hidden focus-within:border-slate-400 focus-within:ring-1 focus-within:ring-slate-200 transition-all">
+              <RichTextEditor
+                content={identity}
+                onChange={(md) => setIdentity(md)}
+                placeholder="System prompt / identity text…"
+              />
+            </div>
+          </div>
+
+          {/* Variables */}
+          <div>
+            <label className={labelClass}>Variables</label>
+            <div className="flex flex-col gap-2">
+              {variableEntries.map((entry, i) => (
+                <div key={i} className="flex items-center gap-2">
+                  <input
+                    value={entry.key}
+                    onChange={(e) => {
+                      const next = [...variableEntries];
+                      next[i] = { ...next[i], key: e.target.value };
+                      setVariableEntries(next);
+                    }}
+                    placeholder="key"
+                    className={`${inputClass} flex-1 font-mono !text-xs`}
+                  />
+                  <input
+                    value={entry.value}
+                    onChange={(e) => {
+                      const next = [...variableEntries];
+                      next[i] = { ...next[i], value: e.target.value };
+                      setVariableEntries(next);
+                    }}
+                    placeholder="value"
+                    className={`${inputClass} flex-1 font-mono !text-xs`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const next = variableEntries.filter((_, j) => j !== i);
+                      setVariableEntries(next.length ? next : [{ key: "", value: "" }]);
+                    }}
+                    className="text-slate-400 hover:text-red-500 transition-colors text-xs shrink-0"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => setVariableEntries([...variableEntries, { key: "", value: "" }])}
+                className="text-xs text-slate-400 hover:text-slate-600 transition-colors self-start"
+              >
+                + Add variable
+              </button>
+            </div>
+            <p className="text-[10px] text-slate-400 mt-1">
+              {"Use {{key}} in identity or skill conditions."}
+            </p>
+          </div>
+
+          {/* Skills */}
+          <div>
+            <label className={labelClass}>Skills</label>
+            <div className="flex flex-col gap-2">
+              {skills.map((s, i) => (
+                <div key={i} className="bg-slate-50 rounded-lg px-3 py-2.5 relative group/skill">
+                  <button
+                    type="button"
+                    className="absolute top-2 right-2 opacity-0 group-hover/skill:opacity-100 text-slate-400 hover:text-red-500 transition-all"
+                    onClick={() => setSkills(skills.filter((_, j) => j !== i))}
+                  >
+                    <X size={12} />
+                  </button>
+                  <div className="flex flex-col gap-1.5">
+                    <div>
+                      <label className="text-[9px] text-slate-400 uppercase tracking-wide">File path</label>
+                      <input
+                        type="text"
+                        value={s.file}
+                        onChange={(e) => {
+                          const next = [...skills];
+                          next[i] = { ...next[i], file: e.target.value };
+                          setSkills(next);
+                        }}
+                        placeholder="/path/to/skill.md"
+                        className={`${inputClass} font-mono !text-xs !py-1.5`}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[9px] text-slate-400 uppercase tracking-wide">Condition</label>
+                      <input
+                        type="text"
+                        value={s.condition}
+                        onChange={(e) => {
+                          const next = [...skills];
+                          next[i] = { ...next[i], condition: e.target.value };
+                          setSkills(next);
+                        }}
+                        placeholder="e.g. when editing React files"
+                        className={`${inputClass} !text-xs !py-1.5`}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+              <button
+                type="button"
+                className="inline-flex items-center gap-1 text-xs text-slate-500 hover:text-slate-700 transition-colors self-start px-1 py-0.5"
+                onClick={() => setSkills([...skills, { file: "", condition: "" }])}
+              >
+                <Plus size={12} />
+                Add skill
+              </button>
+            </div>
+          </div>
+
+          {/* Teams (multi-team) */}
+          <div>
+            <label className={labelClass}>Teams</label>
+            {agentTeams.length > 0 ? (
+              <div className="flex flex-col gap-1">
+                {agentTeams.map((t) => (
+                  <div key={t.id} className="flex items-center gap-2 text-xs bg-slate-50 rounded-lg px-3 py-2">
+                    <Users size={12} className="text-slate-400 shrink-0" />
+                    <span className="truncate flex-1">{t.name}</span>
+                    {onRemoveFromTeam && !t.is_default && (
+                      <button
+                        type="button"
+                        className="text-slate-400 hover:text-red-500 transition-colors"
+                        onClick={() => onRemoveFromTeam(t.id, agent.id)}
+                        title="Remove from team"
+                      >
+                        <X size={12} />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-xs text-slate-400 italic">Not in any team</p>
+            )}
+            {availableTeams.length > 0 && onAddToTeam && (
+              <div className="mt-2 flex flex-wrap gap-1">
+                {availableTeams.map((t) => (
+                  <button
+                    key={t.id}
+                    type="button"
+                    className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-lg border border-dashed border-slate-300 text-slate-500 hover:border-slate-400 hover:text-slate-700 transition-colors"
+                    onClick={() => onAddToTeam(t.id, agent.id)}
+                  >
+                    <Plus size={10} />
+                    {t.name}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        {onSave && (
+          <div className="px-5 py-3 border-t border-slate-100 flex justify-end">
+            <button
+              type="button"
+              disabled={saving || !name.trim() || !model.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 flex items-center gap-1"
+              onClick={() => void handleSave()}
+            >
+              <Check size={12} />
+              Save
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}