@gitlab/duo-ui 10.20.0 → 10.21.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.21.0](https://gitlab.com/gitlab-org/duo-ui/compare/v10.20.0...v10.21.0) (2025-09-11)
+
+
+### Features
+
+* Improve tool approval dialog UI ([d337427](https://gitlab.com/gitlab-org/duo-ui/commit/d33742757bb358add571ed9b2ae39c5c796b31d5))
+
 # [10.20.0](https://gitlab.com/gitlab-org/duo-ui/compare/v10.19.0...v10.20.0) (2025-09-05)
 
 

package/dist/components/chat/components/duo_chat_message_tool_approval/components/create_commit_tool_params.js

@@ -0,0 +1,148 @@
+import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { sprintf, translatePlural, translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'CreateCommitToolParams',
+  components: {
+    GlSprintf,
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock
+  },
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    branch: {
+      type: String,
+      required: true
+    },
+    startBranch: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    commitMessage: {
+      type: String,
+      required: true
+    },
+    actions: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    actionsCount() {
+      return this.actions.length;
+    },
+    actionsCountMessage() {
+      return sprintf(translatePlural('CreateCommitToolParams.actionsCountMessage', 'The commit contains %{count} file change.', 'The commit contains %{count} file changes.')(this.actionsCount), {
+        count: this.actionsCount
+      });
+    }
+  },
+  methods: {
+    getActionTitle(_ref) {
+      let {
+        action,
+        file_path: filePath,
+        previous_path: previousPath
+      } = _ref;
+      switch (action) {
+        case 'create':
+          return sprintf(this.$options.i18n.CREATE_FILE_ACTION_LABEL, {
+            filePath
+          });
+        case 'update':
+          return sprintf(this.$options.i18n.UPDATE_FILE_ACTION_LABEL, {
+            filePath
+          });
+        case 'delete':
+          return sprintf(this.$options.i18n.DELETE_FILE_ACTION_LABEL, {
+            filePath
+          });
+        case 'move':
+          return sprintf(this.$options.i18n.MOVE_FILE_ACTION_LABEL, {
+            filePath: previousPath
+          });
+        case 'chmod':
+          return sprintf(this.$options.i18n.CHMOD_FILE_ACTION_LABEL, {
+            filePath
+          });
+        default:
+          return sprintf(this.$options.i18n.UNKNOWN_FILE_ACTION_LABEL, {
+            filePath
+          });
+      }
+    },
+    getActionContent(_ref2) {
+      let {
+        action,
+        content,
+        encoding
+      } = _ref2;
+      if (!['create', 'update'].includes(action)) {
+        return this.$options.i18n.ACTION_WITH_NO_CONTENT;
+      }
+      return (!encoding || encoding === 'text') && content ? content : '';
+    }
+  },
+  i18n: {
+    COMMIT_SUMMARY_MESSAGE: translate('CreateCommitToolParams.commitSummaryMessage', 'Create a commit in the branch %{branch} and project %{project}.'),
+    READ_COMMIT_MESSAGE: translate('CreateCommitToolParams.readCommitMessage', 'Read commit message'),
+    CREATE_FILE_ACTION_LABEL: translate('CreateCommitToolParams.createFileActionLabel', 'Create file %{filePath}'),
+    UPDATE_FILE_ACTION_LABEL: translate('CreateCommitToolParams.updateFileActionLabel', 'Update file %{filePath}'),
+    DELETE_FILE_ACTION_LABEL: translate('CreateCommitToolParams.deleteFileActionLabel', 'Delete file %{filePath}'),
+    MOVE_FILE_ACTION_LABEL: translate('CreateCommitToolParams.moveFileActionLabel', 'Move file %{filePath}'),
+    CHMOD_FILE_ACTION_LABEL: translate('CreateCommitToolParams.chmodFileActionLabel', 'Change permissions for file %{filePath}'),
+    UNKNOWN_FILE_ACTION_LABEL: translate('CreateCommitToolParams.unknownFileActionLabel', 'Modify file %{filePath}'),
+    ACTION_WITH_NO_CONTENT: translate('CreateCommitToolParams.actionWithNoContent', 'This action does not have any content.'),
+    EXPAND_CHANGES: translate('CreateCommitToolParams.expandFileChanges', 'Expand file changes')
+  }
+};
+
+/* 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',{staticClass:"gl-flex gl-flex-col"},[_c('div',[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.COMMIT_SUMMARY_MESSAGE},scopedSlots:_vm._u([{key:"project",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.projectPath || _vm.projectId))])]},proxy:true},{key:"branch",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.branch))])]},proxy:true}])}),_vm._v("\n    "+_vm._s(_vm.actionsCountMessage)+"\n  ")],1),_vm._v(" "),_c('gl-accordion',{staticClass:"-gl-ml-2 gl-mt-3",attrs:{"header-level":3}},[_c('gl-accordion-item',{attrs:{"title":_vm.$options.i18n.READ_COMMIT_MESSAGE}},[_c('pre-block',[_vm._v(_vm._s(_vm.commitMessage))])],1),_vm._v(" "),_c('gl-accordion-item',{attrs:{"title":_vm.$options.i18n.EXPAND_CHANGES}},[_c('gl-accordion',{attrs:{"header-level":4}},_vm._l((_vm.actions),function(action,index){return _c('gl-accordion-item',{key:index,attrs:{"title":_vm.getActionTitle(action)}},[_c('pre-block',[_vm._v(_vm._s(_vm.getActionContent(action)))])],1)}),1)],1)],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__;

package/dist/components/chat/components/duo_chat_message_tool_approval/components/create_issue_tool_params.js

@@ -0,0 +1,88 @@
+import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'CreateIssueToolParams',
+  components: {
+    GlSprintf,
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock
+  },
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    },
+    labels: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    issueMessage() {
+      const baseMessage = this.$options.i18n.ISSUE_SUMMARY_MESSAGE_BASE;
+      const labelsMessage = this.$options.i18n.ISSUE_SUMMARY_MESSAGE_WITH_LABELS;
+      return this.labels ? `${baseMessage} ${labelsMessage}` : baseMessage;
+    }
+  },
+  i18n: {
+    ISSUE_SUMMARY_MESSAGE_BASE: translate('CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_BASE', 'Open an issue with title "%{title}" in project %{project}.'),
+    ISSUE_SUMMARY_MESSAGE_WITH_LABELS: translate('CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_WITH_LABELS', 'Assign the labels %{labels}.'),
+    ACCORDION_TITLE: translate('CreateIssueToolParams.ACCORDION_TITLE', 'Read description')
+  }
+};
+
+/* 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',{staticClass:"gl-flex gl-flex-col"},[_c('div',[_c('gl-sprintf',{attrs:{"message":_vm.issueMessage},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('em',[_vm._v(_vm._s(_vm.title))])]},proxy:true},{key:"project",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.projectPath || _vm.projectId))])]},proxy:true},{key:"labels",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.labels))])]},proxy:true}])})],1),_vm._v(" "),_c('gl-accordion',{staticClass:"-gl-ml-2 gl-mt-3",attrs:{"header-level":3}},[_c('gl-accordion-item',{attrs:{"title":_vm.$options.i18n.ACCORDION_TITLE}},[_c('pre-block',[_vm._v(_vm._s(_vm.description))])],1)],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__;

package/dist/components/chat/components/duo_chat_message_tool_approval/components/create_merge_request_tool_params.js

@@ -0,0 +1,83 @@
+import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'CreateMergeRequestToolParams',
+  components: {
+    GlSprintf,
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock
+  },
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    sourceBranch: {
+      type: String,
+      required: true
+    },
+    targetBranch: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    }
+  },
+  i18n: {
+    MERGE_REQUEST_SUMMARY_MESSAGE: translate('CreateMergeRequestToolParams.MERGE_REQUEST_SUMMARY_MESSAGE', 'Open a merge request with title "%{title}" in project %{project} from branch %{sourceBranch} to branch %{targetBranch}.'),
+    ACCORDION_TITLE: translate('CreateMergeRequestToolParams.ACCORDION_TITLE', 'Read description')
+  }
+};
+
+/* 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',{staticClass:"gl-flex gl-flex-col"},[_c('div',[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.MERGE_REQUEST_SUMMARY_MESSAGE},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('em',[_vm._v(_vm._s(_vm.title))])]},proxy:true},{key:"project",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.projectPath || _vm.projectId))])]},proxy:true},{key:"sourceBranch",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.sourceBranch))])]},proxy:true},{key:"targetBranch",fn:function(){return [_c('code',[_vm._v(_vm._s(_vm.targetBranch))])]},proxy:true}])})],1),_vm._v(" "),_c('gl-accordion',{staticClass:"-gl-ml-2 gl-mt-3",attrs:{"header-level":3}},[_c('gl-accordion-item',{attrs:{"title":_vm.$options.i18n.ACCORDION_TITLE}},[_c('pre-block',[_vm._v(_vm._s(_vm.description))])],1)],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__;

package/dist/components/chat/components/duo_chat_message_tool_approval/components/pre_block.js

@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('pre',{staticClass:"gl-border gl-grid gl-text-pretty gl-rounded-lg gl-border-strong gl-bg-strong gl-p-5 gl-font-monospace"},[_c('code',[_vm._t("default")],2)])};
+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_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/chat/components/duo_chat_message_tool_approval/components/run_command_tool_params.js

@@ -0,0 +1,62 @@
+import { GlIcon } from '@gitlab/ui';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'RunCommandToolParams',
+  components: {
+    GlIcon
+  },
+  props: {
+    program: {
+      type: String,
+      required: true
+    },
+    args: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    formattedCommand() {
+      return `${this.program} ${this.args}`;
+    }
+  }
+};
+
+/* 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',{staticClass:"gl-flex gl-items-center gl-gap-3"},[_c('gl-icon',{attrs:{"name":"terminal"}}),_vm._v(" "),_c('code',[_vm._v(_vm._s(_vm.formattedCommand))])],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__;

package/dist/components/chat/components/duo_chat_message_tool_approval/message_tool_approval.js

@@ -1,14 +1,24 @@
-import { GlButton, GlIcon, GlFormTextarea, GlFormGroup } from '@gitlab/ui';
+import { GlButton, GlCard, GlFormTextarea, GlFormGroup, GlBadge } from '@gitlab/ui';
 import { translate } from '../../../../utils/i18n';
+import { convertKeysToCamelCase } from '../../../../utils/object';
+import CreateCommitToolParams from './components/create_commit_tool_params';
+import CreateIssueToolParams from './components/create_issue_tool_params';
+import CreateMergeRequestToolParams from './components/create_merge_request_tool_params';
+import RunCommandToolParams from './components/run_command_tool_params';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const APPROVAL_TOOL_NAMES = {
+  createCommit: 'create_commit',
+  createIssue: 'create_issue',
+  createMergeRequest: 'create_merge_request',
+  runCommand: 'run_command'
+};
 const PROCESSING_STATE = {
   APPROVING: 'approving',
   DENYING: 'denying',
   NONE: null
 };
 const i18n = {
-  TOOL_APPROVAL_TITLE: translate('MessageToolApproval.toolApprovalTitle', 'Duo would like to execute a tool. Do you want to proceed?'),
   TOOL_APPROVAL_DESCRIPTION: translate('MessageToolApproval.toolApprovalDescription', 'GitLab Duo Agentic Chat wants to execute a tool. Do you want to proceed?'),
   TOOL_LABEL: translate('MessageToolApproval.toolLabel', 'Tool:'),
   TOOL_UNKNOWN: translate('MessageToolApproval.toolUnknown', 'Unknown'),
@@ -20,15 +30,33 @@ const i18n = {
   REQUEST_TEXT: translate('MessageToolApproval.parametersText', 'Request'),
   DENIAL_REASON_LABEL: translate('MessageToolApproval.denialReasonLabel', 'Rejection reason'),
   DENIAL_REASON_PLACEHOLDER: translate('MessageToolApproval.denialReasonPlaceholder', "Tell Duo why you're rejecting this tool execution..."),
-  CANCEL_TEXT: translate('MessageToolApproval.cancelText', 'Cancel')
+  CANCEL_TEXT: translate('MessageToolApproval.cancelText', 'Cancel'),
+  TOOL_APPROVAL_TITLES: {
+    [APPROVAL_TOOL_NAMES.createCommit]: translate('MessageToolApproval.createCommit', 'Duo wants to push a commit.'),
+    [APPROVAL_TOOL_NAMES.createIssue]: translate('MessageToolApproval.createIssue', 'Duo wants to open an issue.'),
+    [APPROVAL_TOOL_NAMES.createMergeRequest]: translate('MessageToolApproval.createMergeRequest', 'Duo wants to create a merge request.'),
+    [APPROVAL_TOOL_NAMES.runCommand]: translate('MessageToolApproval.runCommand', 'Duo wants to run a command.')
+  },
+  TOOL_STATUS: translate('MessageToolApproval.toolStatus', 'Pending')
+};
+const TOOL_PARAMS_VIEW_COMPONENTS = {
+  [APPROVAL_TOOL_NAMES.createCommit]: 'CreateCommitToolParams',
+  [APPROVAL_TOOL_NAMES.createIssue]: 'CreateIssueToolParams',
+  [APPROVAL_TOOL_NAMES.createMergeRequest]: 'CreateMergeRequestToolParams',
+  [APPROVAL_TOOL_NAMES.runCommand]: 'RunCommandToolParams'
 };
 var script = {
   name: 'MessageToolApproval',
   components: {
     GlButton,
-    GlIcon,
+    GlCard,
     GlFormTextarea,
-    GlFormGroup
+    GlFormGroup,
+    GlBadge,
+    CreateCommitToolParams,
+    CreateIssueToolParams,
+    CreateMergeRequestToolParams,
+    RunCommandToolParams
   },
   props: {
     message: {
@@ -57,9 +85,15 @@ var script = {
       var _this$message2, _this$message2$tool_i;
       return ((_this$message2 = this.message) === null || _this$message2 === void 0 ? void 0 : (_this$message2$tool_i = _this$message2.tool_info) === null || _this$message2$tool_i === void 0 ? void 0 : _this$message2$tool_i.args) || {};
     },
+    camelCaseToolParameters() {
+      return convertKeysToCamelCase(this.toolParameters);
+    },
     hasToolParameters() {
       return Object.keys(this.toolParameters).length > 0;
     },
+    toolApprovalTitle() {
+      return i18n.TOOL_APPROVAL_TITLES[this.toolName];
+    },
     isApproving() {
       return this.isProcessing && this.localProcessingState === PROCESSING_STATE.APPROVING;
     },
@@ -74,6 +108,9 @@ var script = {
     },
     denyButtonText() {
       return this.isDenying ? this.$options.i18n.DENYING_TEXT : this.$options.i18n.DENY_TEXT;
+    },
+    toolParamsViewComponent() {
+      return TOOL_PARAMS_VIEW_COMPONENTS[this.toolName];
     }
   },
   watch: {
@@ -111,14 +148,15 @@ var script = {
       this.denialReason = '';
     }
   },
-  i18n
+  i18n,
+  APPROVAL_TOOL_NAMES
 };
 
 /* 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',{staticClass:"md gl-border gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-transparent gl-bg-subtle gl-p-4 gl-leading-20 gl-text-default gl-break-anywhere"},[_c('p',{staticClass:"gl-mb-3 gl-text-gray-700"},[_vm._v("\n    "+_vm._s(_vm.$options.i18n.TOOL_APPROVAL_TITLE)+"\n  ")]),_vm._v(" "),_c('div',{staticClass:"gl-mb-3 gl-flex gl-items-center gl-gap-2"},[_c('gl-icon',{staticClass:"gl-text-gray-500",attrs:{"name":"work-item-maintenance"}}),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.toolName))])],1),_vm._v(" "),_c('div',{staticClass:"gl-border gl-mb-4 gl-rounded-base gl-border-gray-200 gl-bg-gray-50 gl-p-3"},[_c('p',{staticClass:"gl-mb-1 gl-text-sm gl-text-gray-500"},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.REQUEST_TEXT)+"\n    ")]),_vm._v(" "),(_vm.hasToolParameters)?_c('code',{staticClass:"gl-whitespace-pre-wrap gl-text-sm gl-text-default gl-font-monospace",attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(_vm.toolParameters, null, 2)))]):_c('span',{staticClass:"gl-text-sm gl-text-gray-500",attrs:{"data-testid":"no-parameters-message"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.NO_PARAMETERS_TEXT)+"\n    ")])]),_vm._v(" "),(!_vm.showDenialReason)?_c('div',{staticClass:"gl-flex gl-justify-between"},[_c('gl-button',{attrs:{"variant":"danger","size":"small","icon":"cancel","data-testid":"deny-tool-inline","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.handleDeny}},[_vm._v("\n      "+_vm._s(_vm.denyButtonText)+"\n    ")]),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","size":"small","icon":"play","data-testid":"approve-tool-inline","disabled":_vm.buttonsDisabled,"loading":_vm.isApproving},on:{"click":_vm.handleApprove}},[_vm._v("\n      "+_vm._s(_vm.approveButtonText)+"\n    ")])],1):_c('div',{staticClass:"gl-mt-3"},[_c('gl-form-group',{staticClass:"gl-mb-3",attrs:{"label":_vm.$options.i18n.DENIAL_REASON_LABEL,"label-for":"inline-rejection-reason","optional":true}},[_c('gl-form-textarea',{attrs:{"id":"inline-rejection-reason","placeholder":_vm.$options.i18n.DENIAL_REASON_PLACEHOLDER,"rows":2,"no-resize":true,"submit-on-enter":false,"disabled":_vm.buttonsDisabled,"data-testid":"denial-reason-textarea","autofocus":""},on:{"submit":_vm.submitDenial},model:{value:(_vm.denialReason),callback:function ($$v) {_vm.denialReason=$$v;},expression:"denialReason"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"size":"small","data-testid":"cancel-denial","disabled":_vm.buttonsDisabled},on:{"click":_vm.cancelDenial}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CANCEL_TEXT)+"\n      ")]),_vm._v(" "),_c('gl-button',{attrs:{"variant":"danger","size":"small","icon":"cancel","data-testid":"submit-denial","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.submitDenial}},[_vm._v("\n        "+_vm._s(_vm.denyButtonText)+"\n      ")])],1)],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-flex gl-items-center gl-justify-between"},[_c('span',[_vm._v("\n        "+_vm._s(_vm.toolApprovalTitle)+"\n      ")]),_vm._v(" "),_c('gl-badge',[_vm._v("\n        "+_vm._s(_vm.$options.i18n.TOOL_STATUS)+"\n      ")])],1)]},proxy:true},{key:"footer",fn:function(){return [(!_vm.showDenialReason)?_c('div',{staticClass:"gl-flex gl-gap-2"},[_c('gl-button',{attrs:{"variant":"confirm","size":"small","data-testid":"approve-tool-inline","disabled":_vm.buttonsDisabled,"loading":_vm.isApproving},on:{"click":_vm.handleApprove}},[_vm._v("\n        "+_vm._s(_vm.approveButtonText)+"\n      ")]),_vm._v(" "),_c('gl-button',{attrs:{"size":"small","data-testid":"deny-tool-inline","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.handleDeny}},[_vm._v("\n        "+_vm._s(_vm.denyButtonText)+"\n      ")])],1):_c('div',[_c('gl-form-group',{staticClass:"gl-mb-3",attrs:{"label":_vm.$options.i18n.DENIAL_REASON_LABEL,"label-for":"inline-rejection-reason","optional":true}},[_c('gl-form-textarea',{attrs:{"id":"inline-rejection-reason","placeholder":_vm.$options.i18n.DENIAL_REASON_PLACEHOLDER,"rows":2,"no-resize":true,"submit-on-enter":false,"disabled":_vm.buttonsDisabled,"data-testid":"denial-reason-textarea","autofocus":""},on:{"submit":_vm.submitDenial},model:{value:(_vm.denialReason),callback:function ($$v) {_vm.denialReason=$$v;},expression:"denialReason"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"size":"small","data-testid":"submit-denial","variant":"confirm","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.submitDenial}},[_vm._v("\n          "+_vm._s(_vm.denyButtonText)+"\n        ")]),_vm._v(" "),_c('gl-button',{attrs:{"size":"small","data-testid":"cancel-denial","disabled":_vm.buttonsDisabled},on:{"click":_vm.cancelDenial}},[_vm._v("\n          "+_vm._s(_vm.$options.i18n.CANCEL_TEXT)+"\n        ")])],1)],1)]},proxy:true}])},[_vm._v(" "),(_vm.toolParamsViewComponent)?_c(_vm.toolParamsViewComponent,_vm._b({tag:"component",staticClass:"gl-leading-20"},'component',_vm.camelCaseToolParameters,false)):_c('div',{staticClass:"md gl-border gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-transparent gl-bg-subtle gl-p-4 gl-leading-20 gl-text-default gl-break-anywhere"},[_c('div',{staticClass:"gl-border gl-mb-4 gl-rounded-base gl-border-gray-200 gl-bg-gray-50 gl-p-3"},[_c('p',{staticClass:"gl-mb-1 gl-text-sm gl-text-gray-500"},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.REQUEST_TEXT)+"\n      ")]),_vm._v(" "),(_vm.hasToolParameters)?_c('code',{staticClass:"gl-whitespace-pre-wrap gl-text-sm gl-text-default gl-font-monospace",attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(_vm.toolParameters, null, 2)))]):_c('span',{staticClass:"gl-text-sm gl-text-gray-500",attrs:{"data-testid":"no-parameters-message"}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.NO_PARAMETERS_TEXT)+"\n      ")])])])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -151,4 +189,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { PROCESSING_STATE, i18n };
+export { APPROVAL_TOOL_NAMES, PROCESSING_STATE, i18n };

package/dist/components/chat/mock_data.js

@@ -146,6 +146,90 @@ const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS = {
   status: 'success',
   role: 'request'
 };
+const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST = {
+  id: '125',
+  content: 'Tool create_merge_request requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_merge_request',
+    args: {
+      project_id: 123,
+      source_branch: 'rename-all-spec-files',
+      target_branch: 'main',
+      title: 'Rename all the *.spec.ts files to *.test.ts',
+      description: '## What does this MR do?\n\nThis MR updates the `group` field in the `web_ide_language_server` beta feature flag configuration from `group::remote development` to `group:: editor extensions`.\n\n## Related issues\n\nThis change aligns the feature flag with the correct group ownership.\n\n## Changes made\n\n- Updated `config/feature_flags/beta/web_ide_language_server.yml`\n- Changed group field from `group::remote development` to `group:: editor extensions`\n\n## Checklist\n\n- [x] Feature flag configuration updated\n- [x] Group field correctly set to `group:: editor extensions`'
+    }
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request'
+};
+const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND = {
+  id: '125',
+  content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'run_command',
+    args: {
+      program: 'ls',
+      args: '-a | grep package.json'
+    }
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request'
+};
+const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE = {
+  id: '125',
+  content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_issue',
+    args: {
+      project_id: 123,
+      title: 'CSP bug in VSCode Fork prevents loading external web views in Web IDE',
+      description: "## Problem\n\nThe VSCode Fork implementation has a Content Security Policy (CSP) bug that prevents external web views from loading properly in the Web IDE.\n\n## Impact\n\n- External web views fail to load within the Web IDE environment\n- This affects functionality that relies on embedding external content\n- Users may experience broken or non-functional web view components\n\n## Expected Behavior\n\nExternal web views should load successfully within the Web IDE when permitted by security policies.\n\n## Current Behavior\n\nExternal web views are blocked due to CSP restrictions in the VSCode Fork implementation.\n\n## Technical Details\n\nThis appears to be related to how the VSCode Fork handles Content Security Policy headers, which may be overly restrictive for the Web IDE's use case with external web views.\n\n## Next Steps\n\n- [ ] Investigate the specific CSP directives causing the issue\n- [ ] Determine which external domains/resources need to be allowlisted\n- [ ] Implement appropriate CSP modifications in the VSCode Fork\n- [ ] Test the fix with various external web view scenarios\n- [ ] Ensure security implications are properly evaluated",
+      labels: 'bug,web-ide,vscode-fork,csp,security'
+    }
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request'
+};
+const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT = {
+  id: '125',
+  content: 'Tool create_commit requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_commit',
+    args: {
+      project_id: 35104827,
+      branch: 'feat/add-web-ide-duo-chat-package',
+      start_branch: 'main',
+      commit_message: 'feat: add web-ide-duo-chat package with TypeScript setup\n\n- Create new package @gitlab/web-ide-duo-chat\n- Set up TypeScript configuration following project patterns\n- Add src directory with index.ts entry point\n- Configure package.json with workspace dependencies\n- Add package reference to root tsconfig.json',
+      actions: [{
+        action: 'create',
+        file_path: 'packages/web-ide-duo-chat/package.json',
+        content: '{\n  "name": "@gitlab/web-ide-duo-chat",\n  "version": "0.0.1",\n  "main": "./src/index.ts",\n  "license": "MIT",\n  "packageManager": "yarn@3.2.0",\n  "devDependencies": {\n    "@gitlab/utils-test": "workspace:*"\n  },\n  "dependencies": {\n    "@gitlab/logger": "workspace:*",\n    "@gitlab/web-ide-types": "workspace:*"\n  },\n  "publishConfig": {\n    "main": "./lib/index.js"\n  }\n}\n'
+      }, {
+        action: 'create',
+        file_path: 'packages/web-ide-duo-chat/src/types.ts',
+        content: "/**\n * Represents a chat message in the Duo Chat interface\n */\nexport interface ChatMessage {\n  /**\n   * Unique identifier for the message\n   */\n  id: string;\n  /**\n   * The content of the message\n   */\n  content: string;\n  /**\n   * Who sent the message\n   */\n  sender: 'user' | 'assistant';\n  /**\n   * Timestamp when the message was created\n   */\n  timestamp: Date;\n  /**\n   * Optional metadata for the message\n   */\n  metadata?: Record<string, unknown>;\n}\n\n/**\n * Represents a chat conversation\n */\nexport interface ChatConversation {\n  /**\n   * Unique identifier for the conversation\n   */\n  id: string;\n  /**\n   * Title of the conversation\n   */\n  title: string;\n  /**\n   * Messages in the conversation\n   */\n  messages: ChatMessage[];\n  /**\n   * When the conversation was created\n   */\n  createdAt: Date;\n  /**\n   * When the conversation was last updated\n   */\n  updatedAt: Date;\n}\n\n/**\n * Event types for Duo Chat\n */\nexport type DuoChatEvent = \n  | { type: 'message-sent'; payload: ChatMessage }\n  | { type: 'message-received'; payload: ChatMessage }\n  | { type: 'conversation-started'; payload: ChatConversation }\n  | { type: 'conversation-ended'; payload: { conversationId: string } }\n  | { type: 'error'; payload: { error: Error; context?: string } };\n\n/**\n * Callback function for handling Duo Chat events\n */\nexport type DuoChatEventHandler = (event: DuoChatEvent) => void;\n\n/**\n * Interface for Duo Chat service providers\n */\nexport interface DuoChatProvider {\n  /**\n   * Send a message and get a response\n   */\n  sendMessage(message: string, conversationId?: string): Promise<ChatMessage>;\n  /**\n   * Start a new conversation\n   */\n  startConversation(title?: string): Promise<ChatConversation>;\n  /**\n   * Get conversation history\n   */\n  getConversation(conversationId: string): Promise<ChatConversation | null>;\n  /**\n   * List all conversations\n   */\n  listConversations(): Promise<ChatConversation[]>;\n}\n"
+      }, {
+        action: 'update',
+        file_path: 'tsconfig.json',
+        content: '{\n  "extends": "./tsconfig.base.json",\n  "references": [\n    { "path": "./packages/example" },\n    { "path": "./packages/gitlab-api-client" },\n    { "path": "./packages/gitlab-api-client-factory" },\n    { "path": "./packages/logger" },\n    { "path": "./packages/oauth-client" },\n    { "path": "./packages/utils-crypto" },\n    { "path": "./packages/utils-escape" },\n    { "path": "./packages/utils-test" },\n    { "path": "./packages/utils-path" },\n    { "path": "./packages/vscode-bootstrap" },\n    { "path": "./packages/vscode-mediator-commands" },\n    { "path": "./packages/web-ide" },\n    { "path": "./packages/web-ide-duo-chat" },\n    { "path": "./packages/web-ide-fs" },\n    { "path": "./packages/web-ide-types" },\n    { "path": "./packages/web-ide-interop" },\n    { "path": "./packages/vscode-extension-web-ide" },\n    { "path": "./packages/cross-origin-channel" },\n    { "path": "./packages/cloudflare" }\n  ],\n  "files": []\n}\n'
+      }, {
+        action: 'move',
+        file_path: 'yarn.lock',
+        previous_path: 'yarn.lock.bkp'
+      }]
+    }
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'assistant'
+};
 const MOCK_WORKFLOW_END_MESSAGE = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",
@@ -458,4 +542,4 @@ const AGENTIC_THREADLIST = [{
   }
 }];
 
-export { AGENTIC_THREADLIST, INCLUDE_SLASH_COMMAND, MOCK_AGENT_MESSAGE, MOCK_REQUEST_MESSAGE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_TOOL_MESSAGE, MOCK_TOOL_MESSAGE_WITH_LINK, MOCK_USER_PROMPT_MESSAGE, MOCK_WORKFLOW_END_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };
+export { AGENTIC_THREADLIST, INCLUDE_SLASH_COMMAND, MOCK_AGENT_MESSAGE, MOCK_REQUEST_MESSAGE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_TOOL_MESSAGE, MOCK_TOOL_MESSAGE_WITH_LINK, MOCK_USER_PROMPT_MESSAGE, MOCK_WORKFLOW_END_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };