@gitlab/ui 94.4.2 → 94.5.0

package/src/components/base/new_dropdowns/dropdown.scss

@@ -4,7 +4,7 @@
 
   .gl-new-dropdown-custom-toggle {
     *:first-child {
-      @include gl-cursor-pointer;
+      @apply gl-cursor-pointer;
 
       &:focus {
         @apply gl-focus;
@@ -17,7 +17,7 @@
     @apply gl-bg-white;
     @apply gl-border-1 gl-border-solid gl-border-gray-200;
     @apply gl-rounded-lg;
-    @include gl-shadow-md;
+    @apply gl-shadow-md;
     top: 0;
     left: 0;
     min-width: $gl-new-dropdown-min-width;
@@ -71,7 +71,7 @@
   }
 
   .gl-new-dropdown-button-text {
-    @include gl-mr-auto;
+    @apply gl-mr-auto;
     @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
   }

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -1,5 +1,5 @@
 .gl-new-dropdown-item {
-  @include gl-cursor-pointer;
+  @apply gl-cursor-pointer;
   @apply gl-px-2;
   @apply gl-my-1;
 
@@ -109,7 +109,7 @@
     }
 
     .gl-new-dropdown-item-text-wrapper {
-      @include gl-min-w-0;
+      @apply gl-min-w-0;
       @apply gl-grow;
       @apply gl-py-3;
     }

package/src/components/base/pagination/pagination.scss

@@ -51,7 +51,7 @@
       @apply gl-border-blue-500;
       @apply gl-text-white;
       @apply gl-z-2;
-      @include gl-shadow-none;
+      @apply gl-shadow-none;
 
       &:focus {
         @include gl-focus();

package/src/components/base/path/path.scss

@@ -41,7 +41,7 @@ $path-chevron-right-margin: px-to-rem(14px);
   }
 
   .gl-path-nav-list-item {
-    @include gl-min-w-fit-content;
+    @apply gl-min-w-fit;
     padding-top: 1px;
     padding-bottom: 1px;
 
@@ -56,7 +56,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     @apply gl-py-3;
     @apply gl-flex;
     @apply gl-text-base;
-    @include gl-z-index-0;
+    @apply gl-z-0;
     @apply gl-font-bold;
     @apply gl-leading-normal;
     @apply gl-rounded-tl-base;
@@ -120,7 +120,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     }
 
     &:disabled {
-      @include gl-cursor-not-allowed;
+      @apply gl-cursor-not-allowed;
       background-color: var(--gl-color-alpha-0);
       box-shadow: none;
       color: var(--gl-action-disabled-foreground-color);

package/src/components/base/popover/popover.scss

@@ -5,7 +5,7 @@ $gl-popover-max-width: $grid-size * 35;
 .gl-popover {
   max-width: $gl-popover-max-width;
   @apply gl-border-none;
-  @include gl-shadow-md;
+  @apply gl-shadow-md;
   @apply gl-text-sm;
 
   &,

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -43,7 +43,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   @apply gl-leading-normal;
   @apply gl-pl-7;
   @apply gl-py-4;
-  @include gl-shadow-none;
+  @apply gl-shadow-none;
   @apply gl-w-full;
   border-radius: 0;
   padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});

package/src/components/base/segmented_control/segmented_control.scss

@@ -29,7 +29,7 @@
 
 .gl-segmented-control {
   label:not(.disabled) {
-    @include gl-cursor-pointer;
+    @apply gl-cursor-pointer;
   }
 
   .btn-gl-segmented-button {
@@ -86,8 +86,8 @@
     &[disabled]:hover {
       @apply gl-text-gray-400;
       @include gl-inset-border-y-1-gray-200;
-      @include gl-z-index-0;
-      @include gl-cursor-not-allowed;
+      @apply gl-z-0;
+      @apply gl-cursor-not-allowed;
 
       &:first-child {
         @include gl-btn-gl-segmented-button-first;

package/src/components/base/skeleton_loader/skeleton_loader.scss

@@ -4,7 +4,7 @@
 
 .gl-skeleton-loader {
   stop {
-    @include gl-opacity-10;
+    @apply gl-opacity-10;
   }
 
   .background-stop {

package/src/components/base/tabs/tabs/tabs.scss

@@ -47,12 +47,12 @@
   }
 
   &.disabled {
-    @include gl-pointer-events-auto;
-    @include gl-cursor-not-allowed;
+    @apply gl-pointer-events-auto;
+    @apply gl-cursor-not-allowed;
     color: var(--gl-action-disabled-foreground-color);
 
     &:hover {
-      @include gl-shadow-none;
+      @apply gl-shadow-none;
     }
   }
 
@@ -160,5 +160,5 @@
 .gl-scrollable-tabs-nav {
   @apply gl-overflow-hidden;
   position: relative;
-  @include gl-flex-nowrap;
+  @apply gl-flex-nowrap;
 }

package/src/components/base/toast/toast.scss

@@ -52,7 +52,7 @@
     @apply gl-text-base;
     @apply gl-whitespace-nowrap;
     @apply gl-font-bold;
-    @include gl-cursor-pointer;
+    @apply gl-cursor-pointer;
   }
 
   .gl-toast-close-button {

package/src/components/base/toggle/toggle.scss

@@ -28,10 +28,10 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-inline-flex;
 
   &.is-disabled {
-    @include gl-cursor-not-allowed;
+    @apply gl-cursor-not-allowed;
 
     .gl-toggle {
-      @include gl-cursor-not-allowed;
+      @apply gl-cursor-not-allowed;
       @apply gl-bg-gray-200;
 
       .toggle-icon > svg {
@@ -85,7 +85,7 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-items-center;
   @apply gl-justify-center;
   @apply gl-border-0;
-  @include gl-cursor-pointer;
+  @apply gl-cursor-pointer;
   @apply gl-bg-gray-600;
   position: relative;
   width: $toggle-width;

package/src/components/charts/heatmap/heatmap.scss

@@ -2,6 +2,6 @@
   position: relative;
 
   .gl-legend-inline-series {
-    @include gl-pointer-events-none;
+    @apply gl-pointer-events-none;
   }
 }

package/src/components/charts/legend/legend.scss

@@ -29,7 +29,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
 .gl-legend-inline {
     @apply gl-flex;
-    @include gl-flex-wrap;
+    @apply gl-flex-wrap;
     @apply gl-shrink-0;
 
   .gl-legend-inline-series {
@@ -40,7 +40,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @apply gl-pr-5;
 
     &:hover {
-      @include gl-cursor-pointer;
+      @apply gl-cursor-pointer;
       @apply gl-underline;
     }
 

package/src/components/charts/tooltip/tooltip.scss

@@ -2,7 +2,7 @@
   position: absolute;
 
   > .popover {
-    @include gl-min-w-0;
+    @apply gl-min-w-0;
     @apply gl-w-max;
     max-width: $chart-tooltip-max-width;
   }

package/src/components/experimental/duo/chat/components/duo_chat_context/constants.js

@@ -1,3 +1,7 @@
 export const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
 export const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 export const CONTEXT_ITEM_CATEGORY_FILE = 'file';
+export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
+
+export const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
+export const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue

@@ -1,21 +1,25 @@
 <script>
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';
 import {
   categoryValidator,
   contextItemValidator,
+  formatGitItemSecondaryText,
   formatIssueId,
   formatMergeRequestId,
+  getContextItemIcon,
 } from '../utils';
 import {
+  CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlIcon, GlDuoChatContextItemPopover },
+  components: { GlTruncate, GlIcon, GlDuoChatContextItemPopover },
   props: {
     category: {
       type: Object,
@@ -40,18 +44,23 @@ export default {
           return formatIssueId(this.contextItem.metadata.iid);
         case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
           return formatMergeRequestId(this.contextItem.metadata.iid);
+        case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
+          return formatGitItemSecondaryText(this.contextItem);
         default:
           return '';
       }
     },
+    icon() {
+      return getContextItemIcon(this.contextItem, this.category);
+    },
   },
 };
 </script>
 <template>
   <div class="gl-flex gl-flex-col">
     <div class="gl-flex gl-items-center">
-      <gl-icon :name="category.icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
-      <span>{{ title }}</span>
+      <gl-icon :name="icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
+      <gl-truncate :text="title" class="gl-min-w-0" data-testid="item-title" />
       <gl-icon
         :id="`info-icon-${contextItem.id}`"
         name="information-o"
@@ -64,8 +73,12 @@ export default {
         placement="left"
       />
     </div>
-    <div class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary">
-      {{ secondaryText }}
+    <div
+      v-if="secondaryText"
+      class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
+      data-testid="item-secondary-text"
+    >
+      <gl-truncate :text="secondaryText" />
     </div>
   </div>
 </template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -1,18 +1,27 @@
 <script>
-import GlPopover from '../../../../../../base/popover/popover.vue';
+import GlAlert from '../../../../../../base/alert/alert.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';
+import GlPopover from '../../../../../../base/popover/popover.vue';
+import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import { translate } from '../../../../../../../utils/i18n';
 import {
+  CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
-import { formatIssueId, formatMergeRequestId } from '../utils';
-import GlAlert from '../../../../../../base/alert/alert.vue';
+import {
+  formatGitItemSecondaryText,
+  formatIssueId,
+  formatMergeRequestId,
+  getContextItemIcon,
+  getContextItemTypeLabel,
+} from '../utils';
 
 export default {
   name: 'DuoChatContextItemPopover',
   components: {
+    GlTruncate,
     GlAlert,
     GlIcon,
     GlPopover,
@@ -69,6 +78,11 @@ export default {
     filePathArray() {
       return this.filePath?.split('/');
     },
+    gitDetails() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT
+        ? formatGitItemSecondaryText(this.contextItem)
+        : null;
+    },
     isEnabled() {
       return this.contextItem.metadata.enabled !== false;
     },
@@ -79,24 +93,10 @@ export default {
         : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
     },
     iconName() {
-      switch (this.contextItem.category) {
-        case 'merge_request':
-          return 'merge-request';
-        case 'issue':
-          return 'issues';
-        default:
-          return 'project';
-      }
+      return getContextItemIcon(this.contextItem);
     },
     itemTypeLabel() {
-      switch (this.contextItem.category) {
-        case 'merge_request':
-          return translate('DuoChatContextItemPopover.MergeRequest', 'Merge request');
-        case 'issue':
-          return translate('DuoChatContextItemPopover.Issue', 'Issue');
-        default:
-          return translate('DuoChatContextItemPopover.File', 'Project file');
-      }
+      return getContextItemTypeLabel(this.contextItem);
     },
   },
   methods: {
@@ -118,25 +118,27 @@ export default {
           class="gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1"
           data-testid="chat-context-popover-title"
         >
-          {{ contextItem.metadata.title }}
+          {{ title }}
         </div>
-        <div class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
+        <div v-if="itemTypeLabel" class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
       </div>
     </template>
     <div>
-      <div v-if="filePath !== null">
-        <gl-icon name="document" :size="12" variant="subtle" class="gl-mr-1" /><span
-          class="gl-break-all"
-          >{{ contextItem.metadata.project }}</span
-        ><span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
+      <div v-if="filePath">
+        <gl-icon name="document" :size="12" variant="subtle" />
+        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
+        <span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
       </div>
+      <div v-else-if="gitDetails" class="gl-flex gl-items-center" data-testid="git-details">
+        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
+        <gl-truncate :text="gitDetails" class="gl-min-w-0" />
+      </div>
       <div v-else>
-        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1" /><span
-          class="gl-break-all"
-          >{{ contextItem.metadata.project }}</span
-        ><span v-if="id !== null" class="gl-break-all">{{ formattedId }}</span>
+        <gl-icon v-if="iconName" :name="iconName" :size="12" variant="subtle" />
+        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
+        <span v-if="id" class="gl-break-all">{{ formattedId }}</span>
       </div>
       <gl-alert
         v-if="!isEnabled"

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -2,17 +2,14 @@
 import uniqueId from 'lodash/uniqueId';
 import GlIcon from '../../../../../../base/icon/icon.vue';
 import GlToken from '../../../../../../base/token/token.vue';
+import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
-import {
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_CATEGORY_FILE,
-} from '../constants';
-import { contextItemsValidator } from '../utils';
+import { contextItemsValidator, getContextItemIcon } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
   components: {
+    GlTruncate,
     GlIcon,
     GlDuoChatContextItemPopover,
     GlToken,
@@ -78,14 +75,7 @@ export default {
     },
   },
   methods: {
-    getIconName(category) {
-      const iconMap = {
-        [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
-        [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
-        [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
-      };
-      return iconMap[category] || 'document';
-    },
+    getContextItemIcon,
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
@@ -122,13 +112,21 @@ export default {
         :key="item.id"
         :view-only="!removable"
         variant="default"
-        class="gl-mb-2 gl-mr-2"
+        class="gl-mb-2 gl-mr-2 gl-max-w-full"
         :class="tokenVariantClasses"
         @close="onRemoveItem(item)"
       >
-        <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
-          <gl-icon :name="getIconName(item.category)" :size="12" class="gl-mr-1" />
-          {{ item.metadata.title }}
+        <div
+          :id="`context-item-${item.id}-${selectionsId}`"
+          class="gl-flex gl-min-w-0 gl-items-center"
+        >
+          <gl-icon
+            v-if="getContextItemIcon(item)"
+            :name="getContextItemIcon(item)"
+            :size="12"
+            class="gl-mr-1"
+          />
+          <gl-truncate :text="item.metadata.title" position="middle" />
         </div>
         <gl-duo-chat-context-item-popover
           :context-item="item"

package/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -2,10 +2,12 @@ import {
   CONTEXT_ITEM_CATEGORY_ISSUE,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
 } from './constants';
 
 export const MOCK_CATEGORIES = [
   { label: 'Files', value: CONTEXT_ITEM_CATEGORY_FILE, icon: 'document' },
+  { label: 'Local Git', value: CONTEXT_ITEM_CATEGORY_LOCAL_GIT, icon: 'git' },
   { label: 'Issues', value: CONTEXT_ITEM_CATEGORY_ISSUE, icon: 'issues' },
   { label: 'Merge Requests', value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, icon: 'merge-request' },
 ];
@@ -126,8 +128,69 @@ const mockMergeRequests = [
   MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
 ];
 
+export const MOCK_CONTEXT_ITEM_GIT_DIFF = {
+  id: '6d88b466-0c38-48d6-b271-deda47f97cee',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'Current working changes',
+    commitId: 'main',
+    repositoryName: 'example/garden',
+    gitType: 'diff',
+  },
+};
+export const MOCK_CONTEXT_ITEM_GIT_COMMIT = {
+  id: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'fix: some bug fix commit',
+    commitId: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+    repositoryName: 'example/garden',
+    gitType: 'commit',
+  },
+};
+
+const mockGitItems = [
+  MOCK_CONTEXT_ITEM_GIT_DIFF,
+  {
+    id: 'diff-example/garden',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'Diff from default branch',
+      commitId: 'main',
+      repositoryName: 'example/garden',
+      gitType: 'diff',
+    },
+  },
+  MOCK_CONTEXT_ITEM_GIT_COMMIT,
+  {
+    id: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'feat: add cool new feature',
+      commitId: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+      repositoryName: 'example/garden',
+      gitType: 'commit',
+    },
+  },
+  {
+    id: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'fix: stop foo from bar when baz because customers ding',
+      commitId: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+      repositoryName: 'example/garden',
+      gitType: 'commit',
+    },
+  },
+];
+
 export const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
 
   // put disabled items in the back
   const disabledItems = allItems.filter((item) => !item.metadata.enabled);

package/src/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -1,3 +1,13 @@
+import { translate } from '../../../../../../utils/i18n';
+import {
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_LOCAL_GIT_COMMIT,
+  CONTEXT_ITEM_LOCAL_GIT_DIFF,
+} from './constants';
+
 export function categoryValidator(category) {
   return Boolean(category && category.value && category.label && category.icon);
 }
@@ -42,6 +52,71 @@ export function formatMergeRequestId(iid) {
   return `!${iid}`;
 }
 
+function getGitItemIcon(contextItem) {
+  const iconMap = {
+    [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
+    [CONTEXT_ITEM_LOCAL_GIT_DIFF]: 'comparison',
+  };
+  const { gitType } = contextItem.metadata;
+  return iconMap[gitType] || null;
+}
+
+/**
+ * Gets the icon name for a given contextItem.
+ */
+export function getContextItemIcon(contextItem, category = { icon: null }) {
+  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+    const gitIcon = getGitItemIcon(contextItem);
+    if (gitIcon) return gitIcon;
+  }
+
+  if (category.icon) {
+    return category.icon;
+  }
+
+  const iconMap = {
+    [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
+    [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
+    [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
+    [CONTEXT_ITEM_CATEGORY_LOCAL_GIT]: 'git',
+  };
+
+  return iconMap[contextItem.category] || null;
+}
+
+export function getContextItemTypeLabel(contextItem) {
+  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+    switch (contextItem.metadata.gitType) {
+      case CONTEXT_ITEM_LOCAL_GIT_DIFF:
+        return translate('DuoChatContextItemTypeLabel.GitDiff', 'Local Git repository diff');
+      case CONTEXT_ITEM_LOCAL_GIT_COMMIT:
+        return translate('DuoChatContextItemTypeLabel.GitCommit', 'Local Git repository commit');
+      default:
+        return translate('DuoChatContextItemTypeLabel.GitDefault', 'Local Git repository');
+    }
+  }
+
+  switch (contextItem.category) {
+    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+      return translate('DuoChatContextItemTypeLabel.MergeRequest', 'Merge request');
+    case CONTEXT_ITEM_CATEGORY_ISSUE:
+      return translate('DuoChatContextItemTypeLabel.Issue', 'Issue');
+    case CONTEXT_ITEM_CATEGORY_FILE:
+      return translate('DuoChatContextItemTypeLabel.File', 'Project file');
+    default:
+      return '';
+  }
+}
+
+/**
+ * Gets the secondary text line for a git context item, showing repository and commit ID
+ */
+export function formatGitItemSecondaryText(contextItem) {
+  const { repositoryName, commitId } = contextItem.metadata;
+  const separator = commitId ? ' - ' : '';
+  return `${repositoryName}${separator}${commitId || ''}`;
+}
+
 /**
  * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
  * @param {number} currentIndex - The starting index.

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -7,7 +7,7 @@
   }
 
   .text-enter {
-    @include gl-opacity-0;
+    @apply gl-opacity-0;
   }
 
   .text-enter-active {
@@ -15,11 +15,11 @@
   }
 
   .text-enter-to {
-    @include gl-opacity-10;
+    @apply gl-opacity-10;
   }
 
   .text-leave {
-    @include gl-opacity-10;
+    @apply gl-opacity-10;
   }
 
   .text-leave-active {
@@ -27,7 +27,7 @@
   }
 
   .text-leave-to {
-    @include gl-opacity-0;
+    @apply gl-opacity-0;
   }
 
   &__dot {