"use client"; import { useTheme } from "@/components/theme-provider"; import { isLightColorTheme } from "@/lib/color-theme"; import { getErrorMessage } from "@/lib/error-utils"; import type { Extension } from "@codemirror/state"; import { AiReviewButton, AiReviewPanel, buildBlockingMessage, buildLastReview, useAiReview, } from "@/components/ai-review"; import { TeamOwnershipFields } from "@/components/rbac/TeamOwnershipFields"; import { HarnessFeaturePanels } from "@/components/harness-engine/HarnessFeaturePanels"; import { ClaudeACPSettings } from "@/components/harness-engine/ClaudeACPSettings"; import { HarnessHelp } from "@/components/harness-engine/HarnessHelp"; import { harnessBuilderSections, harnessDisplayName, harnessStatusLabel, supportsHarnessCapability, validateHarnessOptionsSchema } from "@/lib/harness-builder"; import { HarnessOptionsForm } from "@/components/harness-engine/HarnessOptionsForm"; import { UnsavedChangesDialog } from "@/components/shared/UnsavedChangesDialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { ModelPicker } from "@/components/ui/model-picker"; import { Select } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { type TeamPickerOption } from "@/components/ui/team-picker"; import { Textarea } from "@/components/ui/textarea"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useToast } from "@/components/ui/toast"; import { useEditorDirtyTracking } from "@/hooks/use-editor-dirty-tracking"; import { gradientThemes } from "@/lib/gradient-themes"; import { getMarkdownComponents } from "@/lib/markdown-components"; import { cn } from "@/lib/utils"; import { useUnsavedChangesStore } from "@/store/unsaved-changes-store"; import type { AgentUIConfig, BuiltinToolsConfig, CustomThemeConfig, DynamicAgentConfig, DynamicAgentConfigCreate, DynamicAgentConfigUpdate, FeaturesConfig, InterruptOn, ReasoningEffort, SubAgentRef, VisibilityType, } from "@/types/dynamic-agent"; import type { AgentBlueprint, HarnessDescriptor } from "@/types/harness-engine"; import { AnimatePresence, motion } from "framer-motion"; import { ArrowLeft, Check, ChevronDown, ChevronLeft, ChevronRight, Eye, Globe, GripHorizontal, Info, Loader2, Pencil, Sparkles, Users, } from "lucide-react"; import React from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { AgentAvatar } from "./AgentAvatar"; import { AllowedToolsPicker } from "./AllowedToolsPicker"; import { BuiltinToolsPicker } from "./BuiltinToolsPicker"; import { ConnectAgentCoreDialog, useAgentCoreConnectionAccess } from "./ConnectAgentCoreDialog"; import { DatasourcePicker } from "./DatasourcePicker"; import { InterruptConfigPicker } from "./InterruptConfigPicker"; import { MiddlewarePicker } from "./MiddlewarePicker"; import { SkillsSelector } from "./SkillsSelector"; import { SubagentPicker } from "./SubagentPicker"; import { WorkflowToolsPicker } from "./WorkflowToolsPicker"; import { RemoteAgentsPicker } from "./RemoteAgentsPicker"; import type { AgentSetupStep } from "./deep-linking"; // Lazy-load CodeMirror to avoid SSR issues const CodeMirrorEditor = React.lazy(() => import("@uiw/react-codemirror")); interface DynamicAgentEditorProps { agent: DynamicAgentConfig | null; // null = creating new cloneFrom?: DynamicAgentConfig | null; // Agent to clone from (for pre-filling) readOnly?: boolean; // true for view-only mode readOnlyReason?: "config" | "permissions"; // why readOnly is true initialStep?: AgentSetupStep; onStepChange?: (step: AgentSetupStep) => void; onSave: () => void; onCancel: () => void; } /** * Generate a URL-safe slug from an agent name with agent- prefix. * e.g., "Knowledge Agent" -> "agent-knowledge-agent" */ function generateSlug(name: string): string { const slug = name .toLowerCase() .trim() .replace(/[^a-z0-9\s-]/g, "") // Remove special characters .replace(/\s+/g, "-") // Replace spaces with hyphens .replace(/-+/g, "-") // Collapse multiple hyphens .replace(/^-|-$/g, ""); // Trim leading/trailing hyphens return slug ? `agent-${slug}` : ""; } function hasRagToolAccess( allowedTools: Record, ): boolean { const selection = allowedTools["knowledge-base"]; return selection !== undefined && selection !== false; } function normalizeKnowledgeIds(value: unknown): string[] { if (!Array.isArray(value)) return []; return value.filter( (item): item is string => typeof item === "string" && Boolean(item.trim()), ); } // Visibility picker — `private` was retired on 2026-05-22 (see // `docs/docs/changes/2026-05-22-remove-private-agents.md` and the // `VisibilityType` definition in `@/types/dynamic-agent`). Every dynamic // agent is now team-owned; users who want a truly personal agent should // create a single-member team and own the agent through that team. const VISIBILITY_OPTIONS: { value: VisibilityType; label: string; icon: React.ReactNode; description: string; }[] = [ { value: "team", label: "Team", icon: , description: "Team members can use; you manage as creator; team admins can manage. Optionally share with other teams.", }, { value: "global", label: "Global", icon: , description: "Available to all users; owner-team admins manage it.", }, ]; interface TeamOption { _id: string; name: string; slug?: string; description?: string; user_role?: string | null; can_own_agents?: boolean; } // Step definitions for the wizard const STEPS = [ { id: "basic" as const, label: "Basic Info", hint: "Define your agent's identity and access level", }, { id: "instructions" as const, label: "Instructions", hint: "Configure how your agent behaves", }, { id: "tools" as const, label: "Tools", hint: "Select which tools your agent can use", }, { id: "knowledge" as const, label: "Knowledge", hint: "Choose the collections and datasources this agent can search", }, { id: "skills" as const, label: "Skills", hint: "Attach skills that guide your agent's behavior (optional)", }, { id: "advanced" as const, label: "Advanced", hint: "Subagents, remote agents, approval rules, and middleware", }, ]; type StepId = AgentSetupStep; /** * Horizontal step indicator component */ function StepIndicator({ steps, currentStep, onStepClick, }: { steps: typeof STEPS; currentStep: StepId; onStepClick: (stepId: StepId) => void; }) { return (
{steps.map((step, index) => ( {index > 0 && (
)} ))}
); } /** * Collapsible sub-section used in the Advanced step. */ function CollapsibleSection({ title, description, badge, defaultExpanded = false, children, }: { title: string; description: string; badge?: string; defaultExpanded?: boolean; children: React.ReactNode; }) { const [expanded, setExpanded] = React.useState(defaultExpanded); return (
{expanded &&
{children}
}
); } /** * Advanced step: collapsible sub-sections for subagents, interrupts, middleware. */ function AdvancedStep({ agent, subagents, setSubagents, allowedRemoteAgents, setAllowedRemoteAgents, remoteAgentTimeouts, setRemoteAgentTimeouts, interruptOn, setInterruptOn, allowedTools, builtinTools, setBuiltinTools, features, setFeatures, availableModels, setMiddlewareError, loading, visibility, descriptor, schemaPanel, }: { descriptor?: HarnessDescriptor; schemaPanel?: React.ReactNode; agent: DynamicAgentConfig | null; subagents: SubAgentRef[]; setSubagents: (v: SubAgentRef[]) => void; allowedRemoteAgents: string[]; setAllowedRemoteAgents: (v: string[]) => void; remoteAgentTimeouts: Record; setRemoteAgentTimeouts: React.Dispatch>>; interruptOn: InterruptOn; setInterruptOn: (v: InterruptOn) => void; allowedTools: Record; builtinTools?: BuiltinToolsConfig; setBuiltinTools: (v: BuiltinToolsConfig) => void; features: FeaturesConfig | undefined; setFeatures: (v: FeaturesConfig | undefined) => void; availableModels: { model_id: string; name: string; provider: string }[]; setMiddlewareError: (v: boolean) => void; loading: boolean; visibility: VisibilityType; }) { const interruptRuleCount = Object.values(interruptOn).reduce( (sum, tools) => sum + Object.keys(tools).length, 0, ); const workflowCount = builtinTools?.workflows?.length ?? 0; const remoteAgentCount = allowedRemoteAgents.length; const panels = { "schema-form": schemaPanel, "agent-delegation": (

Note: Subagents cannot be nested. The agents you add here will not have access to their own subagents when invoked.

), "remote-agents": ( { setAllowedRemoteAgents(ids); setRemoteAgentTimeouts((current) => Object.fromEntries( Object.entries(current).filter(([id]) => ids.includes(id)), )); }} timeoutValues={remoteAgentTimeouts} onTimeoutChange={(id, seconds) => setRemoteAgentTimeouts((current) => ({ ...current, [id]: seconds })) } disabled={loading} /> ), "tool-approvals": ( ), "deep-agents-middleware": ( ), "workflow-tools": ( { setBuiltinTools({ ...builtinTools, workflows: ids.length > 0 ? ids : undefined, } as BuiltinToolsConfig); }} disabled={loading} /> ) }; return
; } export function DynamicAgentEditor({ agent, cloneFrom, readOnly, readOnlyReason, initialStep = "basic", onStepChange, onSave, onCancel, }: DynamicAgentEditorProps) { const isEditing = !!agent; const isCloning = !!cloneFrom; const { toast } = useToast(); const connectionConfigured = useAgentCoreConnectionAccess(); const [connectionDialogOpen, setConnectionDialogOpen] = React.useState(false); // Source for initial values: editing agent > cloning source > empty defaults const source = agent || cloneFrom; // Form state - when cloning, append " (New)" to name const [name, setName] = React.useState( isCloning && source ? `${source.name} (New)` : source?.name || "", ); const [description, setDescription] = React.useState( source?.description || "", ); const [systemPrompt, setSystemPrompt] = React.useState( source?.system_prompt || "", ); // Default to `team` for new agents — every agent must have an owner // team, and team-scoped sharing is the safest default. `private` is // retired (see `VisibilityType` in `@/types/dynamic-agent`); legacy // docs that still carry `visibility: 'private'` on the wire are coerced // to `team` here so the picker has a matching tile to highlight. The // BFF-side `coerceAgentVisibilityOnRead` helper does the same on read, // but we coerce defensively in the UI in case a stale GET response // slips through before that helper is wired into every route. const [visibility, setVisibility] = React.useState(() => { const raw = source?.visibility as VisibilityType | "private" | undefined; if (raw === "team" || raw === "global") return raw; return "team"; }); const [sharedWithTeams, setSharedWithTeams] = React.useState( source?.shared_with_teams || [], ); const [ownerTeamSlug, setOwnerTeamSlug] = React.useState( source?.owner_team_slug || "", ); // Ownership transfer (spec 2026-06-03, US3). On edit, changing the owner // picker marks a pending transfer so the PUT can send owner_team_slug + // confirm_not_member. const [transferRequested, setTransferRequested] = React.useState(false); const [transferConfirmedNotMember, setTransferConfirmedNotMember] = React.useState(false); // When the server rejects a transfer with TRANSFER_NOT_MEMBER_UNCONFIRMED // (the caller is not a member of the destination team per OpenFGA, even // though the client-side picker showed it — e.g. an org admin who is not a // literal team member), surface an inline "Confirm Transfer" affordance // instead of a dead-end error so the user can explicitly proceed. const [transferNeedsServerConfirm, setTransferNeedsServerConfirm] = React.useState(false); const [allowedTools, setAllowedTools] = React.useState< Record >(source?.allowed_tools || {}); const [allowedRemoteAgents, setAllowedRemoteAgents] = React.useState(source?.allowed_remote_agents || []); const [remoteAgentTimeouts, setRemoteAgentTimeouts] = React.useState>(source?.remote_agent_timeouts || {}); const [builtinTools, setBuiltinTools] = React.useState< BuiltinToolsConfig | undefined >(source?.builtin_tools); const [subagents, setSubagents] = React.useState( source?.subagents || [], ); const [skills, setSkills] = React.useState(source?.skills || []); const [datasourceIds, setDatasourceIds] = React.useState(() => normalizeKnowledgeIds(source?.datasource_ids), ); const [ragCollectionIds, setRagCollectionIds] = React.useState(() => normalizeKnowledgeIds(source?.rag_collection_ids), ); // An agent with neither field configured is unrestricted: it searches // whatever the calling user can already access, with no additional // agent-level narrowing. This toggle is how the editor distinguishes that // intentional default from "restricted, but to nothing" (both fields // present as explicit empty arrays). Default a brand-new agent to // unrestricted; preserve whatever an existing agent already has. const [restrictKnowledge, setRestrictKnowledge] = React.useState( () => source?.datasource_ids != null || source?.rag_collection_ids != null, ); // Stable snapshot of whether this agent had an explicit restriction when // the editor opened, so turning the toggle off only sends a clearing // `null` when there is actually something to clear. const hadExplicitKnowledgeScope = React.useRef(restrictKnowledge).current; const [features, setFeatures] = React.useState( source?.features, ); const [interruptOn, setInterruptOn] = React.useState( source?.interrupt_on || { builtin: { request_user_input: true } }, ); const [modelId, setModelId] = React.useState(source?.model?.id || ""); const [modelProvider, setModelProvider] = React.useState( source?.model?.provider || "", ); const [reasoningEffort, setReasoningEffort] = React.useState( source?.model?.reasoning_effort || "medium", ); const [modelStreaming, setModelStreaming] = React.useState( source?.model?.streaming ?? null, ); const [supportedReasoningEfforts, setSupportedReasoningEfforts] = React.useState(null); const [gradientTheme, setGradientTheme] = React.useState( source?.ui?.gradient_theme || "default", ); const [customThemeConfig, setCustomThemeConfig] = React.useState( source?.ui?.custom_theme_config || { gradient_from: "#6366f1", gradient_to: "#1e1b4b", accent_color: "#ffffff", }, ); const [showCustomPicker, setShowCustomPicker] = React.useState(false); // Harness Engine persists a complete, immutable blueprint independently of // the legacy Dynamic Agents document. The catalog drives this form. const [harnessId, setHarnessId] = React.useState( source?.execution_harness_id || "dynamic_agents", ); const [harnessProfileId, setHarnessProfileId] = React.useState(""); const [harnessOptions, setHarnessOptions] = React.useState>({}); const [harnessDescriptors, setHarnessDescriptors] = React.useState([]); const [catalogRevision, setCatalogRevision] = React.useState(null); const [harnessRevision, setHarnessRevision] = React.useState(null); const [harnessLoading, setHarnessLoading] = React.useState(true); const [harnessLoadError, setHarnessLoadError] = React.useState(null); const harnessDrafts = React.useRef( new Map }>(), ); const selectedHarness = React.useMemo( () => harnessDescriptors.find((descriptor) => descriptor.id === harnessId), [harnessDescriptors, harnessId], ); const isDeepAgents = harnessId === "dynamic_agents"; const [harnessSwitchConfirmed, setHarnessSwitchConfirmed] = React.useState(false); const requiresHarnessConfirmation = isEditing && harnessId !== (agent?.execution_harness_id || "dynamic_agents"); const supportsTools = supportsHarnessCapability(selectedHarness, "tools.broker", isDeepAgents); const supportsKnowledge = supportsHarnessCapability(selectedHarness, "knowledge", isDeepAgents); const supportsSkills = supportsHarnessCapability(selectedHarness, "skills", isDeepAgents); const supportsConfiguredModel = supportsHarnessCapability(selectedHarness, "model.configured", isDeepAgents); const supportsBuiltinTools = supportsHarnessCapability(selectedHarness, "tools.builtin", isDeepAgents); const supportsDelegation = supportsHarnessCapability(selectedHarness, "multi_agent.delegation", isDeepAgents); const supportsRemoteAgents = supportsHarnessCapability(selectedHarness, "remote_agents", isDeepAgents); const supportsApprovals = supportsHarnessCapability(selectedHarness, "human_input.resume", isDeepAgents); const supportsMiddleware = supportsHarnessCapability(selectedHarness, "deep_agents.middleware", isDeepAgents); let builderSchemaError: string | null = null; let hasFeaturePanels = false; try { if (selectedHarness) validateHarnessOptionsSchema(selectedHarness.options_schema); hasFeaturePanels = harnessBuilderSections(selectedHarness).some(section => section.step === "advanced" && section.renderer !== "schema-form"); } catch (error) { builderSchemaError = error instanceof Error ? error.message : "Unsupported editor schema"; } const hasHarnessOptions = Object.keys(selectedHarness?.options_schema.properties ?? {}).length > 0; const steps = STEPS.filter((step) => { if (step.id === "tools") return supportsTools; if (step.id === "knowledge") return supportsKnowledge; if (step.id === "skills") return supportsSkills; if (step.id === "advanced") return isDeepAgents || hasFeaturePanels || hasHarnessOptions; return true; }).map((step) => step.id === "advanced" && !isDeepAgents ? { ...step, hint: "Configure options supported by this harness" } : step, ); const selectHarness = React.useCallback((nextHarnessId: string) => { harnessDrafts.current.set(harnessId, { profileId: harnessProfileId, options: harnessOptions, }); setHarnessSwitchConfirmed(false); setHarnessId(nextHarnessId); const draft = harnessDrafts.current.get(nextHarnessId); setHarnessOptions(draft?.options ?? {}); const descriptor = harnessDescriptors.find((item) => item.id === nextHarnessId); setHarnessProfileId(draft?.profileId ?? descriptor?.profiles.find((profile) => profile.available)?.id ?? ""); }, [harnessDescriptors, harnessId, harnessOptions, harnessProfileId]); async function selectConnectedAgentCore(profileId: string) { const response = await fetch("/api/harness-engine/harnesses", { cache: "no-store" }); const result = await response.json().catch(() => null); const descriptors = result?.data?.harnesses as HarnessDescriptor[] | undefined; if (!response.ok || !result?.success || !Array.isArray(descriptors) || !descriptors.some((item) => item.id === "agentcore" && item.availability === "available" && item.certification !== "blocked" && item.profiles.some((profile) => profile.id === profileId && profile.available))) { throw new Error("Connection was registered, but its profile could not be loaded. Reopen the editor to select it."); } harnessDrafts.current.set(harnessId, { profileId: harnessProfileId, options: harnessOptions }); setHarnessDescriptors(descriptors); setCatalogRevision(result.data.catalog_revision); setHarnessId("agentcore"); setHarnessProfileId(profileId); setHarnessOptions({}); setHarnessLoadError(null); toast("AgentCore connection selected. Save this agent to use it.", "success"); } // Sync request_user_input interrupt rule with builtin tool enabled state const hasRequestUserInputInterrupt = !!interruptOn?.builtin?.request_user_input; React.useEffect(() => { const cfg = ( builtinTools as Record )?.["request_user_input"]; const isEnabled = !!(cfg && cfg.enabled); const hasRule = hasRequestUserInputInterrupt; if (isEnabled && !hasRule) { // Tool enabled — add the rule setInterruptOn((prev) => ({ ...prev, builtin: { ...prev.builtin, request_user_input: true }, })); } else if (!isEnabled && hasRule) { // Tool disabled — remove the rule setInterruptOn((prev) => { const next = { ...prev }; if (next.builtin) { const rest = { ...next.builtin }; delete rest.request_user_input; if (Object.keys(rest).length === 0) { delete next.builtin; } else { next.builtin = rest; } } return next; }); } }, [builtinTools, hasRequestUserInputInterrupt]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); // Blocking-review message, kept separate from `error` so it only renders on // the Instructions step and can auto-clear the moment the review passes. const [blockingMessage, setBlockingMessage] = React.useState( null, ); const [, setMiddlewareError] = React.useState(false); const [availableModels, setAvailableModels] = React.useState< { model_id: string; name: string; provider: string; description: string }[] >([]); const [modelsLoading, setModelsLoading] = React.useState(false); const [availableTeams, setAvailableTeams] = React.useState([]); // AI suggestion state const [generatingField, setGeneratingField] = React.useState( null, ); const [promptTab, setPromptTab] = React.useState<"edit" | "preview">("edit"); const [editorHeight, setEditorHeight] = React.useState(480); const dragRef = React.useRef<{ startY: number; startHeight: number } | null>( null, ); const [showSuggestPromptInput, setShowSuggestPromptInput] = React.useState(false); const [suggestPromptInstruction, setSuggestPromptInstruction] = React.useState(""); const [showSuggestBasicInput, setShowSuggestBasicInput] = React.useState(false); const [suggestBasicInstruction, setSuggestBasicInstruction] = React.useState(""); const [enhanceExisting, setEnhanceExisting] = React.useState(false); const [enhanceExistingBasic, setEnhanceExistingBasic] = React.useState(false); const [promptStyle, setPromptStyle] = React.useState< "concise" | "comprehensive" >("concise"); // AI Review hook for the system prompt (Instructions step). The hook is a no-op // when `/api/review-configs/agent-system-prompt` is not configured / disabled — // both the button and panel render null in that case. const review = useAiReview({ target: "agent-system-prompt", content: systemPrompt, context: { name, agent_description: description, extra_context: undefined, }, onApplyFix: setSystemPrompt, }); // Clear the blocking-review banner once the review passes — including a // re-run triggered from the panel (apply-all-fixes → run again), not just a // Next/Save click. React.useEffect(() => { if (review.isPassed) setBlockingMessage(null); }, [review.isPassed]); // Editor resize drag handlers const handleDragStart = React.useCallback( (e: React.MouseEvent) => { e.preventDefault(); dragRef.current = { startY: e.clientY, startHeight: editorHeight }; const handleDragMove = (ev: MouseEvent) => { if (!dragRef.current) return; const delta = ev.clientY - dragRef.current.startY; const newHeight = Math.max( 200, Math.min( window.innerHeight * 0.85, dragRef.current.startHeight + delta, ), ); setEditorHeight(newHeight); }; const handleDragEnd = () => { dragRef.current = null; document.removeEventListener("mousemove", handleDragMove); document.removeEventListener("mouseup", handleDragEnd); document.body.style.cursor = ""; document.body.style.userSelect = ""; }; document.addEventListener("mousemove", handleDragMove); document.addEventListener("mouseup", handleDragEnd); document.body.style.cursor = "row-resize"; document.body.style.userSelect = "none"; }, [editorHeight], ); // CodeMirror extensions for markdown syntax highlighting const { resolvedTheme } = useTheme(); const editorIsLight = isLightColorTheme(resolvedTheme); const [cmExtensions, setCmExtensions] = React.useState([]); React.useEffect(() => { let cancelled = false; Promise.all([ import("@codemirror/lang-markdown"), import("@codemirror/language-data"), import("@codemirror/view"), import("@/lib/codemirror/jinja2-highlight"), import("@/lib/codemirror/markdown-highlight"), ]).then(([mdMod, langDataMod, viewMod, jinja2Mod, mdHighlightMod]) => { if (!cancelled) { setCmExtensions([ mdMod.markdown({ codeLanguages: langDataMod.languages }), viewMod.EditorView.lineWrapping, editorIsLight ? mdHighlightMod.markdownHighlightLight : mdHighlightMod.markdownHighlight, jinja2Mod.jinja2Highlight, ].filter(Boolean)); } }); return () => { cancelled = true; }; }, [editorIsLight]); // ID generation and validation const generatedId = React.useMemo(() => generateSlug(name), [name]); const [existingIds, setExistingIds] = React.useState>(new Set()); // Check if the generated ID clashes with existing agents const idClash = React.useMemo(() => { if (isEditing) return false; // When editing, ID doesn't change if (!generatedId) return false; return existingIds.has(generatedId); }, [isEditing, generatedId, existingIds]); // Fetch existing agent IDs for clash detection React.useEffect(() => { if (isEditing) return; // No need to check when editing async function fetchExistingIds() { try { const response = await fetch("/api/dynamic-agents"); const data = await response.json(); // API returns paginated response: {success, data: {items: [...], ...}} if ( data.success && data.data?.items && Array.isArray(data.data.items) ) { const ids = new Set( data.data.items.map((a: DynamicAgentConfig) => a._id), ); setExistingIds(ids); } } catch (err) { console.error("Failed to fetch existing agent IDs:", err); } } fetchExistingIds(); }, [isEditing]); React.useEffect(() => { if (!modelId || !modelProvider) { setSupportedReasoningEfforts([]); return; } let cancelled = false; setSupportedReasoningEfforts(null); const params = new URLSearchParams({ model_id: modelId, provider: modelProvider, }); fetch(`/api/dynamic-agents/model-capabilities?${params}`) .then((response) => (response.ok ? response.json() : null)) .then((data) => { if (!cancelled) { setSupportedReasoningEfforts(data?.reasoning_efforts ?? []); } }) .catch(() => { if (!cancelled) setSupportedReasoningEfforts([]); }); return () => { cancelled = true; }; }, [modelId, modelProvider]); React.useEffect(() => { let cancelled = false; async function fetchHarnessConfiguration() { try { const catalogResponse = await fetch("/api/harness-engine/harnesses"); const catalog = await catalogResponse.json(); if (!catalogResponse.ok || !catalog.success) { throw new Error(catalog.error || "Harness catalog could not be loaded"); } const descriptors = Array.isArray(catalog.data?.harnesses) ? catalog.data.harnesses as HarnessDescriptor[] : []; if (cancelled) return; setHarnessDescriptors(descriptors); setCatalogRevision(catalog.data?.catalog_revision ?? null); const persistedHarnessId = source?.execution_harness_id; const defaultDescriptor = descriptors.find(item => item.id === (persistedHarnessId || "dynamic_agents")); setHarnessProfileId(defaultDescriptor?.profiles.find(profile => profile.available)?.id ?? ""); if (persistedHarnessId) setHarnessId(persistedHarnessId); if (source?._id && persistedHarnessId && persistedHarnessId !== "dynamic_agents") { const overlayResponse = await fetch( `/api/harness-engine/agents/${encodeURIComponent(source._id)}`, ); const overlay = await overlayResponse.json(); if (!overlayResponse.ok || !overlay.success) { throw new Error(overlay.error || "Saved harness configuration could not be loaded"); } const saved = overlay.data?.version?.blueprint; if (!saved?.harness?.id) { throw new Error("Saved harness configuration is missing"); } if (!cancelled) { setHarnessId(saved.harness.id); setHarnessProfileId(saved.harness.profile_id); setHarnessOptions(saved.harness.options ?? {}); setHarnessRevision(overlay.data.record?.revision ?? null); } } } catch (err) { // Harness Engine is opt-in. Its absence must not affect the existing // Dynamic Agents creation/edit path. console.info("Harness configuration could not be loaded", err); if (!cancelled && source?.execution_harness_id && source.execution_harness_id !== "dynamic_agents") { setHarnessLoadError(getErrorMessage(err, "Saved harness configuration could not be loaded")); } } finally { if (!cancelled) setHarnessLoading(false); } } void fetchHarnessConfiguration(); return () => { cancelled = true; }; }, [source?._id, source?.execution_harness_id]); // Fetch available models on mount React.useEffect(() => { async function fetchModels() { setModelsLoading(true); try { const response = await fetch("/api/dynamic-agents/models"); const data = await response.json(); if (data.success && Array.isArray(data.data)) { setAvailableModels(data.data); if (source?.model?.id) { // Editing or cloning existing agent - verify model exists using both model AND provider // (same model can exist for different providers, e.g., gpt-4o for openai and azure-openai) const existingModel = data.data.find( (m: { model_id: string; provider: string }) => m.model_id === source.model.id && m.provider === source.model.provider, ); if (existingModel) { // Model exists - ensure provider is in sync with config setModelProvider(existingModel.provider); } else { // Model no longer available - reset to first available console.warn( `Agent model "${source.model.id}" no longer available, resetting to default`, ); if (data.data.length > 0) { setModelId(data.data[0].model_id); setModelProvider(data.data[0].provider); } } } else if (data.data.length > 0) { // Creating new agent - default to first model setModelId(data.data[0].model_id); setModelProvider(data.data[0].provider); } } } catch (err) { console.error("Failed to fetch models:", err); } finally { setModelsLoading(false); // Flip the snapshot sentinel after models load. This causes the dirty // tracker to re-snapshot WITH the freshly applied default model, so a // newly opened editor doesn't immediately appear dirty. setModelDefaultsApplied(true); } } fetchModels(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Run once on mount - agent prop is stable // Fetch available teams for team visibility sharing React.useEffect(() => { async function fetchTeams() { try { const response = await fetch("/api/dynamic-agents/teams"); const data = await response.json(); if (data.success && Array.isArray(data.data)) { setAvailableTeams(data.data); } } catch (err) { console.error("Failed to fetch teams:", err); } } fetchTeams(); }, []); // When editing an existing agent, find out if it is the platform default. // If it is, lock the visibility selector so the admin can't accidentally // demote `global → team` from here — the BFF would reject the request // with 409 / AGENT_IS_PLATFORM_DEFAULT anyway, so we surface that // constraint up front. The platform-config endpoint is readable by any // signed-in user (it's how the Slack bot resolves the DM default), so // this works for editors who aren't admins too. const [isPlatformDefault, setIsPlatformDefault] = React.useState(false); React.useEffect(() => { if (!agent?._id) return; let cancelled = false; async function checkDefault() { try { const response = await fetch("/api/admin/platform-config"); const data = await response.json(); if (cancelled) return; if (data.success && data.data?.default_agent_id === agent?._id) { setIsPlatformDefault(true); } } catch { // Non-fatal: the BFF will still enforce the invariant on save. } } checkDefault(); return () => { cancelled = true; }; }, [agent?._id]); // Step wizard state const [requestedStep, setActiveStep] = React.useState(initialStep); const needsOwnerTeam = !isEditing && visibility === "team" && !ownerTeamSlug.trim(); const activeStep = !needsOwnerTeam && steps.some((step) => step.id === requestedStep) ? requestedStep : "basic"; React.useEffect(() => { setActiveStep(initialStep); }, [initialStep]); const selectStep = React.useCallback( (step: StepId) => { if (needsOwnerTeam && step !== "basic") { setActiveStep("basic"); setError("Select an owner team before continuing."); document.getElementById("ownerTeam")?.focus(); return; } setError((previous) => previous === "Select an owner team before continuing." ? null : previous, ); setActiveStep(step); onStepChange?.(step); }, [needsOwnerTeam, onStepChange], ); React.useEffect(() => { // Reject deep links just like clicks, so selecting an owner later does not // resume a step request that was blocked while the owner was missing. if (needsOwnerTeam && requestedStep !== "basic") selectStep(requestedStep); }, [needsOwnerTeam, requestedStep, selectStep]); // Local state for the in-app "you have unsaved changes" confirmation when the // user clicks the back arrow. We don't route this through the global store's // pendingNavigationHref because closing the editor isn't an href navigation — // it's a parent-state flip controlled by the onCancel prop. const [pendingClose, setPendingClose] = React.useState(false); // Snapshot sentinel: flips once after the async models endpoint resolves and // applies a default modelId/modelProvider to a previously empty form. This // ensures the dirty-tracking snapshot is taken AFTER defaults are applied, // preventing a false "dirty" right after model defaults populate. const [modelDefaultsApplied, setModelDefaultsApplied] = React.useState( !!source?.model?.id, ); // Aggregate all editable form fields into a single object so the // dirty-tracking hook can compare current vs initial values. const currentFormValues = React.useMemo( () => ({ name, description, systemPrompt, visibility, sharedWithTeams, ownerTeamSlug, allowedTools, allowedRemoteAgents, remoteAgentTimeouts, builtinTools, subagents, skills, datasourceIds, ragCollectionIds, features, modelId, modelProvider, reasoningEffort, modelStreaming, gradientTheme, harnessId, harnessProfileId, harnessOptions, }), [ name, description, systemPrompt, visibility, sharedWithTeams, ownerTeamSlug, allowedTools, allowedRemoteAgents, remoteAgentTimeouts, builtinTools, subagents, skills, datasourceIds, ragCollectionIds, features, modelId, modelProvider, reasoningEffort, modelStreaming, gradientTheme, harnessId, harnessProfileId, harnessOptions, ], ); // The snapshot key combines the source identity with the model-defaults // sentinel. When either changes, the dirty hook re-snapshots so the form // appears clean. const snapshotIdentity = agent?._id ?? cloneFrom?._id ?? "new"; const snapshotKey = `${snapshotIdentity}|${modelDefaultsApplied ? "1" : "0"}`; const { dirty, resetSnapshot } = useEditorDirtyTracking({ enabled: !readOnly, currentValues: currentFormValues, snapshotKey, }); const currentStepIndex = steps.findIndex((s) => s.id === activeStep); const currentStepConfig = steps.find((s) => s.id === activeStep); const goToPreviousStep = () => { if (currentStepIndex > 0) { selectStep(steps[currentStepIndex - 1].id); } }; const goToNextStep = async () => { // Gate the instructions → tools transition behind a passing AI Review when // the admin has flagged this target as "blocking". `ensurePassedOrRun` is a // no-op when the config is disabled or informational. if (activeStep === "instructions" && review.isBlocking) { const { passed, result } = await review.ensurePassedOrRun(); if (!passed) { const message = buildBlockingMessage( review.config, result, "the comments below", "continuing", ); // The banner below carries the message — visible even when the footer // is below the fold. setBlockingMessage(message); return; } // Review passed — clear any stale blocking banner from a prior attempt. setBlockingMessage(null); } if (currentStepIndex < steps.length - 1) { selectStep(steps[currentStepIndex + 1].id); } }; /** * Call the AI suggest endpoint for a given field. * Accepts an optional instruction string for guidance. */ const handleSuggest = async ( field: "description" | "system_prompt" | "theme", instruction?: string, ) => { if (!name.trim() || !modelId) return; setGeneratingField(field); try { const response = await fetch("/api/dynamic-agents/assistant/suggest", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ field, context: { name, description: description || undefined, system_prompt: systemPrompt || undefined, allowed_tools: supportsTools && Object.keys(allowedTools).length > 0 ? allowedTools : undefined, builtin_tools: supportsBuiltinTools ? builtinTools : undefined, subagents: supportsDelegation && subagents.length > 0 ? subagents.map((s) => ({ agent_id: s.agent_id, name: s.name || s.agent_id, description: s.description, })) : undefined, }, model: { id: modelId, provider: modelProvider, reasoning_effort: reasoningEffort }, ...(instruction ? { instruction } : {}), ...(field === "system_prompt" ? { prompt_style: promptStyle } : {}), }), }); const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to generate suggestion"); } const content = (data.data?.content ?? "").trim(); if (!content) { throw new Error("Empty response from AI"); } switch (field) { case "description": setDescription(content); break; case "system_prompt": setSystemPrompt(content); // Switch to preview tab so user sees the rendered result setPromptTab("preview"); break; case "theme": { // Check for custom theme response: "custom:#hex1,#hex2,#hex3" const customMatch = content.match( /custom:\s*(#[0-9a-fA-F]{3,8})\s*,\s*(#[0-9a-fA-F]{3,8})\s*,\s*(#[0-9a-fA-F]{3,8})/, ); if (customMatch) { setGradientTheme("custom"); setCustomThemeConfig({ gradient_from: customMatch[1], gradient_to: customMatch[2], accent_color: customMatch[3], }); setShowCustomPicker(true); break; } // Try exact match first (after normalization) const normalized = content.toLowerCase().replace(/[^a-z_]/g, ""); const exactMatch = gradientThemes.find((t) => t.id === normalized); if (exactMatch) { setGradientTheme(exactMatch.id); } else { // Fuzzy: find any valid theme ID contained in the response const fuzzyMatch = gradientThemes.find((t) => content.toLowerCase().includes(t.id), ); if (fuzzyMatch) { setGradientTheme(fuzzyMatch.id); } else { console.warn(`AI suggested unknown theme "${content}", ignoring`); toast("Could not determine theme from AI response", "error"); } } break; } } } catch (err) { console.error(`AI suggest (${field}) failed:`, err); toast( getErrorMessage(err, "") || "Failed to generate suggestion", "error", ); } finally { setGeneratingField(null); } }; /** * Combined handler for Step 1: generates both description and theme in parallel. */ const handleSuggestBasicInfo = async (instruction?: string) => { if (!name.trim() || !modelId) return; setShowSuggestBasicInput(false); setSuggestBasicInstruction(""); // If enhancing existing description, pass it as context const existingHint = enhanceExistingBasic && description.trim() ? `The current description is: "${description}". Use it as a starting point and enhance/refine it.` : undefined; const fullInstruction = [existingHint, instruction] .filter(Boolean) .join("\n\n"); setEnhanceExistingBasic(false); // Run both in parallel await Promise.all([ handleSuggest("description", fullInstruction || undefined), handleSuggest("theme", instruction), ]); }; /** * Handle system prompt suggestion via the popover. * If enhanceExisting is checked and content exists, pass it as context. */ const handleSuggestSystemPrompt = (instruction?: string) => { setShowSuggestPromptInput(false); setSuggestPromptInstruction(""); // If user wants to enhance existing content, pass it as context const existingHint = enhanceExisting && systemPrompt.trim() ? `The current system prompt is provided below — use it as a starting point and enhance/refine it based on the user's guidance.\n\n\n${systemPrompt}\n` : undefined; const fullInstruction = [existingHint, instruction] .filter(Boolean) .join("\n\n"); setEnhanceExisting(false); handleSuggest("system_prompt", fullInstruction || undefined); }; const canSuggest = name.trim() && modelId && !generatingField; const isGenerating = !!generatingField; const handleSubmit = async ( e?: React.FormEvent, opts?: { forceConfirmNotMember?: boolean }, ) => { e?.preventDefault(); setLoading(true); setError(null); setTransferNeedsServerConfirm(false); // `setState` is async, so a confirm-and-retry can't rely on the freshly-set // `transferConfirmedNotMember`; the caller passes the value through opts. const confirmNotMember = opts?.forceConfirmNotMember || transferConfirmedNotMember; // Gate save behind a passing AI Review when the admin has flagged this // target as "blocking". `ensurePassedOrRun` is a no-op when the config is // disabled or informational. // Capture the freshly-run review result so the grade we persist below // comes from the run we just awaited — `review.result` state lags by a // render after an inline `ensurePassedOrRun`, so reading it here would // stamp a stale (often null) grade onto the save. let reviewResult = review.result; if (review.isBlocking) { const { passed, result } = await review.ensurePassedOrRun(); reviewResult = result; if (!passed) { const message = buildBlockingMessage( review.config, result, "the Instructions step", "saving", ); // Return to the reviewed content so the user can see and act on the // inline comments; the banner below carries the message. selectStep("instructions"); setBlockingMessage(message); setLoading(false); return; } } // Validate required fields if (supportsConfiguredModel && (!modelId || !modelProvider)) { setError("Model selection is required"); setLoading(false); return; } if (!isEditing && visibility === "team" && !ownerTeamSlug) { setError("Owner team is required"); setLoading(false); return; } // Validate ID for new agents if (!isEditing) { if (!generatedId) { setError("Agent name is required to generate ID"); setLoading(false); return; } if (idClash) { setError( `Agent ID "${generatedId}" already exists. Please use a different name.`, ); setLoading(false); return; } } try { if (builderSchemaError) throw new Error(builderSchemaError); if (requiresHarnessConfirmation && !harnessSwitchConfirmed) throw new Error("Confirm that the new harness applies to new conversations"); // Build UI config if gradient theme is set const uiConfig: AgentUIConfig | undefined = gradientTheme ? { gradient_theme: gradientTheme, ...(gradientTheme === "custom" ? { custom_theme_config: customThemeConfig } : {}), } : undefined; // Stamp the latest in-memory review verdict onto the saved row so the // list view can show a grade badge without re-running the LLM. Only // emit the field when we actually have a result this session — never // overwrite a prior `last_review` with null. const lastReview = buildLastReview(reviewResult, "agent-system-prompt"); // Restricted: send the real (possibly empty) arrays. Unrestricted with // nothing to clear: omit both fields entirely. Unrestricted after // having been restricted: explicitly clear both back to unset. const knowledgeFields = !supportsKnowledge ? {} : restrictKnowledge ? { datasource_ids: datasourceIds, rag_collection_ids: ragCollectionIds } : hadExplicitKnowledgeScope ? { datasource_ids: null, rag_collection_ids: null } : {}; if (harnessId !== "dynamic_agents" && !harnessProfileId) { throw new Error("Select an operator profile for the execution harness before saving"); } if (!isDeepAgents && (harnessLoading || harnessLoadError || selectedHarness?.availability !== "available" || selectedHarness.certification === "blocked")) { throw new Error(harnessLoadError || "The selected harness is unavailable"); } // Keep saved Deep Agents settings intact while another harness is active. // Only supported settings are published into its execution blueprint. const runtimeFields = { ...(supportsTools && { allowed_tools: allowedTools }), ...(supportsRemoteAgents && { allowed_remote_agents: allowedRemoteAgents, remote_agent_timeouts: Object.fromEntries(Object.entries(remoteAgentTimeouts).filter(([id]) => allowedRemoteAgents.includes(id))) }), ...(supportsBuiltinTools && { builtin_tools: builtinTools }), ...(supportsDelegation && { subagents: subagents.length > 0 ? subagents : undefined }), ...(supportsSkills && { skills }), ...knowledgeFields, ...(supportsConfiguredModel && { model: { id: modelId, provider: modelProvider, reasoning_effort: reasoningEffort, streaming: modelStreaming } }), ...(supportsMiddleware && { features }), ...(supportsApprovals && { interrupt_on: interruptOn }), }; const targetAgentId = isEditing ? agent._id : generatedId; let preparedHarnessSave: { blueprint: AgentBlueprint; catalog_revision: string; config_fingerprint: string; } | null = null; // Validate the independent blueprint before mutating the legacy agent // document. This keeps an invalid provider configuration from changing // an existing Dynamic Agent or creating a half-configured new one. if (harnessId !== "dynamic_agents") { const toolBindings = Object.entries(supportsTools ? allowedTools : {}).flatMap( ([serverId, tools]) => { if (tools === true) { throw new Error("Select individual tools for this harness instead of all tools on a server"); } return Array.isArray(tools) ? tools.map((toolName) => ({ tool_id: `${serverId}.${toolName}` })) : []; }, ); const blueprint: AgentBlueprint = { id: targetAgentId, name, description, harness: { id: harnessId, profile_id: harnessProfileId, options: harnessOptions, }, prompt: { system: systemPrompt, variables: {}, context_sources: [] }, model: supportsConfiguredModel ? { policy: "configured", id: modelId, provider: modelProvider } : { policy: "harness_default" }, tools: { bindings: toolBindings, approval_policy: supportsTools && !supportsApprovals ? "never" : "sensitive_only" }, thread: { persistence: "durable" }, memory: { enabled: false }, workspace: { persistence: "none" }, streaming: { protocol: "canonical", replay: "required" }, delegation: { agents: supportsDelegation ? subagents.map(child => child.agent_id) : [], max_depth: supportsDelegation ? 1 : 0, max_parallel: 1, }, }; const validationResponse = await fetch( "/api/harness-engine/agent-drafts/validate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ blueprint, catalog_revision: catalogRevision, }), }, ); const validation = await validationResponse.json(); if (!validationResponse.ok || !validation.data?.valid) { const reason = validation.data?.issues ?.map((issue: { message: string }) => issue.message) .join("; "); throw new Error( `Harness blueprint is invalid; the agent was not saved: ${reason || validation.error || "unknown error"}`, ); } preparedHarnessSave = { blueprint: validation.data.normalized_blueprint, catalog_revision: validation.data.catalog_revision, config_fingerprint: validation.data.config_fingerprint, }; } if (isEditing) { // Update existing agent const updateData: DynamicAgentConfigUpdate & { owner_team_slug?: string; confirm_not_member?: boolean; } = { execution_harness_id: harnessId, ...(preparedHarnessSave && { harness_save: { ...preparedHarnessSave, expected_revision: harnessRevision } }), name, description: description || undefined, system_prompt: systemPrompt, visibility, shared_with_teams: visibility === "team" ? sharedWithTeams : undefined, ...runtimeFields, ui: uiConfig, // Ownership transfer (US3): only send owner_team_slug when the user // changed the owner picker, so a normal edit never trips the route's // transfer guard. ...(transferRequested ? { owner_team_slug: ownerTeamSlug, confirm_not_member: confirmNotMember, } : {}), ...(lastReview ? { last_review: lastReview } : {}), }; const response = await fetch(`/api/dynamic-agents?id=${agent._id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(updateData), }); const data = await response.json(); if (!data.success) { // The destination team is one the caller can pick in the UI but is // not an OpenFGA member of (e.g. org admin). Offer an explicit // confirm-and-retry instead of a dead-end error. if (data.code === "TRANSFER_NOT_MEMBER_UNCONFIRMED") { const err = new Error(data.error || "Confirmation required"); (err as { code?: string }).code = "TRANSFER_NOT_MEMBER_UNCONFIRMED"; throw err; } throw new Error(data.error || "Failed to update agent"); } } else { // Create new agent const createData: DynamicAgentConfigCreate = { id: generatedId, execution_harness_id: harnessId, ...(preparedHarnessSave && { harness_save: { ...preparedHarnessSave, expected_revision: harnessRevision } }), name, description: description || undefined, system_prompt: systemPrompt, visibility, owner_team_slug: ownerTeamSlug, shared_with_teams: visibility === "team" ? sharedWithTeams : undefined, ...runtimeFields, ui: uiConfig, ...(lastReview ? { last_review: lastReview } : {}), }; const response = await fetch("/api/dynamic-agents", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(createData), }); const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to create agent"); } } // Clear unsaved-changes state BEFORE calling onSave(): the parent will // unmount this editor in response to onSave, and we want the global flag // to be false by the time any header/tab guards re-evaluate. resetSnapshot // also re-points the snapshot at the just-saved values so a follow-up // dirty check (in the unlikely case the editor stays mounted) is correct. resetSnapshot(); useUnsavedChangesStore.getState().setUnsaved(false); onSave(); } catch (err) { if ( typeof err === "object" && err !== null && "code" in err && err.code === "TRANSFER_NOT_MEMBER_UNCONFIRMED" ) { setTransferNeedsServerConfirm(true); setError( 'You are not a member of the destination team. Click "Confirm Transfer" to transfer ownership anyway.', ); } else { setError(getErrorMessage(err, "") || "An error occurred"); } } finally { setLoading(false); } }; // Each entry describes one reason the Create Agent / Save Changes button is // disabled. We render `blockers[0]` next to the button so the user always // sees WHY they can't submit and on which step to fix it — previously the // button just went `disabled` with no explanation, which the user reported // as confusing (especially the Owner Team case, where the picker sits on // the first wizard step but the button lives below step 5's content). // // assisted-by Cursor claude-opus-4-7 const ownerTeamMissing = !isEditing && visibility === "team" && !ownerTeamSlug; const blockers: { field: string; label: string; step: StepId }[] = React.useMemo(() => { const list: { field: string; label: string; step: StepId }[] = []; if (!name.trim()) { list.push({ field: "name", label: "Agent name", step: "basic" }); } if (supportsConfiguredModel && availableModels.length === 0) { // Distinct from "model not picked" — the user can't pick anything // because nothing is configured. Surfacing this separately tells the // operator the problem is upstream (no providers configured). list.push({ field: "modelAvailability", label: "At least one model provider must be configured", step: "basic", }); } else if (supportsConfiguredModel && (!modelId || !modelProvider)) { list.push({ field: "model", label: "Model", step: "basic" }); } if (!isDeepAgents) { if (harnessLoading) { list.push({ field: "harnessLoading", label: "Load the harness configuration", step: "basic" }); } else if (harnessLoadError || selectedHarness?.availability !== "available" || selectedHarness.certification === "blocked") { list.push({ field: "harnessAvailability", label: "An available execution harness", step: "basic" }); } else if (!selectedHarness.profiles.some((profile) => profile.id === harnessProfileId && profile.available)) { list.push({ field: "harnessProfile", label: "An available operator profile", step: "basic" }); } } if (ownerTeamMissing) { list.push({ field: "ownerTeam", label: "Owner Team", step: "basic" }); } if (!systemPrompt.trim()) { list.push({ field: "systemPrompt", label: "Instructions (system prompt)", step: "instructions", }); } // Restrict was just turned on (it wasn't already an explicit scope // when this editor opened) and nothing has been picked yet - saving // now would send explicit empty arrays, a deliberate opt-out that // disables this agent's RAG tools entirely, not "unrestricted" // (that's what leaving Restrict off does). Block the save instead of // silently locking the agent out of every datasource. An agent that // already had an explicit scope may still be intentionally cleared // to opt out - only gate the "just enabled, nothing picked" case. if ( supportsKnowledge && restrictKnowledge && !hadExplicitKnowledgeScope && datasourceIds.length === 0 && ragCollectionIds.length === 0 ) { list.push({ field: "knowledgeScope", label: "Pick at least one collection or datasource, or turn off Restrict", step: "knowledge", }); } return list; }, [ name, systemPrompt, modelId, modelProvider, availableModels.length, isDeepAgents, supportsConfiguredModel, supportsKnowledge, harnessLoading, harnessLoadError, selectedHarness, harnessProfileId, ownerTeamMissing, restrictKnowledge, hadExplicitKnowledgeScope, datasourceIds, ragCollectionIds, ]); const isValid = blockers.length === 0; const firstBlocker = blockers[0]; const blockerStepLabel = firstBlocker ? (steps.find((s) => s.id === firstBlocker.step)?.label ?? firstBlocker.step) : null; // Back-button click handler. When the form has unsaved changes, we surface // an in-app confirmation modal instead of silently discarding work. The // dialog itself is rendered at the bottom of this component. const handleBackClick = () => { if (dirty) { setPendingClose(true); } else { onCancel(); } }; const handleConfirmDiscard = () => { setPendingClose(false); // Belt-and-suspenders: clear the global flag here AND let the unmount // cleanup in useEditorDirtyTracking do the same. Either alone is enough. useUnsavedChangesStore.getState().setUnsaved(false); onCancel(); }; const handleCancelDiscard = () => { setPendingClose(false); }; return (
{readOnly ? `View Agent - ${agent?.name}` : isEditing ? `Edit Agent - ${agent?.name}` : isCloning ? "Clone Agent" : "Create Agent"} {readOnly ? readOnlyReason === "permissions" ? "You do not have permission to edit this agent" : "This agent is managed by configuration and cannot be edited" : isEditing ? "Update the agent configuration" : isCloning ? `Creating a copy of "${cloneFrom?.name}"` : "Configure a new custom AI agent"}
{/* Step Indicator + title inline */}

Step {currentStepIndex + 1}: {currentStepConfig?.label}

{currentStepConfig?.hint}

{/* Basic Info Step */} {activeStep === "basic" && (
{selectedHarness && (
An operator profile is an administrator-managed execution configuration. It selects approved provider resources, security settings, and limits without exposing credentials or infrastructure identifiers to agent authors.

Profiles are managed by your administrator and define the execution model, security settings, and limits.

)} {["claude_code_acp", "claude_code_cli_acp"].includes(harnessId) && selectedHarness ? ( ) : isDeepAgents ? (

Configure tools, knowledge, and skills for LangChain Deep Agents. Subagents, approvals, and middleware are under Advanced.

) : (

The operator profile selects the execution model and runtime settings.

{!supportsTools &&

Tool configuration is unavailable for this harness.

}

Knowledge, skills, subagents, approval rules, and middleware are not configurable for this harness.

{isEditing &&

Saved Deep Agents settings are retained and apply when Deep Agents is selected.

}
)} {requiresHarnessConfirmation && } {!isDeepAgents && harnessLoadError && (

{harnessLoadError}. Reopen the editor to retry.

)}
setName(e.target.value)} disabled={loading || !!readOnly} /> {/* Show generated ID */} {isEditing ? (

id:{" "} {agent._id}

) : generatedId ? (

id:{" "} {generatedId} {idClash && ( - already exists, choose a different name )}

) : null}
{/* LLM Model - right after name so AI Suggest buttons can use it */} {supportsConfiguredModel ? ( <>
{ setModelId(selectedId); setModelProvider(selectedProvider); }} loading={modelsLoading} disabled={ loading || !!readOnly } triggerClassName="font-medium" /> {!modelsLoading && availableModels.length === 0 ? (

No LLM models available. Please check your deployment configuration.

) : (

The language model that powers this agent's reasoning.

)}
{supportedReasoningEfforts !== null && supportedReasoningEfforts.length === 0 ? (

This model does not advertise configurable reasoning. The saved value is ignored, and the provider uses its own behavior.

) : supportedReasoningEfforts !== null ? (

New conversations start at this level. Each chat can override it.

) : null}
{isDeepAgents && (

Disable if your model provider or proxy does not support streaming. Saved changes apply to the next chat turn. Responses already running are unchanged.

)} ) : ( { setModelId(selectedId); setModelProvider(selectedProvider); }} loading={modelsLoading} disabled={loading || !!readOnly} />

Used only by AI Suggest. The agent runs with the model configured by its operator profile.

)}
{showSuggestBasicInput && (

Generates a description and picks a matching theme.

setSuggestBasicInstruction(e.target.value) } onKeyDown={(e) => { if (e.key === "Enter") handleSuggestBasicInfo( suggestBasicInstruction.trim() || undefined, ); if (e.key === "Escape") setShowSuggestBasicInput(false); }} placeholder="e.g., Summarizes documents and answers questions..." className="h-8 text-sm mb-2" /> {description.trim() && ( )}
)}