From ecd603a46267f33b4decf15553c08147f59e7e2f Mon Sep 17 00:00:00 2001
From: Florie Guibert <fguibert@gitlab.com>
Date: Thu, 18 Sep 2025 16:04:41 +1000
Subject: [PATCH 1/3] [Spike] UX changes to agent views

---
 .../components/ai_catalog_agent_form.vue      | 194 +++++++++++++++---
 .../components/ai_catalog_list_item.vue       |   7 +-
 .../components/form_project_dropdown.vue      |   5 +
 .../visibility_level_radio_group.vue          |   5 +
 .../ai/catalog/pages/agents/ai_agent_edit.vue |  48 +++++
 .../pages/agents/ai_agent_edit_wrapper.vue    |  91 ++++++++
 .../ai/catalog/pages/agents/ai_agent_view.vue |  48 +++++
 .../pages/agents/ai_agent_view_wrapper.vue    |  86 ++++++++
 .../catalog/pages/ai_catalog_agents_new.vue   |  10 -
 .../ai/catalog/router/constants.js            |   1 +
 .../javascripts/ai/catalog/router/index.js    |  74 +++----
 locale/gitlab.pot                             |  18 +-
 12 files changed, 502 insertions(+), 85 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit_wrapper.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_view.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_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 492e59ca6501e3..79c6a79348bb91 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
@@ -1,10 +1,19 @@
 <script>
 import { uniqueId } from 'lodash';
-import { GlButton, GlForm, GlFormFields, GlFormTextarea, GlTokenSelector } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlForm,
+  GlFormFields,
+  GlFormTextarea,
+  GlTokenSelector,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import {
   VISIBILITY_LEVEL_PUBLIC_STRING,
   VISIBILITY_LEVEL_PRIVATE_STRING,
 } from '~/visibility_level/constants';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
 import {
   MAX_LENGTH_NAME,
   MAX_LENGTH_DESCRIPTION,
@@ -16,7 +25,7 @@ import {
 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 '../router/constants';
+import { AI_CATALOG_AGENTS_ROUTE, AI_CATALOG_AGENTS_EDIT_ROUTE } from '../router/constants';
 import { createFieldValidators } from '../utils';
 import aiCatalogBuiltInToolsQuery from '../graphql/queries/ai_catalog_built_in_tools.query.graphql';
 import AiCatalogFormButtons from './ai_catalog_form_buttons.vue';
@@ -25,6 +34,7 @@ import VisibilityLevelRadioGroup from './visibility_level_radio_group.vue';
 
 export default {
   components: {
+    GlAlert,
     ErrorsAlert,
     AiCatalogFormButtons,
     FormProjectDropdown,
@@ -33,8 +43,13 @@ export default {
     GlFormFields,
     GlFormTextarea,
     GlTokenSelector,
+    PageHeading,
     VisibilityLevelRadioGroup,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+
   mixins: [glFeatureFlagsMixin()],
   apollo: {
     availableTools: {
@@ -49,7 +64,7 @@ export default {
     mode: {
       type: String,
       required: true,
-      validator: (mode) => ['edit', 'create'].includes(mode),
+      validator: (mode) => ['edit', 'create', 'view'].includes(mode),
     },
     isLoading: {
       type: Boolean,
@@ -87,9 +102,14 @@ export default {
           : VISIBILITY_LEVEL_PRIVATE,
       },
       formErrors: [],
+      showTestRunWarning: false,
     };
   },
   computed: {
+    heading() {
+      return this.initialValues?.name || s__('AICatalog|New agent');
+    },
+
     isToolsAvailable() {
       return this.glFeatures.aiCatalogAgentTools;
     },
@@ -99,28 +119,52 @@ export default {
     isEditMode() {
       return this.mode === 'edit';
     },
+    isViewMode() {
+      return this.mode === 'view';
+    },
+    isCreateMode() {
+      return this.mode === 'create';
+    },
     allErrors() {
       return [...this.errors, ...this.formErrors];
     },
+    headingDescription() {
+      return s__('AICatalog|Agents can be used in chat or flows');
+    },
     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
-        ? {}
-        : {
-            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.',
-                ),
-              },
-            },
-          };
+      console.log('PROJECT', this.formValues.projectId);
+      const projectIdField = {
+        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: {
@@ -146,6 +190,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.'),
@@ -183,6 +228,7 @@ export default {
             maxLength: MAX_LENGTH_PROMPT,
           }),
           groupAttrs: {
+            disabled: this.isViewMode,
             labelDescription: s__(
               'AICatalog|Provide default instructions or context that will be included with every user interaction.',
             ),
@@ -241,6 +287,21 @@ export default {
       this.formErrors = [];
       this.$emit('dismiss-errors');
     },
+    handleEditClick() {
+      this.$router.push({
+        name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+        params: { id: this.$route.params.id },
+      });
+    },
+
+    handleTestRunClick() {
+      if (this.isViewMode) {
+        this.$toast.show(s__('AICatalog|Let us open the Duo Chat and test run the agent!'));
+        return;
+      }
+
+      this.showTestRunWarning = true;
+    },
   },
   indexRoute: AI_CATALOG_AGENTS_ROUTE,
   visibilityLevelTexts: {
@@ -254,6 +315,77 @@ export default {
 
 <template>
   <div>
+    <page-heading :heading="heading" class="gl-border-b gl-pb-6">
+      <template #description>
+        {{ headingDescription }}
+      </template>
+      <template #actions>
+        <gl-button
+          v-gl-tooltip
+          :title="
+            !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"
+          variant="confirm"
+          type="button"
+          icon="issue-type-test-case"
+          category="primary"
+          data-testid="agent-form-test-run-button"
+          @click="handleTestRunClick"
+        >
+          {{ s__('AICatalog|Test') }}
+        </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"
+            form="formId"
+            :icon="submitButtonIcon"
+            category="primary"
+            data-testid="agent-form-submit-button"
+            :loading="isLoading"
+            @click="handleSubmit"
+          >
+            {{ 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
@@ -263,7 +395,12 @@ export default {
         @submit="handleSubmit"
       >
         <template #input(projectId)="{ id }">
-          <form-project-dropdown :id="id" v-model="formValues.projectId" @error="onError" />
+          <form-project-dropdown
+            :id="id"
+            v-model="formValues.projectId"
+            :disabled="!isCreateMode"
+            @error="onError"
+          />
         </template>
         <template #input(description)="{ id, input, value, blur, validation }">
           <gl-form-textarea
@@ -276,6 +413,7 @@ export default {
             "
             :state="validation.state"
             :value="value"
+            :disabled="isViewMode"
             data-testid="agent-form-textarea-description"
             @blur="blur"
             @update="input"
@@ -292,6 +430,7 @@ export default {
             "
             :state="validation.state"
             :value="value"
+            :disabled="isViewMode"
             data-testid="agent-form-textarea-system-prompt"
             @blur="blur"
             @update="input"
@@ -309,6 +448,7 @@ export default {
             :rows="10"
             :state="validation.state"
             :value="value"
+            :disabled="isViewMode"
             data-testid="agent-form-textarea-user-prompt"
             @blur="blur"
             @update="input"
@@ -319,6 +459,7 @@ export default {
             :selected-tokens="selectedTools"
             :dropdown-items="filteredAvailableTools"
             :placeholder="s__('AICatalog|Search and select tools for this agent.')"
+            :view-only="isViewMode"
             allow-clear-all
             data-testid="agent-form-token-selector-tools"
             @input="handleToolsInput"
@@ -334,22 +475,11 @@ export default {
             :validation-state="validation.state"
             :value="value"
             :texts="$options.visibilityLevelTexts"
+            :disabled="isViewMode"
             @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/catalog/components/ai_catalog_list_item.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue
index 1ae30569000d36..aeceffc544a6a2 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue
@@ -18,7 +18,7 @@ import {
   TIMESTAMP_TYPE_UPDATED_AT,
   TIMESTAMP_TYPE_CREATED_AT,
 } from '~/vue_shared/components/resource_lists/constants';
-import { AI_CATALOG_SHOW_QUERY_PARAM } from '../router/constants';
+import { AI_CATALOG_AGENTS_VIEW_ROUTE } from '../router/constants';
 
 export default {
   name: 'AiCatalogListItem',
@@ -61,7 +61,7 @@ export default {
     showItemRoute() {
       return {
         name: this.$route.name,
-        query: { [AI_CATALOG_SHOW_QUERY_PARAM]: this.formattedItemId },
+        params: { id: this.formattedItemId },
       };
     },
     formattedItem() {
@@ -110,7 +110,8 @@ export default {
       // https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2935
       event.preventDefault();
       this.$router.push({
-        query: { [AI_CATALOG_SHOW_QUERY_PARAM]: this.formattedItemId },
+        name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+        params: { id: this.formattedItemId },
       });
     },
   },
diff --git a/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue b/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue
index 3a4bdb7836bbe9..836e47f21d0fe7 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue
@@ -28,6 +28,10 @@ export default {
       required: false,
       default: null,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -157,6 +161,7 @@ export default {
     is-check-centered
     :infinite-scroll="hasNextPage"
     :infinite-scroll-loading="isLoadingMore"
+    :disabled="disabled"
     data-testid="project-select"
     @bottom-reached="onBottomReached"
     @search="onSearch"
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..cfe6ec858f8575 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
@@ -45,6 +45,10 @@ export default {
       type: Number,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
   },
 
   computed: {
@@ -84,6 +88,7 @@ export default {
     :id="id"
     :state="validationState"
     :checked="value"
+    :disabled="disabled"
     @input="(value) => $emit('input', value)"
   >
     <gl-form-radio
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit.vue b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit.vue
new file mode 100644
index 00000000000000..321363052a45b7
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit.vue
@@ -0,0 +1,48 @@
+<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 AiAgentEditWrapper from './ai_agent_edit_wrapper.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiAgentEditWrapper,
+    GlLoadingIcon,
+  },
+  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-agent-edit-wrapper v-else-if="aiCatalogAgent" :ai-catalog-agent="aiCatalogAgent" />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit_wrapper.vue b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit_wrapper.vue
new file mode 100644
index 00000000000000..8056b77f4e0cdb
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_edit_wrapper.vue
@@ -0,0 +1,91 @@
+<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/ai_catalog_agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+  },
+  props: {
+    aiCatalogAgent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    initialValues() {
+      return {
+        projectId: this.aiCatalogAgent.project?.id,
+        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.'));
+          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.')];
+        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/catalog/pages/agents/ai_agent_view.vue b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_view.vue
new file mode 100644
index 00000000000000..fc1944f56d1486
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_view.vue
@@ -0,0 +1,48 @@
+<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 AiAgentViewWrapper from './ai_agent_view_wrapper.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiAgentViewWrapper,
+    GlLoadingIcon,
+  },
+  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-agent-view-wrapper v-else-if="aiCatalogAgent" :ai-catalog-agent="aiCatalogAgent" />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_view_wrapper.vue b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_view_wrapper.vue
new file mode 100644
index 00000000000000..b178d824cc90ee
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/pages/agents/ai_agent_view_wrapper.vue
@@ -0,0 +1,86 @@
+<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/ai_catalog_agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+  },
+  props: {
+    aiCatalogAgent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    initialValues() {
+      return {
+        projectId: this.aiCatalogAgent.project?.id,
+        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/catalog/pages/ai_catalog_agents_new.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_new.vue
index 4f7adc516c966f..929833c53d3640 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_new.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_new.vue
@@ -2,7 +2,6 @@
 import { s__, sprintf } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import PageHeading from '~/vue_shared/components/page_heading.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import createAiCatalogAgent from '../graphql/mutations/create_ai_catalog_agent.mutation.graphql';
 import { AI_CATALOG_AGENTS_ROUTE, AI_CATALOG_SHOW_QUERY_PARAM } from '../router/constants';
@@ -12,7 +11,6 @@ export default {
   name: 'AiCatalogAgentsNew',
   components: {
     AiCatalogAgentForm,
-    PageHeading,
   },
   data() {
     return {
@@ -75,14 +73,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"
       :is-loading="isSubmitting"
diff --git a/ee/app/assets/javascripts/ai/catalog/router/constants.js b/ee/app/assets/javascripts/ai/catalog/router/constants.js
index 57cc425d853eed..a5cdc324846cd7 100644
--- a/ee/app/assets/javascripts/ai/catalog/router/constants.js
+++ b/ee/app/assets/javascripts/ai/catalog/router/constants.js
@@ -1,5 +1,6 @@
 export const AI_CATALOG_INDEX_ROUTE = 'ai-catalog';
 export const AI_CATALOG_AGENTS_ROUTE = '/agents';
+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/catalog/router/index.js b/ee/app/assets/javascripts/ai/catalog/router/index.js
index 391acfbed80c61..938f167bf0ca0f 100644
--- a/ee/app/assets/javascripts/ai/catalog/router/index.js
+++ b/ee/app/assets/javascripts/ai/catalog/router/index.js
@@ -4,8 +4,8 @@ import { s__ } from '~/locale';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import NestedRouteApp from 'ee/ai/duo_agents_platform/nested_route_app.vue';
 import AiCatalogAgents from '../pages/ai_catalog_agents.vue';
-import AiCatalogAgent from '../pages/ai_catalog_agent.vue';
-import AiCatalogAgentsEdit from '../pages/ai_catalog_agents_edit.vue';
+import AgentView from '../pages/agents/ai_agent_view.vue';
+import AgentEdit from '../pages/agents/ai_agent_edit.vue';
 import AiCatalogAgentsRun from '../pages/ai_catalog_agents_run.vue';
 import AiCatalogAgentsNew from '../pages/ai_catalog_agents_new.vue';
 import AiCatalogAgentsDuplicate from '../pages/ai_catalog_agents_duplicate.vue';
@@ -16,6 +16,7 @@ import AiCatalogFlowsNew from '../pages/ai_catalog_flows_new.vue';
 import {
   AI_CATALOG_INDEX_ROUTE,
   AI_CATALOG_AGENTS_ROUTE,
+  AI_CATALOG_AGENTS_VIEW_ROUTE,
   AI_CATALOG_AGENTS_EDIT_ROUTE,
   AI_CATALOG_AGENTS_RUN_ROUTE,
   AI_CATALOG_AGENTS_NEW_ROUTE,
@@ -69,45 +70,44 @@ export const createRouter = (base) => {
             },
           },
           // Catch-all route for /agents/:id - redirect to /agents?show=:id
+          // {
+          //   path: ':id(\\d+)',
+          //   redirect: (to) => ({
+          //     path: '/agents',
+          //     query: { [AI_CATALOG_SHOW_QUERY_PARAM]: to.params.id },
+          //   }),
+          // },
           {
+            name: AI_CATALOG_AGENTS_VIEW_ROUTE,
             path: ':id(\\d+)',
-            redirect: (to) => ({
-              path: '/agents',
-              query: { [AI_CATALOG_SHOW_QUERY_PARAM]: to.params.id },
-            }),
+            component: AgentView,
           },
           {
-            path: ':id(\\d+)',
-            component: AiCatalogAgent,
-            children: [
-              {
-                name: AI_CATALOG_AGENTS_EDIT_ROUTE,
-                path: 'edit',
-                component: AiCatalogAgentsEdit,
-                beforeEnter: requireAuth,
-                meta: {
-                  text: s__('AICatalog|Edit agent'),
-                },
-              },
-              {
-                name: AI_CATALOG_AGENTS_RUN_ROUTE,
-                path: 'run',
-                component: AiCatalogAgentsRun,
-                beforeEnter: requireAuth,
-                meta: {
-                  text: s__('AICatalog|Run agent'),
-                },
-              },
-              {
-                name: AI_CATALOG_AGENTS_DUPLICATE_ROUTE,
-                path: 'duplicate',
-                component: AiCatalogAgentsDuplicate,
-                beforeEnter: requireAuth,
-                meta: {
-                  text: s__('AICatalog|Duplicate agent'),
-                },
-              },
-            ],
+            name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+            path: ':id(\\d+)/edit',
+            component: AgentEdit,
+            beforeEnter: requireAuth,
+            meta: {
+              text: s__('AICatalog|Edit agent'),
+            },
+          },
+          {
+            name: AI_CATALOG_AGENTS_RUN_ROUTE,
+            path: ':id(\\d+)/run',
+            component: AiCatalogAgentsRun,
+            beforeEnter: requireAuth,
+            meta: {
+              text: s__('AICatalog|Run agent'),
+            },
+          },
+          {
+            name: AI_CATALOG_AGENTS_DUPLICATE_ROUTE,
+            path: ':id(\\d+)/duplicate',
+            component: AiCatalogAgentsDuplicate,
+            beforeEnter: requireAuth,
+            meta: {
+              text: s__('AICatalog|Duplicate agent'),
+            },
           },
         ],
       },
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2744e5762cf80a..f89e22049b62fa 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2453,9 +2453,6 @@ msgstr ""
 msgid "AICatalog|AI Catalog"
 msgstr ""
 
-msgid "AICatalog|AI agents complete specialized tasks."
-msgstr ""
-
 msgid "AICatalog|Add this %{itemType} to a project"
 msgstr ""
 
@@ -2489,6 +2486,9 @@ msgstr ""
 msgid "AICatalog|Agents"
 msgstr ""
 
+msgid "AICatalog|Agents can be used in chat or flows"
+msgstr ""
+
 msgid "AICatalog|Always use latest version"
 msgstr ""
 
@@ -2645,6 +2645,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 ""
 
@@ -2705,6 +2708,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 ""
 
@@ -2732,6 +2738,9 @@ msgstr ""
 msgid "AICatalog|System prompt is required."
 msgstr ""
 
+msgid "AICatalog|Test"
+msgstr ""
+
 msgid "AICatalog|Test run"
 msgstr ""
 
@@ -2762,6 +2771,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 ""
 
-- 
GitLab


From ecfca773dcca035da8fce8dbd3751e58d1ed4af6 Mon Sep 17 00:00:00 2001
From: Florie Guibert <fguibert@gitlab.com>
Date: Thu, 18 Sep 2025 16:05:46 +1000
Subject: [PATCH 2/3] [Spike] UX changes to agent views

---
 .../javascripts/ai/catalog/components/ai_catalog_agent_form.vue  | 1 -
 1 file changed, 1 deletion(-)

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 79c6a79348bb91..3c957391bb823b 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
@@ -151,7 +151,6 @@ export default {
     },
 
     fields() {
-      console.log('PROJECT', this.formValues.projectId);
       const projectIdField = {
         projectId: {
           label: s__('AICatalog|Project'),
-- 
GitLab


From 7bec276984ae9c7e167a8b72da645ed0351d73aa Mon Sep 17 00:00:00 2001
From: Florie Guibert <fguibert@gitlab.com>
Date: Mon, 22 Sep 2025 14:20:49 +1000
Subject: [PATCH 3/3] Refactor agent form

---
 .../components/ai_catalog_agent_form.vue      | 163 ++++++++++++------
 .../ai/catalog/components/form_group.vue      |  45 +++++
 .../ai/catalog/components/form_section.vue    |   5 +
 3 files changed, 161 insertions(+), 52 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/form_group.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/form_section.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 3c957391bb823b..447ea712164140 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
@@ -4,7 +4,8 @@ import {
   GlAlert,
   GlButton,
   GlForm,
-  GlFormFields,
+  GlFormGroup,
+  GlFormInput,
   GlFormTextarea,
   GlTokenSelector,
   GlTooltipDirective,
@@ -29,6 +30,8 @@ import { AI_CATALOG_AGENTS_ROUTE, AI_CATALOG_AGENTS_EDIT_ROUTE } from '../router
 import { createFieldValidators } from '../utils';
 import aiCatalogBuiltInToolsQuery from '../graphql/queries/ai_catalog_built_in_tools.query.graphql';
 import AiCatalogFormButtons from './ai_catalog_form_buttons.vue';
+import FormGroup from './form_group.vue';
+import FormSection from './form_section.vue';
 import FormProjectDropdown from './form_project_dropdown.vue';
 import VisibilityLevelRadioGroup from './visibility_level_radio_group.vue';
 
@@ -38,9 +41,12 @@ export default {
     ErrorsAlert,
     AiCatalogFormButtons,
     FormProjectDropdown,
+    FormGroup,
+    FormSection,
     GlButton,
     GlForm,
-    GlFormFields,
+    GlFormGroup,
+    GlFormInput,
     GlFormTextarea,
     GlTokenSelector,
     PageHeading,
@@ -182,6 +188,11 @@ export default {
         ...projectIdField,
         name: {
           label: __('Name'),
+          id: 'agent-form-name',
+          validation: {
+            state: Boolean(this.formValues.name),
+            invalidFeedback: s__('AICatalog|Name is required.'),
+          },
           validators: createFieldValidators({
             requiredLabel: s__('AICatalog|Name is required.'),
             maxLength: MAX_LENGTH_NAME,
@@ -197,6 +208,10 @@ export default {
         },
         description: {
           label: __('Description'),
+          validation: {
+            state: Boolean(this.formValues.description),
+            invalidFeedback: s__('AICatalog|Description is required.'),
+          },
           validators: createFieldValidators({
             requiredLabel: s__('AICatalog|Description is required.'),
             maxLength: MAX_LENGTH_DESCRIPTION,
@@ -261,6 +276,11 @@ export default {
 
   methods: {
     handleSubmit() {
+      const isFormValid = this.validate();
+      if (!isFormValid) {
+        return;
+      }
+
       const transformedValues = {
         projectId: this.formValues.projectId,
         name: this.formValues.name.trim(),
@@ -301,6 +321,9 @@ export default {
 
       this.showTestRunWarning = true;
     },
+    validate() {
+      return this.$refs.field.validate();
+    },
   },
   indexRoute: AI_CATALOG_AGENTS_ROUTE,
   visibilityLevelTexts: {
@@ -386,58 +409,101 @@ export default {
     </gl-alert>
 
     <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"
-            :disabled="!isCreateMode"
-            @error="onError"
+    <gl-form :id="formId" @submit.prevent="handleSubmit">
+      <form-section>
+        <form-group
+          #default="{ state, blur }"
+          ref="field"
+          :field="fields.name"
+          :field-value="formValues.name"
+        >
+          <gl-form-input
+            id="agent-form-name"
+            v-model="formValues.name"
+            :data-testid="fields.name.inputAttrs['data-testid']"
+            :placeholder="fields.name.inputAttrs.placeholder"
+            :disabled="isViewMode"
+            :state="state"
+            required
+            @blur="blur"
           />
-        </template>
-        <template #input(description)="{ id, input, value, blur, validation }">
+        </form-group>
+        <gl-form-group
+          :label="fields.description.label"
+          :label-description="fields.description.groupAttrs.labelDescription"
+          label-for="agent-form-description"
+          :invalid-feedback="fields.description.validation.invalidFeedback"
+        >
           <gl-form-textarea
-            :id="id"
+            id="agent-form-description"
+            v-model="formValues.description"
             :no-resize="false"
             :placeholder="
               s__(
                 'AICatalog|This agent specializes in... It can help you with... Best suited for...',
               )
             "
-            :state="validation.state"
-            :value="value"
+            :state="fields.description.validation.state"
             :disabled="isViewMode"
             data-testid="agent-form-textarea-description"
-            @blur="blur"
-            @update="input"
           />
-        </template>
-        <template #input(systemPrompt)="{ id, input, value, blur, validation }">
+        </gl-form-group>
+      </form-section>
+      <form-section>
+        <gl-form-group
+          :label="fields.visibilityLevel.label"
+          :label-description="fields.visibilityLevel.groupAttrs.labelDescription"
+          label-for="agent-form-visibility-level"
+        >
+          <visibility-level-radio-group
+            id="agent-form-visibility-level"
+            v-model="formValues.visibilityLevel"
+            :is-edit-mode="isEditMode"
+            :initial-value="initialValues.public"
+            :texts="$options.visibilityLevelTexts"
+            :disabled="isViewMode"
+          />
+        </gl-form-group>
+        <gl-form-group
+          :label="fields.projectId.label"
+          :label-description="fields.projectId.groupAttrs.labelDescription"
+          label-for="agent-form-project-id"
+        >
+          <form-project-dropdown
+            id="agent-form-project-id"
+            v-model="formValues.projectId"
+            :disabled="!isCreateMode"
+            @error="onError"
+          />
+        </gl-form-group>
+      </form-section>
+      <form-section>
+        <gl-form-group
+          :label="fields.systemPrompt.label"
+          :label-description="fields.systemPrompt.groupAttrs.labelDescription"
+          label-for="agent-form-system-prompt"
+        >
           <gl-form-textarea
-            :id="id"
+            id="agent-form-system-prompt"
+            v-model="formValues.systemPrompt"
             :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"
             :disabled="isViewMode"
             data-testid="agent-form-textarea-system-prompt"
-            @blur="blur"
-            @update="input"
           />
-        </template>
-        <template #input(userPrompt)="{ id, input, value, blur, validation }">
+        </gl-form-group>
+        <gl-form-group
+          :label="fields.userPrompt.label"
+          :label-description="fields.userPrompt.groupAttrs.labelDescription"
+          label-for="agent-form-user-prompt"
+        >
           <gl-form-textarea
-            :id="id"
+            id="agent-form-user-prompt"
+            v-model="formValues.userPrompt"
             :no-resize="false"
             :placeholder="
               s__(
@@ -445,16 +511,21 @@ export default {
               )
             "
             :rows="10"
-            :state="validation.state"
-            :value="value"
             :disabled="isViewMode"
             data-testid="agent-form-textarea-user-prompt"
-            @blur="blur"
-            @update="input"
           />
-        </template>
-        <template #input(tools)>
+        </gl-form-group>
+      </form-section>
+      <form-section>
+        <gl-form-group
+          v-if="isToolsAvailable"
+          :label="fields.tools.label"
+          :label-description="fields.tools.groupAttrs.labelDescription"
+          :optional="true"
+          label-for="agent-form-tools"
+        >
           <gl-token-selector
+            id="agent-form-tools"
             :selected-tokens="selectedTools"
             :dropdown-items="filteredAvailableTools"
             :placeholder="s__('AICatalog|Search and select tools for this agent.')"
@@ -465,20 +536,8 @@ export default {
             @text-input="handleToolSearch"
             @keydown.enter.prevent
           />
-        </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"
-            :disabled="isViewMode"
-            @input="input"
-          />
-        </template>
-      </gl-form-fields>
+        </gl-form-group>
+      </form-section>
     </gl-form>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/form_group.vue b/ee/app/assets/javascripts/ai/catalog/components/form_group.vue
new file mode 100644
index 00000000000000..841c24ff1bd74e
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/form_group.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlFormGroup } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormGroup,
+  },
+  props: {
+    field: {
+      type: Object,
+      required: true,
+    },
+    fieldValue: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      state: '',
+    };
+  },
+  methods: {
+    validate() {
+      this.state = Boolean(this.fieldValue);
+      return this.state;
+    },
+    onBlur() {
+      this.validate();
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-group
+    :label="field.label"
+    :label-description="field.groupAttrs.labelDescription"
+    :label-for="field.id"
+    :invalid-feedback="field.validation.invalidFeedback"
+    :state="state"
+  >
+    <slot :state="state" :blur="onBlur"></slot>
+  </gl-form-group>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/form_section.vue b/ee/app/assets/javascripts/ai/catalog/components/form_section.vue
new file mode 100644
index 00000000000000..d3711f5f5415b3
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/form_section.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="gl-border gl-mb-5 gl-rounded-base gl-bg-subtle gl-p-5 gl-pb-0">
+    <slot></slot>
+  </div>
+</template>
-- 
GitLab