From cb74c080fb61e97f4f6ea924e9d1e3d7eaaf9ff2 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 10:35:32 +0200
Subject: [PATCH 1/9] Add create agent form

---
 .../pages/agents/{ => index}/ai_agents.vue    | 14 ++--
 .../agents/index/components/ai_agents_cta.vue | 18 +++++
 .../pages/agents/new/ai_agents_new.vue        | 79 +++++++++++++++++++
 .../ai/duo_agents_platform/router/index.js    | 14 +++-
 4 files changed, 117 insertions(+), 8 deletions(-)
 rename ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/{ => index}/ai_agents.vue (96%)
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/ai_agents.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
similarity index 96%
rename from ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/ai_agents.vue
rename to ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
index 41d6ec8f2c5351..3c937d79c68c91 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/ai_agents.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
@@ -21,10 +21,12 @@ import {
   AI_CATALOG_AGENTS_ROUTE,
   AI_CATALOG_SHOW_QUERY_PARAM,
 } from 'ee/ai/catalog/router/constants';
+import AiAgentsCta from './components/ai_agents_cta.vue';
 
 export default {
   name: 'AiAgents',
   components: {
+    AiAgentsCta,
     GlButton,
     GlExperimentBadge,
     PageHeading,
@@ -211,12 +213,12 @@ export default {
 
 <template>
   <div>
-    <page-heading>
-      <template #heading>
-        <div class="gl-flex">
-          <span>{{ s__('AICatalog|Agents') }}</span>
-          <gl-experiment-badge class="gl-self-center" />
-        </div>
+    <page-heading :heading="s__('AICatalog|Agents')">
+      <template #description>
+        {{ s__('DuoAgentsPlatform|Manage automated flows within your project.') }}
+      </template>
+      <template #actions>
+        <ai-agents-cta />
       </template>
     </page-heading>
 
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue
new file mode 100644
index 00000000000000..7c866a02e3c24e
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue
@@ -0,0 +1,18 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { AI_CATALOG_AGENTS_NEW_ROUTE } from 'ee/ai/catalog/router/constants';
+
+export default {
+  name: 'AiAgentsCta',
+  components: {
+    GlButton,
+  },
+  newPage: AI_CATALOG_AGENTS_NEW_ROUTE,
+};
+</script>
+
+<template>
+  <gl-button variant="confirm" :to="{ name: $options.newPage }">
+    {{ s__('AICatalog|Create agent') }}
+  </gl-button>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
new file mode 100644
index 00000000000000..633d6f3a6f7c34
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -0,0 +1,79 @@
+<script>
+import { s__ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
+import AiCatalogAgentForm from 'ee/ai/catalog/components/ai_catalog_agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsNew',
+  components: {
+    AiCatalogAgentForm,
+    PageHeading,
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  methods: {
+    async handleSubmit(input) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: createAiCatalogAgent,
+          variables: {
+            input,
+          },
+        });
+
+        if (data) {
+          const { errors } = data.aiCatalogAgentCreate;
+          if (errors.length > 0) {
+            this.errors = errors;
+            return;
+          }
+
+          const newAgentId = getIdFromGraphQLId(data.aiCatalogAgentCreate.item.id);
+          this.$toast.show(s__('AICatalog|Agent created successfully.'));
+        }
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <page-heading :heading="s__('AICatalog|New agent')">
+      <template #description>
+        <div class="gl-border-b gl-pb-3">
+          {{
+            s__(
+              'AICatalog|AI agents complete specialized tasks. They become active when included in a Flow.',
+            )
+          }}
+        </div>
+      </template>
+    </page-heading>
+
+    <ai-catalog-agent-form
+      mode="create"
+      :is-loading="isSubmitting"
+      :errors="errors"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js b/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
index 4fa4f0c3ea7a14..d8914addd2c36d 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import { s__ } from '~/locale';
 import {
   AI_CATALOG_AGENTS_ROUTE,
+  AI_CATALOG_AGENTS_NEW_ROUTE,
   AI_CATALOG_FLOWS_ROUTE,
   AI_CATALOG_FLOWS_EDIT_ROUTE,
 } from 'ee/ai/catalog/router/constants';
@@ -12,7 +13,8 @@ import AgentsPlatformNew from '../pages/new/duo_agents_platform_new.vue';
 import FlowTriggersIndex from '../pages/flow_triggers/index/flow_triggers_index.vue';
 import FlowTriggersNew from '../pages/flow_triggers/flow_triggers_new.vue';
 import FlowTriggersEdit from '../pages/flow_triggers/flow_triggers_edit.vue';
-import AiAgents from '../pages/agents/ai_agents.vue';
+import AiAgentsIndex from '../pages/agents/index/ai_agents.vue';
+import AiAgentsNew from '../pages/agents/new/ai_agents_new.vue';
 import AiFlows from '../pages/flows/ai_flows.vue';
 import AiFlowsEdit from '../pages/flows/ai_flows_edit.vue';
 import {
@@ -116,7 +118,15 @@ export const createRouter = (base, namespace) => {
           {
             name: AI_CATALOG_AGENTS_ROUTE,
             path: '',
-            component: AiAgents,
+            component: AiAgentsIndex,
+          },
+          {
+            name: AI_CATALOG_AGENTS_NEW_ROUTE,
+            path: 'new',
+            component: AiAgentsNew,
+            meta: {
+              text: s__('AICatalog|New agent'),
+            },
           },
         ],
       },
-- 
GitLab


From 99845b4317bf99467a78996afb785db5b02375d1 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 12:47:38 +0200
Subject: [PATCH 2/9] Preselect project id

---
 .../components/ai_catalog_agent_form.vue      | 34 +++++++++++--------
 .../pages/agents/index/ai_agents.vue          |  8 +++--
 .../agents/index/components/ai_agents_cta.vue | 18 ----------
 .../pages/agents/new/ai_agents_new.vue        |  7 ++--
 4 files changed, 30 insertions(+), 37 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue

diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
index cc97c9050bb801..bcf057fba45b3b 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
@@ -59,6 +59,11 @@ export default {
       type: Array,
       required: true,
     },
+    showProjectField: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     initialValues: {
       type: Object,
       required: false,
@@ -106,21 +111,22 @@ export default {
       return this.isEditMode ? s__('AICatalog|Save changes') : s__('AICatalog|Create agent');
     },
     fields() {
-      const projectIdField = this.isEditMode
-        ? {}
-        : {
-            projectId: {
-              label: s__('AICatalog|Project'),
-              validators: createFieldValidators({
-                requiredLabel: s__('AICatalog|Project is required.'),
-              }),
-              groupAttrs: {
-                labelDescription: s__(
-                  'AICatalog|Select a project for your AI agent to be associated with.',
-                ),
+      const projectIdField =
+        this.isEditMode || !this.showProjectField
+          ? {}
+          : {
+              projectId: {
+                label: s__('AICatalog|Project'),
+                validators: createFieldValidators({
+                  requiredLabel: s__('AICatalog|Project is required.'),
+                }),
+                groupAttrs: {
+                  labelDescription: s__(
+                    'AICatalog|Select a project for your AI agent to be associated with.',
+                  ),
+                },
               },
-            },
-          };
+            };
       const toolsField = this.isToolsAvailable
         ? {
             tools: {
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
index 3c937d79c68c91..f0bf63289805ee 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
@@ -20,13 +20,12 @@ import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
 import {
   AI_CATALOG_AGENTS_ROUTE,
   AI_CATALOG_SHOW_QUERY_PARAM,
+  AI_CATALOG_AGENTS_NEW_ROUTE,
 } from 'ee/ai/catalog/router/constants';
-import AiAgentsCta from './components/ai_agents_cta.vue';
 
 export default {
   name: 'AiAgents',
   components: {
-    AiAgentsCta,
     GlButton,
     GlExperimentBadge,
     PageHeading,
@@ -208,6 +207,7 @@ export default {
     },
   },
   EMPTY_SVG_URL,
+  AI_CATALOG_AGENTS_NEW_ROUTE,
 };
 </script>
 
@@ -218,7 +218,9 @@ export default {
         {{ s__('DuoAgentsPlatform|Manage automated flows within your project.') }}
       </template>
       <template #actions>
-        <ai-agents-cta />
+        <gl-button variant="confirm" :to="{ name: $options.AI_CATALOG_AGENTS_NEW_ROUTE }">
+          {{ s__('AICatalog|Create agent') }}
+        </gl-button>
       </template>
     </page-heading>
 
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue
deleted file mode 100644
index 7c866a02e3c24e..00000000000000
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/components/ai_agents_cta.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-import { GlButton } from '@gitlab/ui';
-import { AI_CATALOG_AGENTS_NEW_ROUTE } from 'ee/ai/catalog/router/constants';
-
-export default {
-  name: 'AiAgentsCta',
-  components: {
-    GlButton,
-  },
-  newPage: AI_CATALOG_AGENTS_NEW_ROUTE,
-};
-</script>
-
-<template>
-  <gl-button variant="confirm" :to="{ name: $options.newPage }">
-    {{ s__('AICatalog|Create agent') }}
-  </gl-button>
-</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
index 633d6f3a6f7c34..272f5219299a9b 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -12,6 +12,7 @@ export default {
     AiCatalogAgentForm,
     PageHeading,
   },
+  inject: ['projectId'],
   data() {
     return {
       errors: [],
@@ -26,7 +27,7 @@ export default {
         const { data } = await this.$apollo.mutate({
           mutation: createAiCatalogAgent,
           variables: {
-            input,
+            input: { ...input, projectId: this.projectId },
           },
         });
 
@@ -38,7 +39,8 @@ export default {
           }
 
           const newAgentId = getIdFromGraphQLId(data.aiCatalogAgentCreate.item.id);
-          this.$toast.show(s__('AICatalog|Agent created successfully.'));
+          this.$toast.show(s__('AICatalog|Agent created successfully, adding to project...'));
+          debugger;
         }
       } catch (error) {
         this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
@@ -70,6 +72,7 @@ export default {
 
     <ai-catalog-agent-form
       mode="create"
+      :show-project-field="false"
       :is-loading="isSubmitting"
       :errors="errors"
       @dismiss-errors="resetErrorMessages"
-- 
GitLab


From 2a5d265b1cc35c919f6aa3abd91380e2ec5cac24 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 13:14:59 +0200
Subject: [PATCH 3/9] Create agent and item consumer in one run

---
 .../pages/agents/new/ai_agents_new.vue        | 59 +++++++++++++------
 locale/gitlab.pot                             | 12 ++++
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
index 272f5219299a9b..f72d24f54ceb6e 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -1,9 +1,11 @@
 <script>
 import { s__ } from '~/locale';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
+import createAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
 import AiCatalogAgentForm from 'ee/ai/catalog/components/ai_catalog_agent_form.vue';
 
 export default {
@@ -19,29 +21,56 @@ export default {
       isSubmitting: false,
     };
   },
+  computed: {
+    graphQlProjectId() {
+      return convertToGraphQLId(TYPENAME_PROJECT, this.projectId);
+    },
+  },
   methods: {
     async handleSubmit(input) {
       this.isSubmitting = true;
       this.resetErrorMessages();
       try {
-        const { data } = await this.$apollo.mutate({
+        const { data: createAgentData } = await this.$apollo.mutate({
           mutation: createAiCatalogAgent,
           variables: {
-            input: { ...input, projectId: this.projectId },
+            input: { ...input, projectId: this.graphQlProjectId },
           },
         });
 
-        if (data) {
-          const { errors } = data.aiCatalogAgentCreate;
-          if (errors.length > 0) {
-            this.errors = errors;
-            return;
-          }
+        if (!createAgentData) {
+          return;
+        }
 
-          const newAgentId = getIdFromGraphQLId(data.aiCatalogAgentCreate.item.id);
-          this.$toast.show(s__('AICatalog|Agent created successfully, adding to project...'));
-          debugger;
+        if (createAgentData.aiCatalogAgentCreate.errors.length > 0) {
+          this.errors = createAgentData.aiCatalogAgentCreate.errors;
+          return;
         }
+
+        this.$toast.show(s__('AICatalog|Agent created successfully, adding to project...'));
+
+        const { data: createItemConsumerData } = await this.$apollo.mutate({
+          mutation: createAiCatalogItemConsumer,
+          variables: {
+            input: {
+              itemId: createAgentData.aiCatalogAgentCreate.item.id,
+              target: {
+                projectId: this.graphQlProjectId,
+              },
+            },
+          },
+        });
+
+        if (!createItemConsumerData) {
+          return;
+        }
+
+        if (createItemConsumerData.aiCatalogItemConsumerCreate.errors.length > 0) {
+          this.errors = createItemConsumerData.aiCatalogItemConsumerCreate.errors;
+          return;
+        }
+
+        this.$toast.show(s__('AICatalog|Agent added successfully.'));
       } catch (error) {
         this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
         Sentry.captureException(error);
@@ -61,11 +90,7 @@ export default {
     <page-heading :heading="s__('AICatalog|New agent')">
       <template #description>
         <div class="gl-border-b gl-pb-3">
-          {{
-            s__(
-              'AICatalog|AI agents complete specialized tasks. They become active when included in a Flow.',
-            )
-          }}
+          {{ s__('AICatalog|AI agents complete specialized tasks.') }}
         </div>
       </template>
     </page-heading>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 45945203286d81..55aeb1d74ab8b2 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2462,6 +2462,9 @@ msgstr ""
 msgid "AICatalog|AI Catalog"
 msgstr ""
 
+msgid "AICatalog|AI agents complete specialized tasks."
+msgstr ""
+
 msgid "AICatalog|Add this %{itemType} to a project"
 msgstr ""
 
@@ -2471,9 +2474,15 @@ msgstr ""
 msgid "AICatalog|Agent added successfully to %{name}."
 msgstr ""
 
+msgid "AICatalog|Agent added successfully."
+msgstr ""
+
 msgid "AICatalog|Agent could not be added: %{agentName}"
 msgstr ""
 
+msgid "AICatalog|Agent created successfully, adding to project..."
+msgstr ""
+
 msgid "AICatalog|Agent created successfully."
 msgstr ""
 
@@ -2756,6 +2765,9 @@ msgstr ""
 msgid "AICatalog|The agent could not be added to the project. Check that the project meets the %{link_start}prerequisites%{link_end} and try again."
 msgstr ""
 
+msgid "AICatalog|The agent could not be added. Try again."
+msgstr ""
+
 msgid "AICatalog|The agent could not be updated. Try again."
 msgstr ""
 
-- 
GitLab


From af6ef66b1c2d9edab5e53e97235c418b6e6146c4 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 14:38:49 +0200
Subject: [PATCH 4/9] Duplicate agent_form to remove dependencies

---
 .../pages/agents/components/agent_form.vue    | 360 ++++++++++++++++++
 .../pages/agents/new/ai_agents_new.vue        |   2 +-
 2 files changed, 361 insertions(+), 1 deletion(-)
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
new file mode 100644
index 00000000000000..6bfd3d97b1feb1
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -0,0 +1,360 @@
+<script>
+import { uniqueId } from 'lodash';
+import { GlButton, GlForm, GlFormFields, GlFormTextarea, GlTokenSelector } from '@gitlab/ui';
+import {
+  VISIBILITY_LEVEL_PUBLIC_STRING,
+  VISIBILITY_LEVEL_PRIVATE_STRING,
+} from '~/visibility_level/constants';
+import {
+  MAX_LENGTH_NAME,
+  MAX_LENGTH_DESCRIPTION,
+  MAX_LENGTH_PROMPT,
+  VISIBILITY_LEVEL_PRIVATE,
+  VISIBILITY_LEVEL_PUBLIC,
+  AGENT_VISIBILITY_LEVEL_DESCRIPTIONS,
+} from 'ee/ai/catalog/constants';
+import { __, s__ } from '~/locale';
+import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { AI_CATALOG_AGENTS_ROUTE } from 'ee/ai/catalog/router/constants';
+import { createFieldValidators } from 'ee/ai/catalog/utils';
+import aiCatalogBuiltInToolsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_built_in_tools.query.graphql';
+import AiCatalogFormButtons from 'ee/ai/catalog/components/ai_catalog_form_buttons.vue';
+import FormProjectDropdown from 'ee/ai/catalog/components/form_project_dropdown.vue';
+import VisibilityLevelRadioGroup from 'ee/ai/catalog/components/visibility_level_radio_group.vue';
+
+export default {
+  components: {
+    ErrorsAlert,
+    AiCatalogFormButtons,
+    FormProjectDropdown,
+    GlButton,
+    GlForm,
+    GlFormFields,
+    GlFormTextarea,
+    GlTokenSelector,
+    VisibilityLevelRadioGroup,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  apollo: {
+    availableTools: {
+      query: aiCatalogBuiltInToolsQuery,
+      update: (data) => data.aiCatalogBuiltInTools.nodes.map((t) => ({ id: t.id, name: t.title })),
+      skip() {
+        return !this.isToolsAvailable;
+      },
+    },
+  },
+  props: {
+    mode: {
+      type: String,
+      required: true,
+      validator: (mode) => ['edit', 'create'].includes(mode),
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    errors: {
+      type: Array,
+      required: true,
+    },
+    showProjectField: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    initialValues: {
+      type: Object,
+      required: false,
+      default() {
+        return {
+          projectId: null,
+          name: '',
+          description: '',
+          systemPrompt: '',
+          userPrompt: '',
+          public: false,
+          release: true,
+          tools: [],
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      availableTools: [],
+      toolFilter: '',
+      formValues: {
+        ...this.initialValues,
+        visibilityLevel: this.initialValues.public
+          ? VISIBILITY_LEVEL_PUBLIC
+          : VISIBILITY_LEVEL_PRIVATE,
+      },
+      formErrors: [],
+    };
+  },
+  computed: {
+    isToolsAvailable() {
+      return this.glFeatures.aiCatalogAgentTools;
+    },
+    formId() {
+      return uniqueId('ai-catalog-agent-form-');
+    },
+    isEditMode() {
+      return this.mode === 'edit';
+    },
+    allErrors() {
+      return [...this.errors, ...this.formErrors];
+    },
+    submitButtonText() {
+      return this.isEditMode ? s__('AICatalog|Save changes') : s__('AICatalog|Create agent');
+    },
+    fields() {
+      const projectIdField =
+        this.isEditMode || !this.showProjectField
+          ? {}
+          : {
+              projectId: {
+                label: s__('AICatalog|Project'),
+                validators: createFieldValidators({
+                  requiredLabel: s__('AICatalog|Project is required.'),
+                }),
+                groupAttrs: {
+                  labelDescription: s__(
+                    'AICatalog|Select a project for your AI agent to be associated with.',
+                  ),
+                },
+              },
+            };
+      const toolsField = this.isToolsAvailable
+        ? {
+            tools: {
+              label: s__('AICatalog|Tools'),
+              groupAttrs: {
+                optional: true,
+                labelDescription: s__(
+                  'AICatalog|Select tools that this agent will have access to.',
+                ),
+              },
+            },
+          }
+        : {};
+
+      return {
+        ...projectIdField,
+        name: {
+          label: __('Name'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|Name is required.'),
+            maxLength: MAX_LENGTH_NAME,
+          }),
+          inputAttrs: {
+            'data-testid': 'agent-form-input-name',
+            placeholder: s__('AICatalog|e.g., Research Assistant, Creative Writer, Code Helper'),
+          },
+          groupAttrs: {
+            labelDescription: s__('AICatalog|Choose a memorable name for your AI agent.'),
+          },
+        },
+        description: {
+          label: __('Description'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|Description is required.'),
+            maxLength: MAX_LENGTH_DESCRIPTION,
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              'AICatalog|Briefly describe what this agent is designed to do and its key capabilities.',
+            ),
+          },
+        },
+        ...toolsField,
+        systemPrompt: {
+          label: s__('AICatalog|System prompt'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|System prompt is required.'),
+            maxLength: MAX_LENGTH_PROMPT,
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              "AICatalog|Define the agent's personality, expertise, and behavioral guidelines. This shapes how the agent responds and approaches tasks.",
+            ),
+          },
+        },
+        userPrompt: {
+          label: s__('AICatalog|User prompt'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|User prompt is required.'),
+            maxLength: MAX_LENGTH_PROMPT,
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              'AICatalog|Provide default instructions or context that will be included with every user interaction.',
+            ),
+          },
+        },
+        visibilityLevel: {
+          label: __('Visibility level'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|Visibility level is required.'),
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              'AICatalog|Choose who can view and interact with this agent after it is published to the public AI catalog.',
+            ),
+          },
+        },
+      };
+    },
+    filteredAvailableTools() {
+      return this.availableTools.filter((tool) =>
+        tool.name.toLowerCase().includes(this.toolFilter.toLowerCase()),
+      );
+    },
+    selectedTools() {
+      return this.formValues.tools.map((toolId) => ({
+        id: toolId,
+        name: this.availableTools.find((tool) => tool.id === toolId)?.name,
+      }));
+    },
+  },
+
+  methods: {
+    handleSubmit() {
+      const transformedValues = {
+        projectId: this.formValues.projectId,
+        name: this.formValues.name.trim(),
+        description: this.formValues.description.trim(),
+        systemPrompt: this.formValues.systemPrompt.trim(),
+        userPrompt: this.formValues.userPrompt.trim(),
+        public: this.formValues.visibilityLevel === VISIBILITY_LEVEL_PUBLIC,
+        release: this.initialValues.release,
+        tools: this.formValues.tools,
+      };
+      this.$emit('submit', transformedValues);
+    },
+    handleToolsInput(input) {
+      this.formValues.tools = input.map((t) => t.id);
+    },
+    handleToolSearch(search) {
+      this.toolFilter = search;
+    },
+    onError(error) {
+      this.formErrors.push(error);
+    },
+    dismissErrors() {
+      this.formErrors = [];
+      this.$emit('dismiss-errors');
+    },
+  },
+  indexRoute: AI_CATALOG_AGENTS_ROUTE,
+  visibilityLevelTexts: {
+    textPrivate: AGENT_VISIBILITY_LEVEL_DESCRIPTIONS[VISIBILITY_LEVEL_PRIVATE_STRING],
+    textPublic: AGENT_VISIBILITY_LEVEL_DESCRIPTIONS[VISIBILITY_LEVEL_PUBLIC_STRING],
+    alertTextPrivate: s__('AICatalog|This agent can be made private if it is not used.'),
+    alertTextPublic: s__('AICatalog|A public agent can be made private only if it is not used.'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <errors-alert :errors="allErrors" @dismiss="dismissErrors" />
+    <gl-form :id="formId" @submit.prevent="">
+      <gl-form-fields
+        v-model="formValues"
+        :form-id="formId"
+        :fields="fields"
+        @submit="handleSubmit"
+      >
+        <template #input(projectId)="{ id }">
+          <form-project-dropdown :id="id" v-model="formValues.projectId" @error="onError" />
+        </template>
+        <template #input(description)="{ id, input, value, blur, validation }">
+          <gl-form-textarea
+            :id="id"
+            :no-resize="false"
+            :placeholder="
+              s__(
+                'AICatalog|This agent specializes in... It can help you with... Best suited for...',
+              )
+            "
+            :state="validation.state"
+            :value="value"
+            data-testid="agent-form-textarea-description"
+            @blur="blur"
+            @update="input"
+          />
+        </template>
+        <template #input(systemPrompt)="{ id, input, value, blur, validation }">
+          <gl-form-textarea
+            :id="id"
+            :no-resize="false"
+            :placeholder="
+              s__(
+                'AICatalog|You are an expert in [domain]. Your communication style is [style]. When helping users, you should always... Your key strengths include... You approach problems by...',
+              )
+            "
+            :state="validation.state"
+            :value="value"
+            data-testid="agent-form-textarea-system-prompt"
+            @blur="blur"
+            @update="input"
+          />
+        </template>
+        <template #input(userPrompt)="{ id, input, value, blur, validation }">
+          <gl-form-textarea
+            :id="id"
+            :no-resize="false"
+            :placeholder="
+              s__(
+                'AICatalog|Please consider my background in... When explaining concepts, use... My preferred format for responses is... Always include...',
+              )
+            "
+            :rows="10"
+            :state="validation.state"
+            :value="value"
+            data-testid="agent-form-textarea-user-prompt"
+            @blur="blur"
+            @update="input"
+          />
+        </template>
+        <template #input(tools)>
+          <gl-token-selector
+            :selected-tokens="selectedTools"
+            :dropdown-items="filteredAvailableTools"
+            :placeholder="s__('AICatalog|Search and select tools for this agent.')"
+            allow-clear-all
+            data-testid="agent-form-token-selector-tools"
+            @input="handleToolsInput"
+            @text-input="handleToolSearch"
+          />
+        </template>
+        <template #input(visibilityLevel)="{ id, input, validation, value }">
+          <visibility-level-radio-group
+            :id="id"
+            :is-edit-mode="isEditMode"
+            :initial-value="initialValues.public"
+            :validation-state="validation.state"
+            :value="value"
+            :texts="$options.visibilityLevelTexts"
+            @input="input"
+          />
+        </template>
+      </gl-form-fields>
+      <ai-catalog-form-buttons :is-disabled="isLoading" :index-route="$options.indexRoute">
+        <gl-button
+          class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+          type="submit"
+          variant="confirm"
+          category="primary"
+          data-testid="agent-form-submit-button"
+          :loading="isLoading"
+        >
+          {{ submitButtonText }}
+        </gl-button>
+      </ai-catalog-form-buttons>
+    </gl-form>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
index f72d24f54ceb6e..90d74a1d95ddcf 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -6,7 +6,7 @@ import PageHeading from '~/vue_shared/components/page_heading.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
 import createAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
-import AiCatalogAgentForm from 'ee/ai/catalog/components/ai_catalog_agent_form.vue';
+import AiCatalogAgentForm from '../components/agent_form.vue';
 
 export default {
   name: 'AiCatalogAgentsNew',
-- 
GitLab


From 755cbbdfdc1b746cb1d22170211ffafb924062f1 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 15:46:03 +0200
Subject: [PATCH 5/9] Add buttons to top, including test run

---
 .../pages/agents/components/agent_form.vue    | 72 +++++++++++---
 .../pages/agents/edit/ai_agents_edit.vue      | 97 +++++++++++++++++++
 .../pages/agents/new/ai_agents_new.vue        | 10 --
 3 files changed, 155 insertions(+), 24 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
index 6bfd3d97b1feb1..61af098bc7f1fd 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -1,6 +1,13 @@
 <script>
 import { uniqueId } from 'lodash';
-import { GlButton, GlForm, GlFormFields, GlFormTextarea, GlTokenSelector } from '@gitlab/ui';
+import {
+  GlButton,
+  GlForm,
+  GlFormFields,
+  GlFormTextarea,
+  GlTokenSelector,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import {
   VISIBILITY_LEVEL_PUBLIC_STRING,
   VISIBILITY_LEVEL_PRIVATE_STRING,
@@ -13,6 +20,7 @@ import {
   VISIBILITY_LEVEL_PUBLIC,
   AGENT_VISIBILITY_LEVEL_DESCRIPTIONS,
 } from 'ee/ai/catalog/constants';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
 import { __, s__ } from '~/locale';
 import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -33,8 +41,12 @@ export default {
     GlFormFields,
     GlFormTextarea,
     GlTokenSelector,
+    PageHeading,
     VisibilityLevelRadioGroup,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [glFeatureFlagsMixin()],
   apollo: {
     availableTools: {
@@ -49,7 +61,7 @@ export default {
     mode: {
       type: String,
       required: true,
-      validator: (mode) => ['edit', 'create'].includes(mode),
+      validator: (mode) => ['edit', 'create', 'view'].includes(mode),
     },
     isLoading: {
       type: Boolean,
@@ -104,6 +116,9 @@ export default {
     isEditMode() {
       return this.mode === 'edit';
     },
+    isViewMode() {
+      return this.mode === 'view';
+    },
     allErrors() {
       return [...this.errors, ...this.formErrors];
     },
@@ -152,6 +167,7 @@ export default {
           inputAttrs: {
             'data-testid': 'agent-form-input-name',
             placeholder: s__('AICatalog|e.g., Research Assistant, Creative Writer, Code Helper'),
+            disabled: this.isViewMode,
           },
           groupAttrs: {
             labelDescription: s__('AICatalog|Choose a memorable name for your AI agent.'),
@@ -162,6 +178,7 @@ export default {
           validators: createFieldValidators({
             requiredLabel: s__('AICatalog|Description is required.'),
             maxLength: MAX_LENGTH_DESCRIPTION,
+            disabled: this.isViewMode,
           }),
           groupAttrs: {
             labelDescription: s__(
@@ -175,11 +192,13 @@ export default {
           validators: createFieldValidators({
             requiredLabel: s__('AICatalog|System prompt is required.'),
             maxLength: MAX_LENGTH_PROMPT,
+            disabled: this.isViewMode,
           }),
           groupAttrs: {
             labelDescription: s__(
               "AICatalog|Define the agent's personality, expertise, and behavioral guidelines. This shapes how the agent responds and approaches tasks.",
             ),
+            disabled: this.isViewMode,
           },
         },
         userPrompt: {
@@ -260,6 +279,43 @@ export default {
 
 <template>
   <div>
+    <page-heading :heading="s__('AICatalog|New agent')">
+      <template #description>
+        <div class="gl-border-b gl-pb-3">
+          {{ s__('AICatalog|AI agents complete specialized tasks.') }}
+        </div>
+      </template>
+      <template #actions>
+        <gl-button
+          v-gl-tooltip
+          :title="
+            s__(
+              'AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving.',
+            )
+          "
+          :class="{ '!gl-cursor-not-allowed !gl-opacity-5': !isViewMode }"
+          class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+          variant="confirm"
+          icon="duo-chat"
+          category="primary"
+          data-testid="agent-form-test-run-button"
+        >
+          {{ s__('AICatalog|Test run') }}
+        </gl-button>
+        <ai-catalog-form-buttons :is-disabled="isLoading" :index-route="$options.indexRoute">
+          <gl-button
+            class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+            type="submit"
+            variant="confirm"
+            category="primary"
+            data-testid="agent-form-submit-button"
+            :loading="isLoading"
+          >
+            {{ submitButtonText }}
+          </gl-button>
+        </ai-catalog-form-buttons>
+      </template>
+    </page-heading>
     <errors-alert :errors="allErrors" @dismiss="dismissErrors" />
     <gl-form :id="formId" @submit.prevent="">
       <gl-form-fields
@@ -343,18 +399,6 @@ export default {
           />
         </template>
       </gl-form-fields>
-      <ai-catalog-form-buttons :is-disabled="isLoading" :index-route="$options.indexRoute">
-        <gl-button
-          class="js-no-auto-disable gl-w-full sm:gl-w-auto"
-          type="submit"
-          variant="confirm"
-          category="primary"
-          data-testid="agent-form-submit-button"
-          :loading="isLoading"
-        >
-          {{ submitButtonText }}
-        </gl-button>
-      </ai-catalog-form-buttons>
     </gl-form>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
new file mode 100644
index 00000000000000..381e7d4c4011c4
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
@@ -0,0 +1,97 @@
+<script>
+import { s__ } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
+import createAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
+import AiCatalogAgentForm from '../components/agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsNew',
+  components: {
+    AiCatalogAgentForm,
+  },
+  inject: ['projectId'],
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    graphQlProjectId() {
+      return convertToGraphQLId(TYPENAME_PROJECT, this.projectId);
+    },
+  },
+  methods: {
+    async handleSubmit(input) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data: createAgentData } = await this.$apollo.mutate({
+          mutation: createAiCatalogAgent,
+          variables: {
+            input: { ...input, projectId: this.graphQlProjectId },
+          },
+        });
+
+        if (!createAgentData) {
+          return;
+        }
+
+        if (createAgentData.aiCatalogAgentCreate.errors.length > 0) {
+          this.errors = createAgentData.aiCatalogAgentCreate.errors;
+          return;
+        }
+
+        this.$toast.show(s__('AICatalog|Agent created successfully, adding to project...'));
+
+        const { data: createItemConsumerData } = await this.$apollo.mutate({
+          mutation: createAiCatalogItemConsumer,
+          variables: {
+            input: {
+              itemId: createAgentData.aiCatalogAgentCreate.item.id,
+              target: {
+                projectId: this.graphQlProjectId,
+              },
+            },
+          },
+        });
+
+        if (!createItemConsumerData) {
+          return;
+        }
+
+        if (createItemConsumerData.aiCatalogItemConsumerCreate.errors.length > 0) {
+          this.errors = createItemConsumerData.aiCatalogItemConsumerCreate.errors;
+          return;
+        }
+
+        this.$toast.show(s__('AICatalog|Agent added successfully.'));
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-agent-form
+      mode="create"
+      :show-project-field="false"
+      :is-loading="isSubmitting"
+      :errors="errors"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
index 90d74a1d95ddcf..381e7d4c4011c4 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -2,7 +2,6 @@
 import { s__ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
-import PageHeading from '~/vue_shared/components/page_heading.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
 import createAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
@@ -12,7 +11,6 @@ export default {
   name: 'AiCatalogAgentsNew',
   components: {
     AiCatalogAgentForm,
-    PageHeading,
   },
   inject: ['projectId'],
   data() {
@@ -87,14 +85,6 @@ export default {
 
 <template>
   <div>
-    <page-heading :heading="s__('AICatalog|New agent')">
-      <template #description>
-        <div class="gl-border-b gl-pb-3">
-          {{ s__('AICatalog|AI agents complete specialized tasks.') }}
-        </div>
-      </template>
-    </page-heading>
-
     <ai-catalog-agent-form
       mode="create"
       :show-project-field="false"
-- 
GitLab


From 02c538dab19ee6e1f071ec1885beeb41da202558 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 16:40:15 +0200
Subject: [PATCH 6/9] Create view mode

---
 .../components/ai_catalog_agent_form.vue      |  34 ++---
 .../visibility_level_radio_group.vue          |   5 +
 .../ai/catalog/router/constants.js            |   1 +
 .../pages/agents/components/agent_form.vue    | 121 ++++++++++++------
 .../pages/agents/edit/ai_agents_edit.vue      | 102 ++++-----------
 .../agents/edit/ai_agents_edit_wrapper.vue    |  85 ++++++++++++
 .../pages/agents/index/agent_list.vue         |  72 +++++++++++
 .../pages/agents/index/ai_agents.vue          |  73 +----------
 .../pages/agents/index/list_item.vue          | 112 ++++++++++++++++
 .../pages/agents/new/ai_agents_new.vue        |   8 +-
 .../pages/agents/view/ai_agents_view.vue      |  49 +++++++
 .../agents/view/ai_agents_view_wrapper.vue    |  85 ++++++++++++
 .../ai/duo_agents_platform/router/index.js    |  20 +++
 13 files changed, 560 insertions(+), 207 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue
 create mode 100644 ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue

diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
index bcf057fba45b3b..cc97c9050bb801 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
@@ -59,11 +59,6 @@ export default {
       type: Array,
       required: true,
     },
-    showProjectField: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     initialValues: {
       type: Object,
       required: false,
@@ -111,22 +106,21 @@ export default {
       return this.isEditMode ? s__('AICatalog|Save changes') : s__('AICatalog|Create agent');
     },
     fields() {
-      const projectIdField =
-        this.isEditMode || !this.showProjectField
-          ? {}
-          : {
-              projectId: {
-                label: s__('AICatalog|Project'),
-                validators: createFieldValidators({
-                  requiredLabel: s__('AICatalog|Project is required.'),
-                }),
-                groupAttrs: {
-                  labelDescription: s__(
-                    'AICatalog|Select a project for your AI agent to be associated with.',
-                  ),
-                },
+      const projectIdField = this.isEditMode
+        ? {}
+        : {
+            projectId: {
+              label: s__('AICatalog|Project'),
+              validators: createFieldValidators({
+                requiredLabel: s__('AICatalog|Project is required.'),
+              }),
+              groupAttrs: {
+                labelDescription: s__(
+                  'AICatalog|Select a project for your AI agent to be associated with.',
+                ),
               },
-            };
+            },
+          };
       const toolsField = this.isToolsAvailable
         ? {
             tools: {
diff --git a/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue b/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue
index 5e6b7a80e981c0..542adad0d52b2c 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue
@@ -28,6 +28,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
     texts: {
       type: Object,
       required: true,
@@ -82,6 +86,7 @@ export default {
 <template>
   <gl-form-radio-group
     :id="id"
+    :disabled="disabled"
     :state="validationState"
     :checked="value"
     @input="(value) => $emit('input', value)"
diff --git a/ee/app/assets/javascripts/ai/catalog/router/constants.js b/ee/app/assets/javascripts/ai/catalog/router/constants.js
index 91583b0d8df45a..43a598f7c278fb 100644
--- a/ee/app/assets/javascripts/ai/catalog/router/constants.js
+++ b/ee/app/assets/javascripts/ai/catalog/router/constants.js
@@ -1,6 +1,7 @@
 export const AI_CATALOG_INDEX_ROUTE = 'ai-catalog';
 export const AI_CATALOG_AGENTS_ROUTE = '/agents';
 export const AI_CATALOG_AGENTS_SHOW_ROUTE = '/agents/:id';
+export const AI_CATALOG_AGENTS_VIEW_ROUTE = '/agents/:id';
 export const AI_CATALOG_AGENTS_EDIT_ROUTE = '/agents/:id/edit';
 export const AI_CATALOG_AGENTS_RUN_ROUTE = '/agents/:id/run';
 export const AI_CATALOG_AGENTS_NEW_ROUTE = '/agents/new';
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
index 61af098bc7f1fd..ee980396a5358d 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -1,6 +1,7 @@
 <script>
 import { uniqueId } from 'lodash';
 import {
+  GlAlert,
   GlButton,
   GlForm,
   GlFormFields,
@@ -24,18 +25,20 @@ import PageHeading from '~/vue_shared/components/page_heading.vue';
 import { __, s__ } from '~/locale';
 import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { AI_CATALOG_AGENTS_ROUTE } from 'ee/ai/catalog/router/constants';
+import {
+  AI_CATALOG_AGENTS_ROUTE,
+  AI_CATALOG_AGENTS_EDIT_ROUTE,
+} from 'ee/ai/catalog/router/constants';
 import { createFieldValidators } from 'ee/ai/catalog/utils';
 import aiCatalogBuiltInToolsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_built_in_tools.query.graphql';
 import AiCatalogFormButtons from 'ee/ai/catalog/components/ai_catalog_form_buttons.vue';
-import FormProjectDropdown from 'ee/ai/catalog/components/form_project_dropdown.vue';
 import VisibilityLevelRadioGroup from 'ee/ai/catalog/components/visibility_level_radio_group.vue';
 
 export default {
   components: {
+    GlAlert,
     ErrorsAlert,
     AiCatalogFormButtons,
-    FormProjectDropdown,
     GlButton,
     GlForm,
     GlFormFields,
@@ -71,17 +74,11 @@ export default {
       type: Array,
       required: true,
     },
-    showProjectField: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     initialValues: {
       type: Object,
       required: false,
       default() {
         return {
-          projectId: null,
           name: '',
           description: '',
           systemPrompt: '',
@@ -96,6 +93,7 @@ export default {
   data() {
     return {
       availableTools: [],
+      showTestRunWarning: false,
       toolFilter: '',
       formValues: {
         ...this.initialValues,
@@ -107,6 +105,10 @@ export default {
     };
   },
   computed: {
+    heading() {
+      return this.initialValues?.name || s__('AICatalog|New agent');
+    },
+
     isToolsAvailable() {
       return this.glFeatures.aiCatalogAgentTools;
     },
@@ -123,25 +125,24 @@ export default {
       return [...this.errors, ...this.formErrors];
     },
     submitButtonText() {
-      return this.isEditMode ? s__('AICatalog|Save changes') : s__('AICatalog|Create agent');
+      if (this.isEditMode) {
+        return s__('AICatalog|Save changes');
+      }
+      if (this.isViewMode) {
+        return s__('AICatalog|Edit');
+      }
+      return s__('AICatalog|Create agent');
+    },
+    submitButtonIcon() {
+      if (this.isEditMode) {
+        return 'check';
+      }
+      if (this.isViewMode) {
+        return 'pencil';
+      }
+      return 'check';
     },
     fields() {
-      const projectIdField =
-        this.isEditMode || !this.showProjectField
-          ? {}
-          : {
-              projectId: {
-                label: s__('AICatalog|Project'),
-                validators: createFieldValidators({
-                  requiredLabel: s__('AICatalog|Project is required.'),
-                }),
-                groupAttrs: {
-                  labelDescription: s__(
-                    'AICatalog|Select a project for your AI agent to be associated with.',
-                  ),
-                },
-              },
-            };
       const toolsField = this.isToolsAvailable
         ? {
             tools: {
@@ -157,7 +158,6 @@ export default {
         : {};
 
       return {
-        ...projectIdField,
         name: {
           label: __('Name'),
           validators: createFieldValidators({
@@ -178,9 +178,9 @@ export default {
           validators: createFieldValidators({
             requiredLabel: s__('AICatalog|Description is required.'),
             maxLength: MAX_LENGTH_DESCRIPTION,
-            disabled: this.isViewMode,
           }),
           groupAttrs: {
+            disabled: this.isViewMode,
             labelDescription: s__(
               'AICatalog|Briefly describe what this agent is designed to do and its key capabilities.',
             ),
@@ -238,11 +238,23 @@ export default {
       }));
     },
   },
-
   methods: {
+    handleTestRunClick() {
+      if (this.isViewMode) {
+        this.$toast.show(s__('AICatalog|Let us open the Duo Chat and test run the agent!'));
+        return;
+      }
+
+      this.showTestRunWarning = true;
+    },
+    handleEditClick() {
+      this.$router.push({
+        name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+        params: { id: this.$route.params.id },
+      });
+    },
     handleSubmit() {
       const transformedValues = {
-        projectId: this.formValues.projectId,
         name: this.formValues.name.trim(),
         description: this.formValues.description.trim(),
         systemPrompt: this.formValues.systemPrompt.trim(),
@@ -259,9 +271,6 @@ export default {
     handleToolSearch(search) {
       this.toolFilter = search;
     },
-    onError(error) {
-      this.formErrors.push(error);
-    },
     dismissErrors() {
       this.formErrors = [];
       this.$emit('dismiss-errors');
@@ -279,12 +288,7 @@ export default {
 
 <template>
   <div>
-    <page-heading :heading="s__('AICatalog|New agent')">
-      <template #description>
-        <div class="gl-border-b gl-pb-3">
-          {{ s__('AICatalog|AI agents complete specialized tasks.') }}
-        </div>
-      </template>
+    <page-heading :heading="heading" class="gl-border-b gl-pb-6">
       <template #actions>
         <gl-button
           v-gl-tooltip
@@ -296,26 +300,57 @@ export default {
           :class="{ '!gl-cursor-not-allowed !gl-opacity-5': !isViewMode }"
           class="js-no-auto-disable gl-w-full sm:gl-w-auto"
           variant="confirm"
+          type="button"
           icon="duo-chat"
           category="primary"
           data-testid="agent-form-test-run-button"
+          @click="handleTestRunClick"
         >
           {{ s__('AICatalog|Test run') }}
         </gl-button>
         <ai-catalog-form-buttons :is-disabled="isLoading" :index-route="$options.indexRoute">
           <gl-button
+            v-if="!isViewMode"
             class="js-no-auto-disable gl-w-full sm:gl-w-auto"
             type="submit"
             variant="confirm"
+            :icon="submitButtonIcon"
             category="primary"
             data-testid="agent-form-submit-button"
             :loading="isLoading"
           >
             {{ submitButtonText }}
           </gl-button>
+          <gl-button
+            v-else
+            class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+            variant="confirm"
+            type="button"
+            :icon="submitButtonIcon"
+            category="primary"
+            data-testid="agent-form-submit-button"
+            :loading="isLoading"
+            @click="handleEditClick"
+          >
+            {{ submitButtonText }}
+          </gl-button>
         </ai-catalog-form-buttons>
       </template>
     </page-heading>
+    <gl-alert v-if="isViewMode" variant="info" class="gl-mb-5">
+      {{
+        s__(
+          'AICatalog|These settings will be applied when you click "Test Run" to deploy and test your agent',
+        )
+      }}
+    </gl-alert>
+    <gl-alert v-if="showTestRunWarning" variant="warning" class="gl-mb-5">
+      {{
+        s__(
+          'AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving.',
+        )
+      }}
+    </gl-alert>
     <errors-alert :errors="allErrors" @dismiss="dismissErrors" />
     <gl-form :id="formId" @submit.prevent="">
       <gl-form-fields
@@ -324,9 +359,6 @@ export default {
         :fields="fields"
         @submit="handleSubmit"
       >
-        <template #input(projectId)="{ id }">
-          <form-project-dropdown :id="id" v-model="formValues.projectId" @error="onError" />
-        </template>
         <template #input(description)="{ id, input, value, blur, validation }">
           <gl-form-textarea
             :id="id"
@@ -336,6 +368,7 @@ export default {
                 'AICatalog|This agent specializes in... It can help you with... Best suited for...',
               )
             "
+            :disabled="isViewMode"
             :state="validation.state"
             :value="value"
             data-testid="agent-form-textarea-description"
@@ -346,6 +379,7 @@ export default {
         <template #input(systemPrompt)="{ id, input, value, blur, validation }">
           <gl-form-textarea
             :id="id"
+            :disabled="isViewMode"
             :no-resize="false"
             :placeholder="
               s__(
@@ -362,6 +396,7 @@ export default {
         <template #input(userPrompt)="{ id, input, value, blur, validation }">
           <gl-form-textarea
             :id="id"
+            :disabled="isViewMode"
             :no-resize="false"
             :placeholder="
               s__(
@@ -378,6 +413,7 @@ export default {
         </template>
         <template #input(tools)>
           <gl-token-selector
+            :disabled="isViewMode"
             :selected-tokens="selectedTools"
             :dropdown-items="filteredAvailableTools"
             :placeholder="s__('AICatalog|Search and select tools for this agent.')"
@@ -390,6 +426,7 @@ export default {
         <template #input(visibilityLevel)="{ id, input, validation, value }">
           <visibility-level-radio-group
             :id="id"
+            :disabled="isViewMode"
             :is-edit-mode="isEditMode"
             :initial-value="initialValues.public"
             :validation-state="validation.state"
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
index 381e7d4c4011c4..8549b772e62171 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
@@ -1,83 +1,41 @@
 <script>
-import { s__ } from '~/locale';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
-import createAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
-import AiCatalogAgentForm from '../components/agent_form.vue';
+import aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
+import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
+import AiAgentsEditWrapper from './ai_agents_edit_wrapper.vue';
 
 export default {
-  name: 'AiCatalogAgentsNew',
+  name: 'AiCatalogAgentsEdit',
   components: {
-    AiCatalogAgentForm,
+    AiAgentsEditWrapper,
+    GlLoadingIcon,
   },
   inject: ['projectId'],
   data() {
     return {
-      errors: [],
-      isSubmitting: false,
+      aiCatalogAgent: null,
     };
   },
-  computed: {
-    graphQlProjectId() {
-      return convertToGraphQLId(TYPENAME_PROJECT, this.projectId);
+  apollo: {
+    aiCatalogAgent: {
+      query: aiCatalogAgentQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(TYPENAME_AI_CATALOG_ITEM, this.$route.params.id),
+        };
+      },
+      update(data) {
+        return data?.aiCatalogItem || {};
+      },
+      error() {
+        // todo
+      },
     },
   },
-  methods: {
-    async handleSubmit(input) {
-      this.isSubmitting = true;
-      this.resetErrorMessages();
-      try {
-        const { data: createAgentData } = await this.$apollo.mutate({
-          mutation: createAiCatalogAgent,
-          variables: {
-            input: { ...input, projectId: this.graphQlProjectId },
-          },
-        });
-
-        if (!createAgentData) {
-          return;
-        }
-
-        if (createAgentData.aiCatalogAgentCreate.errors.length > 0) {
-          this.errors = createAgentData.aiCatalogAgentCreate.errors;
-          return;
-        }
-
-        this.$toast.show(s__('AICatalog|Agent created successfully, adding to project...'));
-
-        const { data: createItemConsumerData } = await this.$apollo.mutate({
-          mutation: createAiCatalogItemConsumer,
-          variables: {
-            input: {
-              itemId: createAgentData.aiCatalogAgentCreate.item.id,
-              target: {
-                projectId: this.graphQlProjectId,
-              },
-            },
-          },
-        });
-
-        if (!createItemConsumerData) {
-          return;
-        }
-
-        if (createItemConsumerData.aiCatalogItemConsumerCreate.errors.length > 0) {
-          this.errors = createItemConsumerData.aiCatalogItemConsumerCreate.errors;
-          return;
-        }
-
-        this.$toast.show(s__('AICatalog|Agent added successfully.'));
-      } catch (error) {
-        this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
-        Sentry.captureException(error);
-      } finally {
-        this.isSubmitting = false;
-      }
-    },
-    resetErrorMessages() {
-      this.errors = [];
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.aiCatalogAgent.loading;
     },
   },
 };
@@ -85,13 +43,7 @@ export default {
 
 <template>
   <div>
-    <ai-catalog-agent-form
-      mode="create"
-      :show-project-field="false"
-      :is-loading="isSubmitting"
-      :errors="errors"
-      @dismiss-errors="resetErrorMessages"
-      @submit="handleSubmit"
-    />
+    <gl-loading-icon v-if="isLoading" size="xl" />
+    <ai-agents-edit-wrapper v-else-if="aiCatalogAgent" :ai-catalog-agent="aiCatalogAgent" />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
new file mode 100644
index 00000000000000..5f471ab5704928
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
@@ -0,0 +1,85 @@
+<script>
+import { s__ } from '~/locale';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import updateAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/update_ai_catalog_agent.mutation.graphql';
+import AiCatalogAgentForm from '../components/agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+  },
+  props: {
+    aiCatalogAgent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    initialValues() {
+      return {
+        name: this.aiCatalogAgent.name,
+        description: this.aiCatalogAgent.description,
+        systemPrompt: this.aiCatalogAgent.latestVersion?.systemPrompt,
+        userPrompt: this.aiCatalogAgent.latestVersion?.userPrompt,
+        public: this.aiCatalogAgent.public,
+        tools: this.aiCatalogAgent.latestVersion?.tools?.nodes.map((t) => t.id) || [],
+      };
+    },
+  },
+  methods: {
+    async handleSubmit(formValues) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: updateAiCatalogAgent,
+          variables: {
+            input: {
+              ...formValues,
+              id: this.aiCatalogAgent.id,
+            },
+          },
+        });
+
+        if (data) {
+          const { errors } = data.aiCatalogAgentUpdate;
+          if (errors.length > 0) {
+            this.errors = errors;
+            return;
+          }
+
+          this.$toast.show(s__('AICatalog|Agent updated successfully.'));
+        }
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be updated. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-agent-form
+      mode="edit"
+      :errors="errors"
+      :initial-values="initialValues"
+      :is-loading="isSubmitting"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue
new file mode 100644
index 00000000000000..801773a5c4ca6c
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlKeysetPagination } from '@gitlab/ui';
+import EMPTY_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-ai-catalog-md.svg?url';
+import ResourceListsLoadingStateList from '~/vue_shared/components/resource_lists/loading_state_list.vue';
+import ResourceListsEmptyState from '~/vue_shared/components/resource_lists/empty_state.vue';
+import AiCatalogListItem from './list_item.vue';
+
+export default {
+  name: 'AiCatalogList',
+  components: {
+    AiCatalogListItem,
+    GlKeysetPagination,
+    ResourceListsLoadingStateList,
+    ResourceListsEmptyState,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    itemTypeConfig: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  EMPTY_SVG_URL,
+};
+</script>
+
+<template>
+  <div>
+    <resource-lists-loading-state-list v-if="isLoading" />
+
+    <template v-else-if="items.length > 0">
+      <ul class="gl-list-none gl-p-0">
+        <ai-catalog-list-item
+          v-for="item in items"
+          :key="item.id"
+          :item="item"
+          :item-type-config="itemTypeConfig"
+        />
+      </ul>
+
+      <gl-keyset-pagination
+        v-bind="pageInfo"
+        class="gl-mt-5 gl-flex gl-justify-center"
+        @prev="$emit('prev-page')"
+        @next="$emit('next-page')"
+      />
+    </template>
+
+    <template v-else>
+      <slot name="empty-state">
+        <resource-lists-empty-state
+          :title="s__('AICatalog|Get started with the AI Catalog')"
+          :description="
+            s__('AICatalog|Build AI agents and flows to automate repetitive tasks and processes.')
+          "
+          :svg-path="$options.EMPTY_SVG_URL"
+        />
+      </slot>
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
index f0bf63289805ee..27b68d51d625ce 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
@@ -1,27 +1,24 @@
 <script>
 import EMPTY_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-ai-catalog-md.svg?url';
 import { GlButton, GlExperimentBadge } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
-import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { __ } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { fetchPolicies } from '~/lib/graphql';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import ResourceListsEmptyState from '~/vue_shared/components/resource_lists/empty_state.vue';
-import AiCatalogList from 'ee/ai/catalog/components/ai_catalog_list.vue';
-import AiCatalogItemDrawer from 'ee/ai/catalog/components/ai_catalog_item_drawer.vue';
 import aiCatalogConfiguredItemsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_configured_items.query.graphql';
 import aiCatalogProjectUserPermissionsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_project_user_permissions.query.graphql';
 import aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
-import deleteAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/delete_ai_catalog_item_consumer.mutation.graphql';
 import { AI_CATALOG_TYPE_AGENT, PAGE_SIZE } from 'ee/ai/catalog/constants';
 import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
-import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
 import {
   AI_CATALOG_AGENTS_ROUTE,
-  AI_CATALOG_SHOW_QUERY_PARAM,
   AI_CATALOG_AGENTS_NEW_ROUTE,
+  AI_CATALOG_SHOW_QUERY_PARAM,
 } from 'ee/ai/catalog/router/constants';
+import AiCatalogList from './agent_list.vue';
+import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
 
 export default {
   name: 'AiAgents',
@@ -32,7 +29,6 @@ export default {
     ResourceListsEmptyState,
     ErrorsAlert,
     AiCatalogList,
-    AiCatalogItemDrawer,
   },
   inject: {
     projectId: {
@@ -135,58 +131,8 @@ export default {
         },
       };
     },
-    activeAgent() {
-      if (!this.isItemDetailsLoading) return this.aiCatalogAgent;
-
-      // Returns the fully-loaded agent if available from aiAgents
-      const iid = this.$route.query[AI_CATALOG_SHOW_QUERY_PARAM];
-      if (!iid) return {};
-
-      const fromList = this.aiAgents.find(
-        (n) => this.formatId(n.item.id).toString() === String(iid),
-      );
-      return fromList?.item || { iid };
-    },
   },
   methods: {
-    formatId(id) {
-      return getIdFromGraphQLId(id);
-    },
-    closeDrawer() {
-      const { show, ...otherQuery } = this.$route.query;
-
-      this.$router.push({
-        path: this.$route.path,
-        query: otherQuery,
-      });
-    },
-    async deleteAgent(item) {
-      const { id } = item.itemConsumer;
-
-      try {
-        const { data } = await this.$apollo.mutate({
-          mutation: deleteAiCatalogItemConsumer,
-          variables: {
-            id,
-          },
-          refetchQueries: [aiCatalogConfiguredItemsQuery],
-        });
-
-        if (!data.aiCatalogItemConsumerDelete.success) {
-          this.errors = [
-            sprintf(s__('AICatalog|Failed to remove agent. %{error}'), {
-              error: data.aiCatalogItemConsumerDelete.errors?.[0],
-            }),
-          ];
-          return;
-        }
-
-        this.$toast.show(s__('AICatalog|Agent removed successfully from this project.'));
-      } catch (error) {
-        this.errors = [sprintf(s__('AICatalog|Failed to remove agent. %{error}'), { error })];
-        Sentry.captureException(error);
-      }
-    },
     handleNextPage() {
       this.$apollo.queries.aiAgents.refetch({
         ...this.$apollo.queries.aiAgents.variables,
@@ -229,9 +175,6 @@ export default {
       :is-loading="isLoading"
       :items="items"
       :item-type-config="itemTypeConfig"
-      :delete-confirm-title="s__('AICatalog|Remove agent from this project')"
-      :delete-confirm-message="s__('AICatalog|Are you sure you want to remove agent %{name}?')"
-      :delete-fn="deleteAgent"
       :page-info="pageInfo"
       @next-page="handleNextPage"
       @prev-page="handlePrevPage"
@@ -250,11 +193,5 @@ export default {
         </resource-lists-empty-state>
       </template>
     </ai-catalog-list>
-    <ai-catalog-item-drawer
-      :is-open="isItemSelected"
-      :is-item-details-loading="isItemDetailsLoading"
-      :active-item="activeAgent"
-      @close="closeDrawer"
-    />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue
new file mode 100644
index 00000000000000..5e263c78170665
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue
@@ -0,0 +1,112 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import ListItem from '~/vue_shared/components/resource_lists/list_item.vue';
+import { AI_CATALOG_AGENTS_VIEW_ROUTE } from 'ee/ai/catalog/router/constants';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import {
+  VISIBILITY_TYPE_ICON,
+  VISIBILITY_LEVEL_PUBLIC_STRING,
+  VISIBILITY_LEVEL_PRIVATE_STRING,
+} from '~/visibility_level/constants';
+import {
+  TIMESTAMP_TYPE_UPDATED_AT,
+  TIMESTAMP_TYPE_CREATED_AT,
+} from '~/vue_shared/components/resource_lists/constants';
+
+export default {
+  name: 'AiCatalogListItem',
+  components: {
+    GlIcon,
+    ListItem,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    itemTypeConfig: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    formattedItemId() {
+      return getIdFromGraphQLId(this.item.id);
+    },
+    showItemRoute() {
+      return {
+        name: this.$route.name,
+      };
+    },
+    formattedItem() {
+      const updatedAt =
+        this.item.latestVersion.updatedAt > this.item.updatedAt
+          ? this.item.latestVersion.updatedAt
+          : this.item.updatedAt;
+
+      return {
+        ...this.item,
+        id: this.formattedItemId,
+        avatarLabel: this.item.name,
+        avatarUrl: null,
+        fullName: this.item.name,
+        descriptionHtml: this.item.description,
+        relativeWebUrl: this.$router.resolve(this.showItemRoute).href,
+        updatedAt,
+      };
+    },
+    timestampType() {
+      return this.formattedItem.updatedAt > this.formattedItem.createdAt
+        ? TIMESTAMP_TYPE_UPDATED_AT
+        : TIMESTAMP_TYPE_CREATED_AT;
+    },
+    visibilityLevel() {
+      return this.item.public ? VISIBILITY_LEVEL_PUBLIC_STRING : VISIBILITY_LEVEL_PRIVATE_STRING;
+    },
+    visibilityIconName() {
+      return VISIBILITY_TYPE_ICON[this.visibilityLevel];
+    },
+    visibilityTooltip() {
+      return this.itemTypeConfig.visibilityTooltip?.[this.visibilityLevel];
+    },
+  },
+  methods: {
+    onClickAvatar(event) {
+      // The List Item uses GlAvatarLabeled internally. This component uses GlLink, which
+      // would support `href` and `to` (Vue Router Location). However, GlAvatarLabeled currently
+      // only supports href. This is why although setting the href which allows user to use right
+      // click to open the URL in a new tab, we programmitcally push a new route when clicked
+      // https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/components/base/avatar_labeled/avatar_labeled.vue#L80
+      // This can be removed once this issue is resolved:
+      // https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2935
+      event.preventDefault();
+      this.$router.push({
+        name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+        params: { id: getIdFromGraphQLId(this.formattedItemId) },
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <list-item
+    :resource="formattedItem"
+    :timestamp-type="timestampType"
+    data-testid="ai-catalog-item"
+    @click-avatar="(event) => onClickAvatar(event)"
+  >
+    <template #avatar-meta>
+      <gl-icon
+        v-if="visibilityTooltip"
+        v-gl-tooltip
+        :name="visibilityIconName"
+        :title="visibilityTooltip"
+        variant="subtle"
+      />
+    </template>
+  </list-item>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
index 381e7d4c4011c4..31970342e29567 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -1,6 +1,7 @@
 <script>
 import { s__ } from '~/locale';
-import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { AI_CATALOG_AGENTS_EDIT_ROUTE } from 'ee/ai/catalog/router/constants';
+import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
@@ -69,6 +70,10 @@ export default {
         }
 
         this.$toast.show(s__('AICatalog|Agent added successfully.'));
+        this.$router.push({
+          name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+          params: { id: getIdFromGraphQLId(createAgentData.aiCatalogAgentCreate.item.id) },
+        });
       } catch (error) {
         this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
         Sentry.captureException(error);
@@ -87,7 +92,6 @@ export default {
   <div>
     <ai-catalog-agent-form
       mode="create"
-      :show-project-field="false"
       :is-loading="isSubmitting"
       :errors="errors"
       @dismiss-errors="resetErrorMessages"
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue
new file mode 100644
index 00000000000000..0dfaebe08def80
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
+import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
+import AiAgentsViewWrapper from './ai_agents_view_wrapper.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiAgentsViewWrapper,
+    GlLoadingIcon,
+  },
+  inject: ['projectId'],
+  data() {
+    return {
+      aiCatalogAgent: null,
+    };
+  },
+  apollo: {
+    aiCatalogAgent: {
+      query: aiCatalogAgentQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(TYPENAME_AI_CATALOG_ITEM, this.$route.params.id),
+        };
+      },
+      update(data) {
+        return data?.aiCatalogItem || {};
+      },
+      error() {
+        // todo
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.aiCatalogAgent.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="xl" />
+    <ai-agents-view-wrapper v-else-if="aiCatalogAgent" :ai-catalog-agent="aiCatalogAgent" />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue
new file mode 100644
index 00000000000000..23a28bd4837dca
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue
@@ -0,0 +1,85 @@
+<script>
+import { s__ } from '~/locale';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import updateAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/update_ai_catalog_agent.mutation.graphql';
+import AiCatalogAgentForm from '../components/agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+  },
+  props: {
+    aiCatalogAgent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    initialValues() {
+      return {
+        name: this.aiCatalogAgent.name,
+        description: this.aiCatalogAgent.description,
+        systemPrompt: this.aiCatalogAgent.latestVersion?.systemPrompt,
+        userPrompt: this.aiCatalogAgent.latestVersion?.userPrompt,
+        public: this.aiCatalogAgent.public,
+        tools: this.aiCatalogAgent.latestVersion?.tools?.nodes.map((t) => t.id) || [],
+      };
+    },
+  },
+  methods: {
+    async handleSubmit(formValues) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: updateAiCatalogAgent,
+          variables: {
+            input: {
+              ...formValues,
+              id: this.aiCatalogAgent.id,
+            },
+          },
+        });
+
+        if (data) {
+          const { errors } = data.aiCatalogAgentUpdate;
+          if (errors.length > 0) {
+            this.errors = errors;
+            return;
+          }
+
+          this.$toast.show(s__('AICatalog|Agent updated successfully.'));
+        }
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be updated. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-agent-form
+      mode="view"
+      :errors="errors"
+      :initial-values="initialValues"
+      :is-loading="isSubmitting"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js b/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
index d8914addd2c36d..e3e41eb9cc5c2c 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
@@ -6,6 +6,8 @@ import {
   AI_CATALOG_AGENTS_NEW_ROUTE,
   AI_CATALOG_FLOWS_ROUTE,
   AI_CATALOG_FLOWS_EDIT_ROUTE,
+  AI_CATALOG_AGENTS_EDIT_ROUTE,
+  AI_CATALOG_AGENTS_VIEW_ROUTE,
 } from 'ee/ai/catalog/router/constants';
 import NestedRouteApp from '../nested_route_app.vue';
 import AgentsPlatformShow from '../pages/show/duo_agents_platform_show.vue';
@@ -15,6 +17,8 @@ import FlowTriggersNew from '../pages/flow_triggers/flow_triggers_new.vue';
 import FlowTriggersEdit from '../pages/flow_triggers/flow_triggers_edit.vue';
 import AiAgentsIndex from '../pages/agents/index/ai_agents.vue';
 import AiAgentsNew from '../pages/agents/new/ai_agents_new.vue';
+import AiAgentsEdit from '../pages/agents/edit/ai_agents_edit.vue';
+import AiAgentsView from '../pages/agents/view/ai_agents_view.vue';
 import AiFlows from '../pages/flows/ai_flows.vue';
 import AiFlowsEdit from '../pages/flows/ai_flows_edit.vue';
 import {
@@ -128,6 +132,22 @@ export const createRouter = (base, namespace) => {
               text: s__('AICatalog|New agent'),
             },
           },
+          {
+            name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+            path: ':id(\\d+)',
+            component: AiAgentsView,
+            meta: {
+              text: s__('AICatalog|View agent'),
+            },
+          },
+          {
+            name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+            path: ':id(\\d+)/edit',
+            component: AiAgentsEdit,
+            meta: {
+              text: s__('AICatalog|Edit agent'),
+            },
+          },
         ],
       },
       ...(gon.features?.aiCatalogFlows
-- 
GitLab


From 3327967827f842d4266d362635087d042602867d Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 16:50:28 +0200
Subject: [PATCH 7/9] Update agent when hitting save

---
 .../pages/agents/components/agent_form.vue    | 33 ++++++-------------
 .../agents/edit/ai_agents_edit_wrapper.vue    |  5 +++
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
index ee980396a5358d..3723814ca24a55 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -55,9 +55,6 @@ export default {
     availableTools: {
       query: aiCatalogBuiltInToolsQuery,
       update: (data) => data.aiCatalogBuiltInTools.nodes.map((t) => ({ id: t.id, name: t.title })),
-      skip() {
-        return !this.isToolsAvailable;
-      },
     },
   },
   props: {
@@ -108,10 +105,6 @@ export default {
     heading() {
       return this.initialValues?.name || s__('AICatalog|New agent');
     },
-
-    isToolsAvailable() {
-      return this.glFeatures.aiCatalogAgentTools;
-    },
     formId() {
       return uniqueId('ai-catalog-agent-form-');
     },
@@ -143,20 +136,6 @@ export default {
       return 'check';
     },
     fields() {
-      const toolsField = this.isToolsAvailable
-        ? {
-            tools: {
-              label: s__('AICatalog|Tools'),
-              groupAttrs: {
-                optional: true,
-                labelDescription: s__(
-                  'AICatalog|Select tools that this agent will have access to.',
-                ),
-              },
-            },
-          }
-        : {};
-
       return {
         name: {
           label: __('Name'),
@@ -186,7 +165,13 @@ export default {
             ),
           },
         },
-        ...toolsField,
+        tools: {
+          label: s__('AICatalog|Tools'),
+          groupAttrs: {
+            optional: true,
+            labelDescription: s__('AICatalog|Select tools that this agent will have access to.'),
+          },
+        },
         systemPrompt: {
           label: s__('AICatalog|System prompt'),
           validators: createFieldValidators({
@@ -314,10 +299,12 @@ export default {
             class="js-no-auto-disable gl-w-full sm:gl-w-auto"
             type="submit"
             variant="confirm"
+            form="formId"
             :icon="submitButtonIcon"
             category="primary"
             data-testid="agent-form-submit-button"
             :loading="isLoading"
+            @click="handleSubmit"
           >
             {{ submitButtonText }}
           </gl-button>
@@ -413,7 +400,7 @@ export default {
         </template>
         <template #input(tools)>
           <gl-token-selector
-            :disabled="isViewMode"
+            :view-only="isViewMode"
             :selected-tokens="selectedTools"
             :dropdown-items="filteredAvailableTools"
             :placeholder="s__('AICatalog|Search and select tools for this agent.')"
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
index 5f471ab5704928..1f714e83d6d657 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
@@ -1,6 +1,7 @@
 <script>
 import { s__ } from '~/locale';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import { AI_CATALOG_AGENTS_VIEW_ROUTE } from 'ee/ai/catalog/router/constants';
 import updateAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/update_ai_catalog_agent.mutation.graphql';
 import AiCatalogAgentForm from '../components/agent_form.vue';
 
@@ -56,6 +57,10 @@ export default {
           }
 
           this.$toast.show(s__('AICatalog|Agent updated successfully.'));
+          this.$router.push({
+            name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+            params: { id: this.$route.params.id },
+          });
         }
       } catch (error) {
         this.errors = [s__('AICatalog|The agent could not be updated. Try again.')];
-- 
GitLab


From 57364b73048c0fc05de82dd55036fd959655237f Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Fri, 12 Sep 2025 16:52:40 +0200
Subject: [PATCH 8/9] Fix push issues

---
 .../pages/agents/components/agent_form.vue    |  8 +++---
 .../pages/agents/index/ai_agents.vue          |  2 +-
 locale/gitlab.pot                             | 27 +++++++++----------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
index 3723814ca24a55..9ef072a7e8e3f2 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -278,9 +278,11 @@ export default {
         <gl-button
           v-gl-tooltip
           :title="
-            s__(
-              'AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving.',
-            )
+            !isViewMode
+              ? s__(
+                  'AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving.',
+                )
+              : ''
           "
           :class="{ '!gl-cursor-not-allowed !gl-opacity-5': !isViewMode }"
           class="js-no-auto-disable gl-w-full sm:gl-w-auto"
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
index 27b68d51d625ce..ce31e4ebbaba90 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
@@ -17,8 +17,8 @@ import {
   AI_CATALOG_AGENTS_NEW_ROUTE,
   AI_CATALOG_SHOW_QUERY_PARAM,
 } from 'ee/ai/catalog/router/constants';
-import AiCatalogList from './agent_list.vue';
 import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
+import AiCatalogList from './agent_list.vue';
 
 export default {
   name: 'AiAgents',
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 55aeb1d74ab8b2..995bd487b9360a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2462,9 +2462,6 @@ msgstr ""
 msgid "AICatalog|AI Catalog"
 msgstr ""
 
-msgid "AICatalog|AI agents complete specialized tasks."
-msgstr ""
-
 msgid "AICatalog|Add this %{itemType} to a project"
 msgstr ""
 
@@ -2495,9 +2492,6 @@ msgstr ""
 msgid "AICatalog|Agent not found."
 msgstr ""
 
-msgid "AICatalog|Agent removed successfully from this project."
-msgstr ""
-
 msgid "AICatalog|Agent updated successfully."
 msgstr ""
 
@@ -2519,9 +2513,6 @@ msgstr ""
 msgid "AICatalog|Are you sure you want to delete flow %{name}?"
 msgstr ""
 
-msgid "AICatalog|Are you sure you want to remove agent %{name}?"
-msgstr ""
-
 msgid "AICatalog|Are you sure you want to remove flow %{name}?"
 msgstr ""
 
@@ -2621,9 +2612,6 @@ msgstr ""
 msgid "AICatalog|Failed to delete flow. %{error}"
 msgstr ""
 
-msgid "AICatalog|Failed to remove agent. %{error}"
-msgstr ""
-
 msgid "AICatalog|Failed to remove flow. %{error}"
 msgstr ""
 
@@ -2666,6 +2654,9 @@ msgstr ""
 msgid "AICatalog|Input cannot exceed %{value} characters. Please shorten your input."
 msgstr ""
 
+msgid "AICatalog|Let us open the Duo Chat and test run the agent!"
+msgstr ""
+
 msgid "AICatalog|Modify the agent settings and configuration."
 msgstr ""
 
@@ -2711,9 +2702,6 @@ msgstr ""
 msgid "AICatalog|Provide instructions or context that will be included for this run."
 msgstr ""
 
-msgid "AICatalog|Remove agent from this project"
-msgstr ""
-
 msgid "AICatalog|Remove flow from this project"
 msgstr ""
 
@@ -2726,6 +2714,9 @@ msgstr ""
 msgid "AICatalog|Save changes"
 msgstr ""
 
+msgid "AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving."
+msgstr ""
+
 msgid "AICatalog|Search and select tools for this agent."
 msgstr ""
 
@@ -2789,6 +2780,9 @@ msgstr ""
 msgid "AICatalog|The test run failed. %{error}"
 msgstr ""
 
+msgid "AICatalog|These settings will be applied when you click \"Test Run\" to deploy and test your agent"
+msgstr ""
+
 msgid "AICatalog|This %{itemType} is private and can only be added to the project it was created in. Duplicate the agent to use the same configuration in other projects."
 msgstr ""
 
@@ -2828,6 +2822,9 @@ msgstr ""
 msgid "AICatalog|Version"
 msgstr ""
 
+msgid "AICatalog|View agent"
+msgstr ""
+
 msgid "AICatalog|Visibility level is required."
 msgstr ""
 
-- 
GitLab


From 9f6928db1a297e594ec2e6549c9a4f991c8122be Mon Sep 17 00:00:00 2001
From: Eduardo Bonet <ebonet@gitlab.com>
Date: Tue, 30 Sep 2025 14:35:11 +0200
Subject: [PATCH 9/9] PoC: agent response updates form

---
 .../pages/agents/components/agent_form.vue    | 17 ++++++++++
 .../ai/tanuki_bot/store/actions.js            | 32 ++++++++++++++++++-
 .../internal/ai_assist/duoworkflow/handler.go |  6 +++-
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
index 9ef072a7e8e3f2..7d1bf6e8f73080 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -223,6 +223,13 @@ export default {
       }));
     },
   },
+  mounted() {
+    console.log('mounted');
+    document.addEventListener('agent-form:update', this.handleFormUpdate);
+  },
+  beforeDestroy() {
+    document.removeEventListener('agent-form:update', this.handleFormUpdate);
+  },
   methods: {
     handleTestRunClick() {
       if (this.isViewMode) {
@@ -260,6 +267,16 @@ export default {
       this.formErrors = [];
       this.$emit('dismiss-errors');
     },
+    handleFormUpdate(event) {
+      if (event.detail && typeof event.detail === 'object') {
+        console.log(event)
+        // Update form values with the provided data
+        this.formValues = {
+          ...this.formValues,
+          ...event.detail,
+        };
+      }
+    },
   },
   indexRoute: AI_CATALOG_AGENTS_ROUTE,
   visibilityLevelTexts: {
diff --git a/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js b/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
index c6289bda29359e..6120df529d4c41 100644
--- a/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
+++ b/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
@@ -9,8 +9,34 @@ const proxyMessageContent = (message, propsToUpdate) => {
   };
 };
 
+
+const publishFormDataFromMessage = (messageContent = '') => {
+  const prefix = "```agent-form"
+  const suffix = "```"
+
+  // find the context between prefix and suffix in messageContent. Prefix can be anywhere in the
+  // string, and might even not exist
+  let extractedContent = '';
+  const startIndex = messageContent.indexOf(prefix);
+
+  if (startIndex === -1) return;
+
+  const contentAfterPrefix = messageContent.substring(startIndex + prefix.length);
+  const endIndex = contentAfterPrefix.indexOf(suffix);
+
+  if (endIndex === -1) return;
+
+  extractedContent = contentAfterPrefix.substring(0, endIndex).trim();
+
+  const event = new CustomEvent("agent-form:update", {
+    detail: JSON.parse(extractedContent)
+  });
+
+  document.dispatchEvent(event);
+};
+
 export const addDuoChatMessage = async ({ commit }, messageData = { content: '' }) => {
-  const { errors = [], content = '' } = messageData || {};
+  const { errors = [], content = '', status = null } = messageData || {};
   const msgContent = content || errors.join('; ');
 
   if (msgContent) {
@@ -20,6 +46,10 @@ export const addDuoChatMessage = async ({ commit }, messageData = { content: ''
       commit(types.ADD_TOOL_MESSAGE, message);
     } else {
       commit(types.ADD_MESSAGE, message);
+
+      if (message.role.toLowerCase() === GENIE_CHAT_MODEL_ROLES.assistant && status === 'success') {
+        publishFormDataFromMessage(msgContent)
+      }
     }
   }
 };
diff --git a/workhorse/internal/ai_assist/duoworkflow/handler.go b/workhorse/internal/ai_assist/duoworkflow/handler.go
index 7ac0415651de8f..e881eabac94973 100644
--- a/workhorse/internal/ai_assist/duoworkflow/handler.go
+++ b/workhorse/internal/ai_assist/duoworkflow/handler.go
@@ -11,7 +11,11 @@ import (
 	"github.com/gorilla/websocket"
 )
 
-var upgrader = websocket.Upgrader{}
+var upgrader = websocket.Upgrader{
+    CheckOrigin: func(r *http.Request) bool {
+        return true
+   },
+}
 
 // Handler creates an HTTP handler for Duo Workflow WebSocket connections.
 func Handler(rails *api.API) http.Handler {
-- 
GitLab