From d991c47018aa2ef7317d4ce654c585a1f00e83c2 Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Tue, 2 Jun 2026 14:57:30 -0700
Subject: [PATCH] fix(ui/agents): make A2A skill tags enterable and validated
 (#29512)

* fix(ui/agents): make A2A skill tags enterable and validated

Skill tags were marked required but rendered as a comma-split text input
that couldn't surface validation and let empty values save. Switch tags
and examples to Select tag inputs, drop the misleading "Required" skills
label (the API allows zero skills), and validate the full configure step
so an added skill must be complete before advancing.

Resolves LIT-3153

* fix(ui/agents): allow Enter to create skill tags/examples

Drop open={false} from the tags and examples Select inputs. With the
dropdown forced closed, AntD suppresses the "create from input" option,
so pressing Enter (as the placeholder instructs) did nothing. Matches the
existing extra_headers Select.
---
 .../src/components/agents/add_agent_form.tsx  |  2 +-
 .../src/components/agents/agent_config.ts     |  8 ++++----
 .../components/agents/agent_form_fields.tsx   | 20 ++++++++++++-------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx b/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
index 3929a9e183..eee19171fb 100644
--- a/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
+++ b/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
@@ -197,7 +197,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
   const handleNext = async () => {
     try {
       if (currentStep === 0) {
-        await form.validateFields(["agent_name"]);
+        await form.validateFields();
         const agentName = form.getFieldValue("agent_name");
         if (agentName && !newKeyName) {
           setNewKeyName(`${agentName}-key`);
diff --git a/ui/litellm-dashboard/src/components/agents/agent_config.ts b/ui/litellm-dashboard/src/components/agents/agent_config.ts
index e87b191b19..14b6729bf9 100644
--- a/ui/litellm-dashboard/src/components/agents/agent_config.ts
+++ b/ui/litellm-dashboard/src/components/agents/agent_config.ts
@@ -212,14 +212,14 @@ export const SKILL_FIELD_CONFIG = {
   },
   tags: {
     name: "tags",
-    label: "Tags (comma-separated)",
+    label: "Tags",
     required: true,
-    placeholder: "e.g., hello world, greeting",
+    placeholder: "Type a tag and press Enter",
   },
   examples: {
     name: "examples",
-    label: "Examples (comma-separated)",
-    placeholder: "e.g., hi, hello world",
+    label: "Examples",
+    placeholder: "Type an example and press Enter",
   },
 };
 
diff --git a/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx b/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
index 42e55b8c56..27b93838ce 100644
--- a/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
+++ b/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
@@ -56,7 +56,7 @@ const AgentFormFields: React.FC<AgentFormFieldsProps> = ({ showAgentName = true,
 
         {/* Skills */}
         {shouldShow(AGENT_FORM_CONFIG.skills.key) && (
-        <Panel header={`${AGENT_FORM_CONFIG.skills.title} (Required)`} key={AGENT_FORM_CONFIG.skills.key}>
+        <Panel header={`${AGENT_FORM_CONFIG.skills.title}`} key={AGENT_FORM_CONFIG.skills.key}>
           <Form.List name="skills">
             {(fields, { add, remove }) => (
               <>
@@ -94,20 +94,26 @@ const AgentFormFields: React.FC<AgentFormFieldsProps> = ({ showAgentName = true,
                       label={SKILL_FIELD_CONFIG.tags.label}
                       name={[field.name, 'tags']}
                       rules={[{ required: SKILL_FIELD_CONFIG.tags.required, message: 'Required' }]}
-                      getValueFromEvent={(e) => e.target.value.split(',').map((s: string) => s.trim())}
-                      getValueProps={(value) => ({ value: Array.isArray(value) ? value.join(', ') : value })}
                     >
-                      <Input placeholder={SKILL_FIELD_CONFIG.tags.placeholder} />
+                      <Select
+                        mode="tags"
+                        style={{ width: '100%' }}
+                        tokenSeparators={[',']}
+                        placeholder={SKILL_FIELD_CONFIG.tags.placeholder}
+                      />
                     </Form.Item>
                     
                     <Form.Item
                       {...field}
                       label={SKILL_FIELD_CONFIG.examples.label}
                       name={[field.name, 'examples']}
-                      getValueFromEvent={(e) => e.target.value.split(',').map((s: string) => s.trim()).filter((s: string) => s)}
-                      getValueProps={(value) => ({ value: Array.isArray(value) ? value.join(', ') : '' })}
                     >
-                      <Input placeholder={SKILL_FIELD_CONFIG.examples.placeholder} />
+                      <Select
+                        mode="tags"
+                        style={{ width: '100%' }}
+                        tokenSeparators={[',']}
+                        placeholder={SKILL_FIELD_CONFIG.examples.placeholder}
+                      />
                     </Form.Item>
                     
                     <AntButton