@gitlab/duo-ui 8.21.0 → 8.22.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [8.22.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.21.0...v8.22.0) (2025-06-18)
+
+
+### Features
+
+* **agentic-chat:** add tool approval flow component ([60630a0](https://gitlab.com/gitlab-org/duo-ui/commit/60630a09dd2f41e0eb4c8d9c9d45ae130f9e996f))
+
 # [8.21.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.20.0...v8.21.0) (2025-06-09)
 
 

package/dist/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow.js

@@ -0,0 +1,133 @@
+import { translate } from '../../../../utils/i18n';
+import AgenticToolApprovalModal from './agentic_tool_approval_modal/agentic_tool_approval_modal';
+import AgenticToolRejectionModal from './agentic_tool_rejection_modal/agentic_tool_rejection_modal';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  DEFAULT_DESCRIPTION: translate('AgenticToolApprovalFlow.defaultDescription', 'Duo Workflow wants to execute a tool. Do you want to proceed?')
+};
+const MODAL_TYPES = {
+  APPROVAL: 'approval',
+  REJECTION: 'rejection'
+};
+var script = {
+  name: 'AgenticToolApprovalFlow',
+  components: {
+    AgenticToolApprovalModal,
+    AgenticToolRejectionModal
+  },
+  props: {
+    /**
+     * Controls the visibility of the approval flow
+     */
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Details about the tool to be executed
+     * @property {string} name - The name of the tool
+     * @property {Object} parameters - The parameters to be passed to the tool
+     */
+    toolDetails: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: value => {
+        return typeof value === 'object' && value !== null;
+      }
+    },
+    /**
+     * Custom description text for the approval request
+     */
+    description: {
+      type: String,
+      required: false,
+      default: i18n.DEFAULT_DESCRIPTION
+    }
+  },
+  data() {
+    return {
+      currentModal: MODAL_TYPES.APPROVAL
+    };
+  },
+  computed: {
+    showApprovalModal() {
+      return this.visible && this.currentModal === MODAL_TYPES.APPROVAL;
+    },
+    showRejectionModal() {
+      return this.visible && this.currentModal === MODAL_TYPES.REJECTION;
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (!newVal) {
+        this.currentModal = MODAL_TYPES.APPROVAL;
+      }
+    }
+  },
+  methods: {
+    handleApprove() {
+      /**
+       * Emitted when the user approves the tool execution
+       */
+      this.$emit('approve');
+    },
+    handleInitialDeny() {
+      this.currentModal = MODAL_TYPES.REJECTION;
+    },
+    handleForceDeny() {
+      this.$emit('deny', null);
+    },
+    handleRejectionSubmit(message) {
+      /**
+       * Emitted when the user denies the tool execution with an optional reason
+       * @param {string|null} reason - The rejection reason provided by the user
+       */
+      this.$emit('deny', message);
+    },
+    handleBack() {
+      this.currentModal = MODAL_TYPES.APPROVAL;
+    }
+  },
+  i18n
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-testid":"agentic-tool-approval-flow"}},[_c('agentic-tool-approval-modal',{attrs:{"visible":_vm.showApprovalModal,"tool-details":_vm.toolDetails,"description":_vm.description},on:{"approve":_vm.handleApprove,"deny":_vm.handleInitialDeny,"deny-force":_vm.handleForceDeny}}),_vm._v(" "),_c('agentic-tool-rejection-modal',{attrs:{"visible":_vm.showRejectionModal},on:{"submit":_vm.handleRejectionSubmit,"back":_vm.handleBack}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_modal/agentic_tool_approval_modal.js

@@ -0,0 +1,137 @@
+import { GlModal } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  TITLE: translate('AgenticToolApprovalModal.title', 'Tool Approval Required'),
+  DEFAULT_DESCRIPTION: translate('AgenticToolApprovalModal.defaultDescription', 'Duo Workflow wants to execute a tool. Do you want to proceed?'),
+  TOOL_LABEL: translate('AgenticToolApprovalModal.toolLabel', 'Tool:'),
+  TOOL_UNKNOWN: translate('AgenticToolApprovalModal.toolUnknown', 'Unknown'),
+  APPROVE_TEXT: translate('AgenticToolApprovalModal.approveText', 'Approve'),
+  DENY_TEXT: translate('AgenticToolApprovalModal.denyText', 'Deny')
+};
+var script = {
+  name: 'AgenticToolApprovalModal',
+  components: {
+    GlModal
+  },
+  props: {
+    /**
+     * Controls the visibility of the modal
+     */
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Details about the tool to be executed
+     * @property {string} name - The name of the tool
+     * @property {Object} parameters - The parameters to be passed to the tool
+     */
+    toolDetails: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: value => {
+        return typeof value === 'object' && value !== null;
+      }
+    },
+    /**
+     * Custom description text for the approval request
+     */
+    description: {
+      type: String,
+      required: false,
+      default: i18n.DEFAULT_DESCRIPTION
+    }
+  },
+  computed: {
+    approveAction() {
+      return {
+        text: this.$options.i18n.APPROVE_TEXT,
+        attributes: {
+          variant: 'confirm',
+          icon: 'play',
+          size: 'small',
+          'data-testid': 'approve-tool'
+        }
+      };
+    },
+    denyAction() {
+      return {
+        text: this.$options.i18n.DENY_TEXT,
+        attributes: {
+          variant: 'danger',
+          icon: 'cancel',
+          size: 'small',
+          'data-testid': 'deny-tool'
+        }
+      };
+    },
+    toolName() {
+      var _this$toolDetails;
+      return ((_this$toolDetails = this.toolDetails) === null || _this$toolDetails === void 0 ? void 0 : _this$toolDetails.name) || this.$options.i18n.TOOL_UNKNOWN;
+    }
+  },
+  methods: {
+    handleApprove() {
+      /**
+       * Emitted when the user approves the tool execution
+       */
+      this.$emit('approve');
+    },
+    handleDeny() {
+      /**
+       * Emitted when the user denies the tool execution
+       */
+      this.$emit('deny');
+    },
+    handleModalHide(event) {
+      // If the modal is being hidden by the X button or ESC key,
+      // treat it as a deny-force action
+      if (event.trigger !== 'ok' && event.trigger !== 'cancel') {
+        this.$emit('deny-force');
+      }
+    }
+  },
+  i18n
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"visible":_vm.visible,"modal-id":"agentic-tool-approval-modal","title":_vm.$options.i18n.TITLE,"action-primary":_vm.approveAction,"action-cancel":_vm.denyAction,"no-close-on-backdrop":true,"no-close-on-esc":true,"data-testid":"agentic-tool-approval-modal"},on:{"primary":_vm.handleApprove,"canceled":_vm.handleDeny,"hide":_vm.handleModalHide}},[_c('div',{staticClass:"gl-mb-4"},[_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"approval-description"}},[_vm._v("\n      "+_vm._s(_vm.description)+"\n    ")]),_vm._v(" "),(_vm.toolDetails)?_c('div',{staticClass:"gl-bg-gray-10 gl-p-3 gl-rounded-base gl-mb-3",attrs:{"data-testid":"tool-details"}},[_c('strong',[_vm._v(_vm._s(_vm.$options.i18n.TOOL_LABEL)+" "+_vm._s(_vm.toolName))]),_vm._v(" "),(_vm.toolDetails.parameters)?_c('pre',{staticClass:"gl-mt-2 gl-mb-0 gl-text-inherit",attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(_vm.toolDetails.parameters, null, 2)))]):_vm._e()]):_vm._e()])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_rejection_modal/agentic_tool_rejection_modal.js

@@ -0,0 +1,128 @@
+import { GlModal, GlFormTextarea, GlFormGroup } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  TITLE: translate('AgenticToolRejectionModal.title', 'Provide Rejection Reason'),
+  DESCRIPTION: translate('AgenticToolRejectionModal.description', 'You are about to reject the tool execution. Would you like to provide a reason?'),
+  LABEL: translate('AgenticToolRejectionModal.label', 'Rejection reason'),
+  PLACEHOLDER: translate('AgenticToolRejectionModal.placeholder', "Explain why you're rejecting this tool execution..."),
+  SUBMIT_TEXT: translate('AgenticToolRejectionModal.submitText', 'Submit Rejection'),
+  BACK_TEXT: translate('AgenticToolRejectionModal.backText', 'Back')
+};
+var script = {
+  name: 'AgenticToolRejectionModal',
+  components: {
+    GlModal,
+    GlFormTextarea,
+    GlFormGroup
+  },
+  props: {
+    /**
+     * Controls the visibility of the modal
+     */
+    visible: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      rejectionMessage: ''
+    };
+  },
+  computed: {
+    submitAction() {
+      return {
+        text: this.$options.i18n.SUBMIT_TEXT,
+        attributes: {
+          variant: 'danger',
+          icon: 'cancel',
+          size: 'small',
+          'data-testid': 'submit-rejection'
+        }
+      };
+    },
+    backAction() {
+      return {
+        text: this.$options.i18n.BACK_TEXT,
+        attributes: {
+          variant: 'default',
+          icon: 'chevron-left',
+          size: 'small',
+          'data-testid': 'back-button'
+        }
+      };
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (!newVal) {
+        this.rejectionMessage = '';
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      /**
+       * Emitted when the user submits the rejection reason
+       * @param {string|null} reason - The rejection reason provided by the user, or null if empty
+       */
+      this.$emit('submit', this.rejectionMessage || null);
+      this.rejectionMessage = '';
+    },
+    handleBack() {
+      /**
+       * Emitted when the user clicks the back button to return to the approval modal
+       */
+      this.$emit('back');
+    },
+    handleModalHide(event) {
+      // If the modal is being hidden by the X button or ESC key,
+      // treat it as a deny-force action
+      if (event.trigger !== 'ok' && event.trigger !== 'cancel') {
+        this.handleBack();
+      }
+    }
+  },
+  i18n
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"visible":_vm.visible,"modal-id":"agentic-tool-rejection-modal","title":_vm.$options.i18n.TITLE,"action-primary":_vm.submitAction,"action-secondary":_vm.backAction,"no-close-on-backdrop":true,"no-close-on-esc":true,"data-testid":"agentic-tool-rejection-modal"},on:{"primary":_vm.handleSubmit,"secondary":_vm.handleBack,"hide":_vm.handleModalHide}},[_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"rejection-description"}},[_vm._v("\n    "+_vm._s(_vm.$options.i18n.DESCRIPTION)+"\n  ")]),_vm._v(" "),_c('gl-form-group',{staticClass:"gl-mb-0",attrs:{"label":_vm.$options.i18n.LABEL,"label-for":"rejection-message","optional":true}},[_c('gl-form-textarea',{attrs:{"id":"rejection-message","placeholder":_vm.$options.i18n.PLACEHOLDER,"rows":3,"max-rows":6,"resize":false,"data-testid":"rejection-message-input","autofocus":""},model:{value:(_vm.rejectionMessage),callback:function ($$v) {_vm.rejectionMessage=$$v;},expression:"rejectionMessage"}})],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as InputRequestedMessage } from './components/chat/components/d
 export { default as SystemMessage } from './components/chat/components/duo_chat_message/message_types/message_tool';
 export { default as WorkflowEndMessage } from './components/chat/components/duo_chat_message/message_types/message_workflow_end';
 export { default as AgenticDuoChat } from './components/agentic_chat/agentic_duo_chat';
+export { default as AgenticToolApprovalFlow } from './components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow';
 export { default as DuoChatContextItemDetailsModal } from './components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 export { default as DuoChatContextItemMenu } from './components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu';
 export { default as DuoChatContextItemPopover } from './components/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.21.0",
+  "version": "8.22.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -97,7 +97,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@gitlab/eslint-plugin": "20.7.1",
+    "@gitlab/eslint-plugin": "21.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "^3.135.0",
@@ -155,8 +155,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.52.0",
-    "playwright-core": "^1.52.0",
+    "playwright": "^1.53.0",
+    "playwright-core": "^1.53.0",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow.md

@@ -0,0 +1,18 @@
+The component provides a complete tool approval flow for Agentic Duo Chat.
+
+It orchestrates a two-step approval process where users can approve tool execution
+or deny it with an optional rejection reason.
+
+## Usage
+
+To use the component, import it and add it to the `template` part of your consumer component.
+
+```html
+<agentic-tool-approval-flow
+  :visible="showApproval"
+  :tool-details="toolDetails"
+  :description="customDescription"
+  @approve="handleApprove"
+  @deny="handleDeny"
+/>
+```

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow.vue

@@ -0,0 +1,119 @@
+<script>
+import { translate } from '../../../../utils/i18n';
+import AgenticToolApprovalModal from './agentic_tool_approval_modal/agentic_tool_approval_modal.vue';
+import AgenticToolRejectionModal from './agentic_tool_rejection_modal/agentic_tool_rejection_modal.vue';
+
+export const i18n = {
+  DEFAULT_DESCRIPTION: translate(
+    'AgenticToolApprovalFlow.defaultDescription',
+    'Duo Workflow wants to execute a tool. Do you want to proceed?'
+  ),
+};
+
+const MODAL_TYPES = {
+  APPROVAL: 'approval',
+  REJECTION: 'rejection',
+};
+
+export default {
+  name: 'AgenticToolApprovalFlow',
+  components: {
+    AgenticToolApprovalModal,
+    AgenticToolRejectionModal,
+  },
+  props: {
+    /**
+     * Controls the visibility of the approval flow
+     */
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Details about the tool to be executed
+     * @property {string} name - The name of the tool
+     * @property {Object} parameters - The parameters to be passed to the tool
+     */
+    toolDetails: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: (value) => {
+        return typeof value === 'object' && value !== null;
+      },
+    },
+    /**
+     * Custom description text for the approval request
+     */
+    description: {
+      type: String,
+      required: false,
+      default: i18n.DEFAULT_DESCRIPTION,
+    },
+  },
+  data() {
+    return {
+      currentModal: MODAL_TYPES.APPROVAL,
+    };
+  },
+  computed: {
+    showApprovalModal() {
+      return this.visible && this.currentModal === MODAL_TYPES.APPROVAL;
+    },
+    showRejectionModal() {
+      return this.visible && this.currentModal === MODAL_TYPES.REJECTION;
+    },
+  },
+  watch: {
+    visible(newVal) {
+      if (!newVal) {
+        this.currentModal = MODAL_TYPES.APPROVAL;
+      }
+    },
+  },
+  methods: {
+    handleApprove() {
+      /**
+       * Emitted when the user approves the tool execution
+       */
+      this.$emit('approve');
+    },
+    handleInitialDeny() {
+      this.currentModal = MODAL_TYPES.REJECTION;
+    },
+    handleForceDeny() {
+      this.$emit('deny', null);
+    },
+    handleRejectionSubmit(message) {
+      /**
+       * Emitted when the user denies the tool execution with an optional reason
+       * @param {string|null} reason - The rejection reason provided by the user
+       */
+      this.$emit('deny', message);
+    },
+    handleBack() {
+      this.currentModal = MODAL_TYPES.APPROVAL;
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <div data-testid="agentic-tool-approval-flow">
+    <agentic-tool-approval-modal
+      :visible="showApprovalModal"
+      :tool-details="toolDetails"
+      :description="description"
+      @approve="handleApprove"
+      @deny="handleInitialDeny"
+      @deny-force="handleForceDeny"
+    />
+
+    <agentic-tool-rejection-modal
+      :visible="showRejectionModal"
+      @submit="handleRejectionSubmit"
+      @back="handleBack"
+    />
+  </div>
+</template>

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_modal/agentic_tool_approval_modal.vue

@@ -0,0 +1,138 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+
+export const i18n = {
+  TITLE: translate('AgenticToolApprovalModal.title', 'Tool Approval Required'),
+  DEFAULT_DESCRIPTION: translate(
+    'AgenticToolApprovalModal.defaultDescription',
+    'Duo Workflow wants to execute a tool. Do you want to proceed?'
+  ),
+  TOOL_LABEL: translate('AgenticToolApprovalModal.toolLabel', 'Tool:'),
+  TOOL_UNKNOWN: translate('AgenticToolApprovalModal.toolUnknown', 'Unknown'),
+  APPROVE_TEXT: translate('AgenticToolApprovalModal.approveText', 'Approve'),
+  DENY_TEXT: translate('AgenticToolApprovalModal.denyText', 'Deny'),
+};
+
+export default {
+  name: 'AgenticToolApprovalModal',
+  components: {
+    GlModal,
+  },
+  props: {
+    /**
+     * Controls the visibility of the modal
+     */
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Details about the tool to be executed
+     * @property {string} name - The name of the tool
+     * @property {Object} parameters - The parameters to be passed to the tool
+     */
+    toolDetails: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: (value) => {
+        return typeof value === 'object' && value !== null;
+      },
+    },
+    /**
+     * Custom description text for the approval request
+     */
+    description: {
+      type: String,
+      required: false,
+      default: i18n.DEFAULT_DESCRIPTION,
+    },
+  },
+  computed: {
+    approveAction() {
+      return {
+        text: this.$options.i18n.APPROVE_TEXT,
+        attributes: {
+          variant: 'confirm',
+          icon: 'play',
+          size: 'small',
+          'data-testid': 'approve-tool',
+        },
+      };
+    },
+    denyAction() {
+      return {
+        text: this.$options.i18n.DENY_TEXT,
+        attributes: {
+          variant: 'danger',
+          icon: 'cancel',
+          size: 'small',
+          'data-testid': 'deny-tool',
+        },
+      };
+    },
+    toolName() {
+      return this.toolDetails?.name || this.$options.i18n.TOOL_UNKNOWN;
+    },
+  },
+  methods: {
+    handleApprove() {
+      /**
+       * Emitted when the user approves the tool execution
+       */
+      this.$emit('approve');
+    },
+    handleDeny() {
+      /**
+       * Emitted when the user denies the tool execution
+       */
+      this.$emit('deny');
+    },
+    handleModalHide(event) {
+      // If the modal is being hidden by the X button or ESC key,
+      // treat it as a deny-force action
+      if (event.trigger !== 'ok' && event.trigger !== 'cancel') {
+        this.$emit('deny-force');
+      }
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="visible"
+    modal-id="agentic-tool-approval-modal"
+    :title="$options.i18n.TITLE"
+    :action-primary="approveAction"
+    :action-cancel="denyAction"
+    :no-close-on-backdrop="true"
+    :no-close-on-esc="true"
+    data-testid="agentic-tool-approval-modal"
+    @primary="handleApprove"
+    @canceled="handleDeny"
+    @hide="handleModalHide"
+  >
+    <div class="gl-mb-4">
+      <p class="gl-mb-3" data-testid="approval-description">
+        {{ description }}
+      </p>
+
+      <div
+        v-if="toolDetails"
+        class="gl-bg-gray-10 gl-p-3 gl-rounded-base gl-mb-3"
+        data-testid="tool-details"
+      >
+        <strong>{{ $options.i18n.TOOL_LABEL }} {{ toolName }}</strong>
+        <pre
+          v-if="toolDetails.parameters"
+          class="gl-mt-2 gl-mb-0 gl-text-inherit"
+          data-testid="tool-parameters"
+          >{{ JSON.stringify(toolDetails.parameters, null, 2) }}</pre
+        >
+      </div>
+    </div>
+  </gl-modal>
+</template>

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_rejection_modal/agentic_tool_rejection_modal.vue

@@ -0,0 +1,134 @@
+<script>
+import { GlModal, GlFormTextarea, GlFormGroup } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+
+export const i18n = {
+  TITLE: translate('AgenticToolRejectionModal.title', 'Provide Rejection Reason'),
+  DESCRIPTION: translate(
+    'AgenticToolRejectionModal.description',
+    'You are about to reject the tool execution. Would you like to provide a reason?'
+  ),
+  LABEL: translate('AgenticToolRejectionModal.label', 'Rejection reason'),
+  PLACEHOLDER: translate(
+    'AgenticToolRejectionModal.placeholder',
+    "Explain why you're rejecting this tool execution..."
+  ),
+  SUBMIT_TEXT: translate('AgenticToolRejectionModal.submitText', 'Submit Rejection'),
+  BACK_TEXT: translate('AgenticToolRejectionModal.backText', 'Back'),
+};
+
+export default {
+  name: 'AgenticToolRejectionModal',
+  components: {
+    GlModal,
+    GlFormTextarea,
+    GlFormGroup,
+  },
+  props: {
+    /**
+     * Controls the visibility of the modal
+     */
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      rejectionMessage: '',
+    };
+  },
+  computed: {
+    submitAction() {
+      return {
+        text: this.$options.i18n.SUBMIT_TEXT,
+        attributes: {
+          variant: 'danger',
+          icon: 'cancel',
+          size: 'small',
+          'data-testid': 'submit-rejection',
+        },
+      };
+    },
+    backAction() {
+      return {
+        text: this.$options.i18n.BACK_TEXT,
+        attributes: {
+          variant: 'default',
+          icon: 'chevron-left',
+          size: 'small',
+          'data-testid': 'back-button',
+        },
+      };
+    },
+  },
+  watch: {
+    visible(newVal) {
+      if (!newVal) {
+        this.rejectionMessage = '';
+      }
+    },
+  },
+  methods: {
+    handleSubmit() {
+      /**
+       * Emitted when the user submits the rejection reason
+       * @param {string|null} reason - The rejection reason provided by the user, or null if empty
+       */
+      this.$emit('submit', this.rejectionMessage || null);
+      this.rejectionMessage = '';
+    },
+    handleBack() {
+      /**
+       * Emitted when the user clicks the back button to return to the approval modal
+       */
+      this.$emit('back');
+    },
+    handleModalHide(event) {
+      // If the modal is being hidden by the X button or ESC key,
+      // treat it as a deny-force action
+      if (event.trigger !== 'ok' && event.trigger !== 'cancel') {
+        this.handleBack();
+      }
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="visible"
+    modal-id="agentic-tool-rejection-modal"
+    :title="$options.i18n.TITLE"
+    :action-primary="submitAction"
+    :action-secondary="backAction"
+    :no-close-on-backdrop="true"
+    :no-close-on-esc="true"
+    data-testid="agentic-tool-rejection-modal"
+    @primary="handleSubmit"
+    @secondary="handleBack"
+    @hide="handleModalHide"
+  >
+    <p class="gl-mb-3" data-testid="rejection-description">
+      {{ $options.i18n.DESCRIPTION }}
+    </p>
+    <gl-form-group
+      :label="$options.i18n.LABEL"
+      label-for="rejection-message"
+      :optional="true"
+      class="gl-mb-0"
+    >
+      <gl-form-textarea
+        id="rejection-message"
+        v-model="rejectionMessage"
+        :placeholder="$options.i18n.PLACEHOLDER"
+        :rows="3"
+        :max-rows="6"
+        :resize="false"
+        data-testid="rejection-message-input"
+        autofocus
+      />
+    </gl-form-group>
+  </gl-modal>
+</template>

package/src/index.js

@@ -20,6 +20,7 @@ export { default as WorkflowEndMessage } from './components/chat/components/duo_
 
 // Agentic Duo Chat component
 export { default as AgenticDuoChat } from './components/agentic_chat/agentic_duo_chat.vue';
+export { default as AgenticToolApprovalFlow } from './components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow.vue';
 
 // Duo Chat Context components
 export { default as DuoChatContextItemDetailsModal } from './components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';

package/translations.js

@@ -15,6 +15,22 @@ export default {
   'AgenticDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
   'AgenticDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'AgenticDuoChat.chatSubmitLabel': 'Send chat message.',
+  'AgenticToolApprovalFlow.defaultDescription':
+    'Duo Workflow wants to execute a tool. Do you want to proceed?',
+  'AgenticToolApprovalModal.approveText': 'Approve',
+  'AgenticToolApprovalModal.defaultDescription':
+    'Duo Workflow wants to execute a tool. Do you want to proceed?',
+  'AgenticToolApprovalModal.denyText': 'Deny',
+  'AgenticToolApprovalModal.title': 'Tool Approval Required',
+  'AgenticToolApprovalModal.toolLabel': 'Tool:',
+  'AgenticToolApprovalModal.toolUnknown': 'Unknown',
+  'AgenticToolRejectionModal.backText': 'Back',
+  'AgenticToolRejectionModal.description':
+    'You are about to reject the tool execution. Would you like to provide a reason?',
+  'AgenticToolRejectionModal.label': 'Rejection reason',
+  'AgenticToolRejectionModal.placeholder': "Explain why you're rejecting this tool execution...",
+  'AgenticToolRejectionModal.submitText': 'Submit Rejection',
+  'AgenticToolRejectionModal.title': 'Provide Rejection Reason',
   'DuoChat.chatBackLabel': 'Back to history',
   'DuoChat.chatBackToChatToolTip': 'Back to chat',
   'DuoChat.chatCancelLabel': 'Cancel',