From c964374fc2e1eb474451abc129bf43d4290cbf93 Mon Sep 17 00:00:00 2001
From: aregnery <aregnery@gitlab.com>
Date: Wed, 3 Sep 2025 13:58:00 -0400
Subject: [PATCH 1/4] Add bootup modal [skip ci]

---
 .../components/duo_agent_onboarding_modal.vue | 355 ++++++++++++++++++
 .../ai/components/duo_onboarding_checker.vue  |  41 ++
 .../javascripts/ai/duo_onboarding_init.js     |  18 +
 app/assets/javascripts/main.js                |  10 +-
 .../user_menu_project_studio_section.vue      |   4 +
 5 files changed, 427 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
 create mode 100644 app/assets/javascripts/ai/components/duo_onboarding_checker.vue
 create mode 100644 app/assets/javascripts/ai/duo_onboarding_init.js

diff --git a/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue b/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
new file mode 100644
index 00000000000000..185ee2e8eb23c9
--- /dev/null
+++ b/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
@@ -0,0 +1,355 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import Tracking from '~/tracking';
+import emptyStateSvgUrl from '@gitlab/svgs/dist/illustrations/tanuki-ai-md.svg?url';
+
+const TRACKING_CATEGORY = 'duo_agent_onboarding';
+
+export default {
+  name: 'DuoAgentOnboardingModal',
+  components: {
+    GlButton,
+  },
+  mixins: [Tracking.mixin({ category: TRACKING_CATEGORY })],
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isAnimating: true,
+      emptyStateSvgUrl,
+    };
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.onModalShown();
+        this.track('render', { label: 'duo_agent_platform_intro' });
+      } else {
+        this.onModalHidden();
+      }
+    },
+  },
+  mounted() {
+    // Trigger haptic feedback and animations
+    this.initializeEffects();
+
+    // Track modal view if visible on mount
+    if (this.visible) {
+      this.track('render', { label: 'duo_agent_platform_intro' });
+    }
+  },
+  methods: {
+    initializeEffects() {
+      // Haptic feedback simulation
+      this.hapticFeedback(0.5, 1000); // When wireframe starts
+      this.hapticFeedback(0.8, 2000); // When fully loaded
+    },
+    hapticFeedback(intensity = 1, delay = 0) {
+      setTimeout(() => {
+        if ('vibrate' in navigator) {
+          navigator.vibrate(intensity * 50);
+        }
+
+        // Visual haptic feedback
+        const modal = this.$el?.querySelector('.modal-content-wrapper');
+        if (modal) {
+          modal.style.transform = 'scale(1.01)';
+          setTimeout(() => {
+            modal.style.transform = 'scale(1)';
+          }, 100);
+        }
+      }, delay);
+    },
+    closeModal() {
+      this.$emit('hidden');
+      this.track('click_dismiss', { label: 'duo_agent_platform_intro' });
+    },
+    onGetStarted() {
+      this.track('click_get_started', { label: 'duo_agent_platform_intro' });
+      this.$emit('completed');
+    },
+    onModalShown() {
+      this.isAnimating = true;
+    },
+    onModalHidden() {
+      this.isAnimating = false;
+      this.$emit('hidden');
+    },
+  },
+};
+</script>
+
+<template>
+  <teleport to="body">
+    <div v-if="visible" class="duo-agent-modal-overlay" @click.self="closeModal">
+      <!-- Floating particles background -->
+      <div class="floating-dots">
+        <div class="dot" :style="{ top: '20%', left: '10%', animationDelay: '0s' }"></div>
+        <div class="dot" :style="{ top: '60%', left: '85%', animationDelay: '0.5s' }"></div>
+        <div class="dot" :style="{ top: '80%', left: '20%', animationDelay: '1s' }"></div>
+        <div class="dot" :style="{ top: '30%', left: '70%', animationDelay: '1.5s' }"></div>
+        <div class="dot" :style="{ top: '15%', left: '90%', animationDelay: '2s' }"></div>
+        <div class="dot" :style="{ top: '45%', left: '5%', animationDelay: '2.5s' }"></div>
+        <div class="dot" :style="{ top: '75%', left: '75%', animationDelay: '3s' }"></div>
+        <div class="dot" :style="{ top: '10%', left: '50%', animationDelay: '3.5s' }"></div>
+      </div>
+
+      <div class="modal-content-wrapper gl-border gl-border-subtle gl-bg-default gl-shadow-lg">
+        <!-- GitLab Duo Logo -->
+        <div class="logo">
+          <img :src="emptyStateSvgUrl" alt="GitLab Duo AI" />
+        </div>
+
+        <!-- Title and subtitle -->
+        <h1 class="title gl-text-4xl gl-mb-4 gl-font-bold gl-text-default">
+          Welcome to the<br />GitLab Duo Agent Platform
+        </h1>
+        <p class="subtitle gl-mb-8 gl-text-lg gl-text-subtle">
+          Get instant AI assistance anywhere in GitLab with Duo's new persistent right panel
+        </p>
+
+        <!-- GitLab wireframe mockup -->
+        <div class="wireframe-container gl-border gl-border-subtle gl-bg-subtle">
+          <div class="wireframe">
+            <!-- Top header -->
+            <div class="wireframe-element header"></div>
+
+            <!-- Left sidebar with icons -->
+            <div class="wireframe-element left-sidebar"></div>
+
+            <!-- Main content area -->
+            <div class="wireframe-element main-content"></div>
+
+            <!-- Right sidebar top section -->
+            <div class="wireframe-element right-sidebar-top"></div>
+
+            <!-- Right sidebar bottom section -->
+            <div class="wireframe-element right-sidebar-bottom"></div>
+          </div>
+        </div>
+
+        <!-- CTA Button -->
+        <gl-button
+          variant="confirm"
+          size="large"
+          class="cta-button gl-mb-4"
+          data-testid="duo-agent-get-started"
+          @click="onGetStarted"
+        >
+          Get Started
+        </gl-button>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+.duo-agent-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(circle at 30% 10%, rgba(119, 89, 194, 0.2) 0%, transparent 40%),
+    radial-gradient(circle at 70% 15%, rgba(214, 64, 40, 0.15) 0%, transparent 35%),
+    radial-gradient(circle at 50% 5%, rgba(239, 118, 241, 0.18) 0%, transparent 45%),
+    rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.floating-dots {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.modal-content-wrapper {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  padding: 48px;
+  max-width: 600px;
+  width: 90%;
+  border-radius: 24px;
+}
+
+.logo {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: transparent !important;
+  filter: drop-shadow(none);
+}
+
+.dot {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: var(--gl-border-color-strong);
+  border-radius: 50%;
+  animation: float 3s ease-in-out infinite;
+}
+
+.wireframe-container {
+  position: relative;
+  height: 200px;
+  margin-bottom: 48px;
+  border-radius: 16px;
+  overflow: hidden;
+  animation: containerFadeIn 1s ease-out 0.6s both;
+  padding: 12px;
+  width: 408px;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.wireframe {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.wireframe-element {
+  position: absolute;
+  border: 1.5px solid rgba(255, 255, 255, 0.6);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Top header - spans full width */
+.header {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  animation: drawElement 0.8s ease-out 1s both;
+}
+
+/* Left sidebar - narrow with navigation icons */
+.left-sidebar {
+  top: 28px;
+  left: 0;
+  width: 24px;
+  height: 148px;
+  animation: drawElement 0.8s ease-out 1.2s both;
+}
+
+/* Main content area - should extend almost to the right sidebar */
+.main-content {
+  top: 28px;
+  left: 32px;
+  width: 260px;
+  height: 148px;
+  animation: drawElement 0.8s ease-out 1.4s both;
+}
+
+/* Right sidebar top section */
+.right-sidebar-top {
+  top: 28px;
+  right: 0;
+  width: 80px;
+  height: 100px;
+  animation: drawElement 0.8s ease-out 1.6s both;
+}
+
+/* Right sidebar bottom section */
+.right-sidebar-bottom {
+  top: 136px;
+  right: 0;
+  width: 80px;
+  height: 40px;
+  animation: drawElement 0.8s ease-out 1.8s both;
+}
+
+.cta-button {
+  animation: buttonSlideUp 0.8s ease-out 1.8s both;
+}
+
+.title {
+  animation: textSlideUp 0.8s ease-out 0.2s both;
+}
+
+.subtitle {
+  animation: textSlideUp 0.8s ease-out 0.4s both;
+}
+
+/* Animations */
+@keyframes textSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes containerFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawElement {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+    border-color: transparent;
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+    border-color: var(--gl-border-color-default);
+  }
+}
+
+@keyframes buttonSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.4;
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/app/assets/javascripts/ai/components/duo_onboarding_checker.vue b/app/assets/javascripts/ai/components/duo_onboarding_checker.vue
new file mode 100644
index 00000000000000..66ae0906f244f7
--- /dev/null
+++ b/app/assets/javascripts/ai/components/duo_onboarding_checker.vue
@@ -0,0 +1,41 @@
+<script>
+import DuoAgentOnboardingModal from '~/ai/components/duo_agent_onboarding_modal.vue';
+
+export default {
+  name: 'DuoOnboardingChecker',
+  components: {
+    DuoAgentOnboardingModal,
+  },
+  data() {
+    return {
+      showOnboardingModal: false,
+    };
+  },
+  mounted() {
+    // Check if we should show the onboarding modal
+    if (localStorage.getItem('showDuoAgentOnboarding') === 'true') {
+      // Show modal immediately - no delay needed since we want it to appear before background
+      this.showOnboardingModal = true;
+    }
+  },
+  methods: {
+    onOnboardingCompleted() {
+      localStorage.removeItem('showDuoAgentOnboarding');
+      this.showOnboardingModal = false;
+    },
+    onOnboardingHidden() {
+      localStorage.removeItem('showDuoAgentOnboarding');
+      this.showOnboardingModal = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <duo-agent-onboarding-modal
+    v-if="showOnboardingModal"
+    :visible="showOnboardingModal"
+    @completed="onOnboardingCompleted"
+    @hidden="onOnboardingHidden"
+  />
+</template>
diff --git a/app/assets/javascripts/ai/duo_onboarding_init.js b/app/assets/javascripts/ai/duo_onboarding_init.js
new file mode 100644
index 00000000000000..54eeb3a7aa745e
--- /dev/null
+++ b/app/assets/javascripts/ai/duo_onboarding_init.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import DuoOnboardingChecker from './components/duo_onboarding_checker.vue';
+
+export function initDuoOnboarding() {
+  // Only initialize if localStorage flag exists
+  if (localStorage.getItem('showDuoAgentOnboarding') === 'true') {
+    // Create a mount point for the modal
+    const mountPoint = document.createElement('div');
+    mountPoint.id = 'duo-onboarding-modal-mount';
+    document.body.appendChild(mountPoint);
+
+    // Mount the Vue component
+    new Vue({
+      el: '#duo-onboarding-modal-mount',
+      render: (h) => h(DuoOnboardingChecker),
+    });
+  }
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index ee4a9fc74e596d..b94465a990c76f 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -17,7 +17,11 @@ import { initPrefetchLinks } from '~/lib/utils/navigation_utility';
 import { logHelloDeferred } from 'jh_else_ce/lib/logger/hello_deferred';
 import initAlertHandler from './alert_handler';
 import initLayoutNav from './layout_nav';
-import { handleLocationHash, addSelectOnFocusBehaviour } from './lib/utils/common_utils';
+import {
+  handleLocationHash,
+  addSelectOnFocusBehaviour,
+  parseBoolean,
+} from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime/timeago_utility';
 import { getLocationHash, visitUrl, mergeUrlParams } from './lib/utils/url_utility';
 
@@ -34,6 +38,7 @@ import initBroadcastNotifications from './broadcast_notification';
 import { initCopyCodeButton } from './behaviors/copy_code';
 import initGitlabVersionCheck from './gitlab_version_check';
 import { initExpireSessionModal } from './authentication/sessions';
+import { initDuoOnboarding } from './ai/duo_onboarding_init';
 import initPanelHeightCalc from './panel_height_calc';
 import 'ee_else_ce/main_ee';
 import 'jh_else_ce/main_jh';
@@ -98,6 +103,9 @@ function deferredInitialisation() {
   initCopyCodeButton();
   initGitlabVersionCheck();
   initExpireSessionModal();
+
+  // Initialize Duo Agent onboarding modal if needed
+  initDuoOnboarding();
   initPanelHeightCalc();
 
   addSelectOnFocusBehaviour('.js-select-on-focus');
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu_project_studio_section.vue b/app/assets/javascripts/super_sidebar/components/user_menu_project_studio_section.vue
index 78ac7f95b17733..b551cdcda0ffb1 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu_project_studio_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu_project_studio_section.vue
@@ -58,6 +58,10 @@ export default {
             projectStudioEnabled: val,
           },
           update: () => {
+            // If user is enabling the New UI (val=true and currently disabled), flag for onboarding
+            if (val === true && this.projectStudioEnabled === false) {
+              localStorage.setItem('showDuoAgentOnboarding', 'true');
+            }
             window.location.reload();
           },
         })
-- 
GitLab


From ae5bf43e3daaf42529213e2289d276f680c86c35 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 22 Oct 2025 13:05:58 +0200
Subject: [PATCH 2/4] Resolve conflicts

---
 .../ai/components/duo_agent_onboarding_modal.vue     | 12 +++++++-----
 app/assets/javascripts/ai/duo_onboarding_init.js     |  2 +-
 app/assets/javascripts/main.js                       |  6 +-----
 locale/gitlab.pot                                    | 12 ++++++++++++
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue b/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
index 185ee2e8eb23c9..76cf9ecda74a8d 100644
--- a/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
+++ b/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
@@ -1,7 +1,7 @@
 <script>
+import emptyStateSvgUrl from '@gitlab/svgs/dist/illustrations/tanuki-ai-md.svg?url';
 import { GlButton } from '@gitlab/ui';
 import Tracking from '~/tracking';
-import emptyStateSvgUrl from '@gitlab/svgs/dist/illustrations/tanuki-ai-md.svg?url';
 
 const TRACKING_CATEGORY = 'duo_agent_onboarding';
 
@@ -102,15 +102,17 @@ export default {
       <div class="modal-content-wrapper gl-border gl-border-subtle gl-bg-default gl-shadow-lg">
         <!-- GitLab Duo Logo -->
         <div class="logo">
-          <img :src="emptyStateSvgUrl" alt="GitLab Duo AI" />
+          <img :src="emptyStateSvgUrl" :alt="__('GitLab Duo AI')" />
         </div>
 
         <!-- Title and subtitle -->
         <h1 class="title gl-text-4xl gl-mb-4 gl-font-bold gl-text-default">
-          Welcome to the<br />GitLab Duo Agent Platform
+          {{ __('Welcome to the GitLab Duo Agent Platform') }}
         </h1>
         <p class="subtitle gl-mb-8 gl-text-lg gl-text-subtle">
-          Get instant AI assistance anywhere in GitLab with Duo's new persistent right panel
+          {{
+            __("Get instant AI assistance anywhere in GitLab with Duo's new persistent right panel")
+          }}
         </p>
 
         <!-- GitLab wireframe mockup -->
@@ -141,7 +143,7 @@ export default {
           data-testid="duo-agent-get-started"
           @click="onGetStarted"
         >
-          Get Started
+          {{ __('Get Started') }}
         </gl-button>
       </div>
     </div>
diff --git a/app/assets/javascripts/ai/duo_onboarding_init.js b/app/assets/javascripts/ai/duo_onboarding_init.js
index 54eeb3a7aa745e..7f3fa7de9a1633 100644
--- a/app/assets/javascripts/ai/duo_onboarding_init.js
+++ b/app/assets/javascripts/ai/duo_onboarding_init.js
@@ -10,7 +10,7 @@ export function initDuoOnboarding() {
     document.body.appendChild(mountPoint);
 
     // Mount the Vue component
-    new Vue({
+    Vue({
       el: '#duo-onboarding-modal-mount',
       render: (h) => h(DuoOnboardingChecker),
     });
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index b94465a990c76f..9d762a08e0d26f 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -17,11 +17,7 @@ import { initPrefetchLinks } from '~/lib/utils/navigation_utility';
 import { logHelloDeferred } from 'jh_else_ce/lib/logger/hello_deferred';
 import initAlertHandler from './alert_handler';
 import initLayoutNav from './layout_nav';
-import {
-  handleLocationHash,
-  addSelectOnFocusBehaviour,
-  parseBoolean,
-} from './lib/utils/common_utils';
+import { handleLocationHash, addSelectOnFocusBehaviour } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime/timeago_utility';
 import { getLocationHash, visitUrl, mergeUrlParams } from './lib/utils/url_utility';
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d2c2fe7a027148..ece3b12279b391 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -30093,6 +30093,9 @@ msgstr ""
 msgid "Geo|secondary"
 msgstr ""
 
+msgid "Get Started"
+msgstr ""
+
 msgid "Get a support subscription"
 msgstr ""
 
@@ -30102,6 +30105,9 @@ msgstr ""
 msgid "Get free trial"
 msgstr ""
 
+msgid "Get instant AI assistance anywhere in GitLab with Duo's new persistent right panel"
+msgstr ""
+
 msgid "Get more information about troubleshooting pipelines"
 msgstr ""
 
@@ -30282,6 +30288,9 @@ msgstr ""
 msgid "GitLab Duo"
 msgstr ""
 
+msgid "GitLab Duo AI"
+msgstr ""
+
 msgid "GitLab Duo Agentic Chat"
 msgstr ""
 
@@ -74030,6 +74039,9 @@ msgstr ""
 msgid "Welcome to GitLab,%{br_tag}%{name}!"
 msgstr ""
 
+msgid "Welcome to the GitLab Duo Agent Platform"
+msgstr ""
+
 msgid "Welcome to the new merge request homepage! This page gives you a centralized view of all the merge requests you're working on. Know at a glance what merge requests need your attention first so you can spend less time checking in, and more time reviewing and responding to feedback."
 msgstr ""
 
-- 
GitLab


From 443a5bbfdd2465f78bd52b419db2042f16dcb6b3 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 22 Oct 2025 18:43:00 +0200
Subject: [PATCH 3/4] Draft visuals update

---
 .../components/duo_agent_onboarding_modal.vue | 357 ------------------
 .../ai/components/duo_onboarding_checker.vue  |  41 --
 .../javascripts/ai/duo_onboarding_init.js     |  18 -
 .../ai/editor_actions/generate_description.js |   3 -
 .../dap_welcome_modal/components/app.vue      | 258 +++++++++++++
 .../javascripts/dap_welcome_modal/index.js    |  15 +
 app/assets/javascripts/main.js                |   6 +-
 app/views/layouts/_page.html.haml             |   2 +
 locale/gitlab.pot                             |  13 +-
 9 files changed, 282 insertions(+), 431 deletions(-)
 delete mode 100644 app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
 delete mode 100644 app/assets/javascripts/ai/components/duo_onboarding_checker.vue
 delete mode 100644 app/assets/javascripts/ai/duo_onboarding_init.js
 delete mode 100644 app/assets/javascripts/ai/editor_actions/generate_description.js
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/app.vue
 create mode 100644 app/assets/javascripts/dap_welcome_modal/index.js

diff --git a/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue b/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
deleted file mode 100644
index 76cf9ecda74a8d..00000000000000
--- a/app/assets/javascripts/ai/components/duo_agent_onboarding_modal.vue
+++ /dev/null
@@ -1,357 +0,0 @@
-<script>
-import emptyStateSvgUrl from '@gitlab/svgs/dist/illustrations/tanuki-ai-md.svg?url';
-import { GlButton } from '@gitlab/ui';
-import Tracking from '~/tracking';
-
-const TRACKING_CATEGORY = 'duo_agent_onboarding';
-
-export default {
-  name: 'DuoAgentOnboardingModal',
-  components: {
-    GlButton,
-  },
-  mixins: [Tracking.mixin({ category: TRACKING_CATEGORY })],
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      isAnimating: true,
-      emptyStateSvgUrl,
-    };
-  },
-  watch: {
-    visible(newVal) {
-      if (newVal) {
-        this.onModalShown();
-        this.track('render', { label: 'duo_agent_platform_intro' });
-      } else {
-        this.onModalHidden();
-      }
-    },
-  },
-  mounted() {
-    // Trigger haptic feedback and animations
-    this.initializeEffects();
-
-    // Track modal view if visible on mount
-    if (this.visible) {
-      this.track('render', { label: 'duo_agent_platform_intro' });
-    }
-  },
-  methods: {
-    initializeEffects() {
-      // Haptic feedback simulation
-      this.hapticFeedback(0.5, 1000); // When wireframe starts
-      this.hapticFeedback(0.8, 2000); // When fully loaded
-    },
-    hapticFeedback(intensity = 1, delay = 0) {
-      setTimeout(() => {
-        if ('vibrate' in navigator) {
-          navigator.vibrate(intensity * 50);
-        }
-
-        // Visual haptic feedback
-        const modal = this.$el?.querySelector('.modal-content-wrapper');
-        if (modal) {
-          modal.style.transform = 'scale(1.01)';
-          setTimeout(() => {
-            modal.style.transform = 'scale(1)';
-          }, 100);
-        }
-      }, delay);
-    },
-    closeModal() {
-      this.$emit('hidden');
-      this.track('click_dismiss', { label: 'duo_agent_platform_intro' });
-    },
-    onGetStarted() {
-      this.track('click_get_started', { label: 'duo_agent_platform_intro' });
-      this.$emit('completed');
-    },
-    onModalShown() {
-      this.isAnimating = true;
-    },
-    onModalHidden() {
-      this.isAnimating = false;
-      this.$emit('hidden');
-    },
-  },
-};
-</script>
-
-<template>
-  <teleport to="body">
-    <div v-if="visible" class="duo-agent-modal-overlay" @click.self="closeModal">
-      <!-- Floating particles background -->
-      <div class="floating-dots">
-        <div class="dot" :style="{ top: '20%', left: '10%', animationDelay: '0s' }"></div>
-        <div class="dot" :style="{ top: '60%', left: '85%', animationDelay: '0.5s' }"></div>
-        <div class="dot" :style="{ top: '80%', left: '20%', animationDelay: '1s' }"></div>
-        <div class="dot" :style="{ top: '30%', left: '70%', animationDelay: '1.5s' }"></div>
-        <div class="dot" :style="{ top: '15%', left: '90%', animationDelay: '2s' }"></div>
-        <div class="dot" :style="{ top: '45%', left: '5%', animationDelay: '2.5s' }"></div>
-        <div class="dot" :style="{ top: '75%', left: '75%', animationDelay: '3s' }"></div>
-        <div class="dot" :style="{ top: '10%', left: '50%', animationDelay: '3.5s' }"></div>
-      </div>
-
-      <div class="modal-content-wrapper gl-border gl-border-subtle gl-bg-default gl-shadow-lg">
-        <!-- GitLab Duo Logo -->
-        <div class="logo">
-          <img :src="emptyStateSvgUrl" :alt="__('GitLab Duo AI')" />
-        </div>
-
-        <!-- Title and subtitle -->
-        <h1 class="title gl-text-4xl gl-mb-4 gl-font-bold gl-text-default">
-          {{ __('Welcome to the GitLab Duo Agent Platform') }}
-        </h1>
-        <p class="subtitle gl-mb-8 gl-text-lg gl-text-subtle">
-          {{
-            __("Get instant AI assistance anywhere in GitLab with Duo's new persistent right panel")
-          }}
-        </p>
-
-        <!-- GitLab wireframe mockup -->
-        <div class="wireframe-container gl-border gl-border-subtle gl-bg-subtle">
-          <div class="wireframe">
-            <!-- Top header -->
-            <div class="wireframe-element header"></div>
-
-            <!-- Left sidebar with icons -->
-            <div class="wireframe-element left-sidebar"></div>
-
-            <!-- Main content area -->
-            <div class="wireframe-element main-content"></div>
-
-            <!-- Right sidebar top section -->
-            <div class="wireframe-element right-sidebar-top"></div>
-
-            <!-- Right sidebar bottom section -->
-            <div class="wireframe-element right-sidebar-bottom"></div>
-          </div>
-        </div>
-
-        <!-- CTA Button -->
-        <gl-button
-          variant="confirm"
-          size="large"
-          class="cta-button gl-mb-4"
-          data-testid="duo-agent-get-started"
-          @click="onGetStarted"
-        >
-          {{ __('Get Started') }}
-        </gl-button>
-      </div>
-    </div>
-  </teleport>
-</template>
-
-<style scoped>
-.duo-agent-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: radial-gradient(circle at 30% 10%, rgba(119, 89, 194, 0.2) 0%, transparent 40%),
-    radial-gradient(circle at 70% 15%, rgba(214, 64, 40, 0.15) 0%, transparent 35%),
-    radial-gradient(circle at 50% 5%, rgba(239, 118, 241, 0.18) 0%, transparent 45%),
-    rgba(0, 0, 0, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-.floating-dots {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.modal-content-wrapper {
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  padding: 48px;
-  max-width: 600px;
-  width: 90%;
-  border-radius: 24px;
-}
-
-.logo {
-  width: 120px;
-  height: 120px;
-  margin: 0 auto 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  background: transparent !important;
-  filter: drop-shadow(none);
-}
-
-.dot {
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  background: var(--gl-border-color-strong);
-  border-radius: 50%;
-  animation: float 3s ease-in-out infinite;
-}
-
-.wireframe-container {
-  position: relative;
-  height: 200px;
-  margin-bottom: 48px;
-  border-radius: 16px;
-  overflow: hidden;
-  animation: containerFadeIn 1s ease-out 0.6s both;
-  padding: 12px;
-  width: 408px;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.wireframe {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-}
-
-.wireframe-element {
-  position: absolute;
-  border: 1.5px solid rgba(255, 255, 255, 0.6);
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* Top header - spans full width */
-.header {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  animation: drawElement 0.8s ease-out 1s both;
-}
-
-/* Left sidebar - narrow with navigation icons */
-.left-sidebar {
-  top: 28px;
-  left: 0;
-  width: 24px;
-  height: 148px;
-  animation: drawElement 0.8s ease-out 1.2s both;
-}
-
-/* Main content area - should extend almost to the right sidebar */
-.main-content {
-  top: 28px;
-  left: 32px;
-  width: 260px;
-  height: 148px;
-  animation: drawElement 0.8s ease-out 1.4s both;
-}
-
-/* Right sidebar top section */
-.right-sidebar-top {
-  top: 28px;
-  right: 0;
-  width: 80px;
-  height: 100px;
-  animation: drawElement 0.8s ease-out 1.6s both;
-}
-
-/* Right sidebar bottom section */
-.right-sidebar-bottom {
-  top: 136px;
-  right: 0;
-  width: 80px;
-  height: 40px;
-  animation: drawElement 0.8s ease-out 1.8s both;
-}
-
-.cta-button {
-  animation: buttonSlideUp 0.8s ease-out 1.8s both;
-}
-
-.title {
-  animation: textSlideUp 0.8s ease-out 0.2s both;
-}
-
-.subtitle {
-  animation: textSlideUp 0.8s ease-out 0.4s both;
-}
-
-/* Animations */
-@keyframes textSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes containerFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes drawElement {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-    border-color: transparent;
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-    border-color: var(--gl-border-color-default);
-  }
-}
-
-@keyframes buttonSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0) rotate(0deg);
-    opacity: 0.4;
-  }
-  50% {
-    transform: translateY(-20px) rotate(180deg);
-    opacity: 0.8;
-  }
-}
-</style>
diff --git a/app/assets/javascripts/ai/components/duo_onboarding_checker.vue b/app/assets/javascripts/ai/components/duo_onboarding_checker.vue
deleted file mode 100644
index 66ae0906f244f7..00000000000000
--- a/app/assets/javascripts/ai/components/duo_onboarding_checker.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import DuoAgentOnboardingModal from '~/ai/components/duo_agent_onboarding_modal.vue';
-
-export default {
-  name: 'DuoOnboardingChecker',
-  components: {
-    DuoAgentOnboardingModal,
-  },
-  data() {
-    return {
-      showOnboardingModal: false,
-    };
-  },
-  mounted() {
-    // Check if we should show the onboarding modal
-    if (localStorage.getItem('showDuoAgentOnboarding') === 'true') {
-      // Show modal immediately - no delay needed since we want it to appear before background
-      this.showOnboardingModal = true;
-    }
-  },
-  methods: {
-    onOnboardingCompleted() {
-      localStorage.removeItem('showDuoAgentOnboarding');
-      this.showOnboardingModal = false;
-    },
-    onOnboardingHidden() {
-      localStorage.removeItem('showDuoAgentOnboarding');
-      this.showOnboardingModal = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <duo-agent-onboarding-modal
-    v-if="showOnboardingModal"
-    :visible="showOnboardingModal"
-    @completed="onOnboardingCompleted"
-    @hidden="onOnboardingHidden"
-  />
-</template>
diff --git a/app/assets/javascripts/ai/duo_onboarding_init.js b/app/assets/javascripts/ai/duo_onboarding_init.js
deleted file mode 100644
index 7f3fa7de9a1633..00000000000000
--- a/app/assets/javascripts/ai/duo_onboarding_init.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue';
-import DuoOnboardingChecker from './components/duo_onboarding_checker.vue';
-
-export function initDuoOnboarding() {
-  // Only initialize if localStorage flag exists
-  if (localStorage.getItem('showDuoAgentOnboarding') === 'true') {
-    // Create a mount point for the modal
-    const mountPoint = document.createElement('div');
-    mountPoint.id = 'duo-onboarding-modal-mount';
-    document.body.appendChild(mountPoint);
-
-    // Mount the Vue component
-    Vue({
-      el: '#duo-onboarding-modal-mount',
-      render: (h) => h(DuoOnboardingChecker),
-    });
-  }
-}
diff --git a/app/assets/javascripts/ai/editor_actions/generate_description.js b/app/assets/javascripts/ai/editor_actions/generate_description.js
deleted file mode 100644
index d850d13da3ff73..00000000000000
--- a/app/assets/javascripts/ai/editor_actions/generate_description.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Placeholder for GitLab FOSS
-// Actual implementation: ee/app/assets/javascripts/ai/editor_actions/generate_description.js
-export const generateDescriptionAction = () => {};
diff --git a/app/assets/javascripts/dap_welcome_modal/components/app.vue b/app/assets/javascripts/dap_welcome_modal/components/app.vue
new file mode 100644
index 00000000000000..d0c5360e8780e8
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/app.vue
@@ -0,0 +1,258 @@
+<script>
+import { GlModal, GlIllustration } from '@gitlab/ui';
+import { __ } from '~/locale';
+// import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+
+export default {
+  name: 'DapWelcomeModalApp',
+  components: { GlModal, GlIllustration },
+  i18n: {
+    title: __('Welcome to the redesigned GitLab UI'),
+    cta: __('Get Started'),
+    description: __(
+      'Introducing a GitLab Duo sidebar on the right. Access Duo Agent Platform tools and get instant AI assistance anywhere in GitLab or collapse the sidebar so it gets out of the way.',
+    ),
+    next: __('Next'),
+  },
+  computed: {
+    actionPrimary() {
+      return { text: this.$options.i18n.cta };
+    },
+  },
+  mounted() {
+    if (this.$refs.modal) this.$refs.modal.show();
+  },
+  methods: {
+    doThings(e) {
+      // PLACEHOLDER ACTION
+      e.preventDefault();
+    },
+  },
+};
+</script>
+
+<template>
+  <!-- <user-callout-dismisser feature-name="dap_welcome_modal"> -->
+  <!-- <template #default="{ dismiss, shouldShowCallout }"> -->
+  <!-- <div v-if="shouldShowCallout" class="duo-agent-modal-overlay" @click.self="dismiss" ref="modal"> -->
+  <gl-modal
+    ref="modal"
+    modal-id="dap_welcome_modal"
+    :action-primary="actionPrimary"
+    :no-focus-on-show="true"
+    size="sm"
+    class="dap-welcome-modal"
+    @primary="doThings($event)"
+  >
+    <!-- @hide="doThings($event)" -->
+    <gl-illustration name="tanuki-ai-sm" class="gl-mb-6" />
+    <h2 class="gl-heading-2">{{ $options.i18n.title }}</h2>
+    <p class="gl-mb-0">{{ $options.i18n.description }}</p>
+
+    <div class="particles">
+      <div
+        v-for="i in 20"
+        :key="i"
+        :style="`--size: ${Math.random()}; --blur: ${Math.random()}; --delay: ${Math.random()}; --duration: ${Math.random()};`"
+        class="particle"
+      ></div>
+    </div>
+  </gl-modal>
+  <!-- </template> -->
+  <!-- </user-callout-dismisser> -->
+</template>
+
+<style>
+@property --_flashlight-start {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --_flashlight-step-1 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --_flashlight-step-2 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --_flashlight-step-3 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --_flashlight-step-4 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --_flashlight-end {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --_mask-start {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+#dap_welcome_modal {
+  --tw-shadow: var(--gl-shadow-sm);
+  --tw-shadow-colored: var(--gl-shadow-sm);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+  background-color: rgba(from var(--gl-background-color-overlay) r g b / 90%);
+
+  backdrop-filter: blur(0.25rem);
+
+  .modal-body {
+    padding: 0 var(--gl-spacing-scale-7);
+    text-align: center;
+  }
+
+  .modal-footer {
+    padding: var(--gl-spacing-scale-7);
+    justify-content: center;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    mask: radial-gradient(circle at 50% 100%, black var(--_mask-start), transparent);
+    background-image: conic-gradient(
+      from -90deg at 50% 120%,
+      transparent var(--_flashlight-start),
+      hsla(from var(--theme-color) calc(h + 30) calc(s + 20) calc(l + 10) / 25%)
+        var(--_flashlight-step-1),
+      hsla(from var(--theme-color) h calc(s + 20) calc(l + 10) / 50%) var(--_flashlight-step-2),
+      hsla(from var(--theme-color) h calc(s + 20) calc(l + 10) / 50%) var(--_flashlight-step-3),
+      hsla(from var(--theme-color) calc(h + 30) calc(s + 20) calc(l + 10) / 25%)
+        var(--_flashlight-step-4),
+      transparent var(--_flashlight-end)
+    );
+    animation:
+      flash-light 1s
+        linear(
+          0 0%,
+          0 1.8%,
+          0.01 3.6%,
+          0.03 6.35%,
+          0.07 9.1%,
+          0.13 11.4%,
+          0.19 13.4%,
+          0.27 15%,
+          0.34 16.1%,
+          0.54 18.35%,
+          0.66 20.6%,
+          0.72 22.4%,
+          0.77 24.6%,
+          0.81 27.3%,
+          0.85 30.4%,
+          0.88 35.1%,
+          0.92 40.6%,
+          0.94 47.2%,
+          0.96 55%,
+          0.98 64%,
+          0.99 74.4%,
+          1 86.4%,
+          1 100%
+        )
+        both,
+      breath 5s 1s ease-in-out infinite;
+  }
+}
+
+@keyframes flash-light {
+  from {
+    --_flashlight-start: 90deg;
+    --_flashlight-step-1: 90deg;
+    --_flashlight-step-2: 90deg;
+    --_flashlight-step-3: 90deg;
+    --_flashlight-step-4: 90deg;
+    --_flashlight-end: 90deg;
+    --_mask-start: 0%;
+  }
+  to {
+    --_flashlight-start: 40deg;
+    --_flashlight-step-1: 60deg;
+    --_flashlight-step-2: 70deg;
+    --_flashlight-step-3: 110deg;
+    --_flashlight-step-4: 120deg;
+    --_flashlight-end: 140deg;
+    --_mask-start: 50%;
+  }
+}
+
+@keyframes breath {
+  0%,
+  100% {
+    --_flashlight-start: 40deg;
+    --_flashlight-step-1: 60deg;
+    --_flashlight-step-2: 70deg;
+    --_flashlight-step-3: 110deg;
+    --_flashlight-step-4: 120deg;
+    --_flashlight-end: 140deg;
+  }
+  50% {
+    --_flashlight-start: 20deg;
+    --_flashlight-step-1: 45deg;
+    --_flashlight-step-2: 65deg;
+    --_flashlight-step-3: 115deg;
+    --_flashlight-step-4: 135deg;
+    --_flashlight-end: 160deg;
+  }
+}
+
+.particles {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  padding: 0 10vw;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: flex;
+  justify-content: space-around;
+  mask: radial-gradient(circle at 50% 100%, black 50%, transparent 75%);
+  overflow: hidden;
+}
+
+.particle {
+  align-self: flex-end;
+  aspect-ratio: 1;
+  background: hsla(from var(--theme-color) calc(h + 30) calc(s + 20) calc(l + 20) / 25%);
+  border-radius: 50%;
+  translate: 0 100%;
+  animation-name: particle-move, particle-shine;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+
+  width: calc(0.5rem * var(--size));
+  animation-delay: calc(10s * var(--delay) - 1s);
+  animation-duration: calc(20s * var(--duration) + 5s), 5s;
+  filter: blur(calc(0.1rem * var(--blur)));
+}
+
+@keyframes particle-move {
+  from {
+    translate: 0 100%;
+  }
+  to {
+    translate: 0 calc(-100vh - 100%);
+  }
+}
+
+@keyframes particle-shine {
+  from {
+    scale: 1;
+  }
+  to {
+    scale: 0.8;
+  }
+}
+</style>
diff --git a/app/assets/javascripts/dap_welcome_modal/index.js b/app/assets/javascripts/dap_welcome_modal/index.js
new file mode 100644
index 00000000000000..ac5cf0e61738a9
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import DapWelcomeModalApp from './components/app.vue';
+
+export const initDapWelcomeModal = () => {
+  const el = document.querySelector('.js-dap-welcome-modal');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    render: (createElement) => createElement(DapWelcomeModalApp),
+  });
+};
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 9d762a08e0d26f..cc705b79b93830 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -34,7 +34,7 @@ import initBroadcastNotifications from './broadcast_notification';
 import { initCopyCodeButton } from './behaviors/copy_code';
 import initGitlabVersionCheck from './gitlab_version_check';
 import { initExpireSessionModal } from './authentication/sessions';
-import { initDuoOnboarding } from './ai/duo_onboarding_init';
+import { initDapWelcomeModal } from './dap_welcome_modal/index';
 import initPanelHeightCalc from './panel_height_calc';
 import 'ee_else_ce/main_ee';
 import 'jh_else_ce/main_jh';
@@ -99,9 +99,7 @@ function deferredInitialisation() {
   initCopyCodeButton();
   initGitlabVersionCheck();
   initExpireSessionModal();
-
-  // Initialize Duo Agent onboarding modal if needed
-  initDuoOnboarding();
+  initDapWelcomeModal();
   initPanelHeightCalc();
 
   addSelectOnFocusBehaviour('.js-select-on-focus');
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 3457102cfe1d06..276d3eb20fff3d 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -27,6 +27,8 @@
   = render_if_exists "layouts/session_expire_modal"
 
   - if project_studio_enabled?
+    .js-dap-welcome-modal
+
     .panels-container.gl-flex.gl-gap-3
       .content-panels.gl-flex-1.gl-w-full.gl-flex.gl-gap-3.gl-relative.js-content-panels{ class: 'gl-@container/content-panels' }
         #static-panel-portal.js-static-panel.static-panel.content-wrapper.gl-relative.paneled-view.gl-flex-1.gl-overflow-y-auto.gl-bg-default{ class: "#{@content_wrapper_class}" }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ece3b12279b391..55ca324bb10238 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -30105,9 +30105,6 @@ msgstr ""
 msgid "Get free trial"
 msgstr ""
 
-msgid "Get instant AI assistance anywhere in GitLab with Duo's new persistent right panel"
-msgstr ""
-
 msgid "Get more information about troubleshooting pipelines"
 msgstr ""
 
@@ -30288,9 +30285,6 @@ msgstr ""
 msgid "GitLab Duo"
 msgstr ""
 
-msgid "GitLab Duo AI"
-msgstr ""
-
 msgid "GitLab Duo Agentic Chat"
 msgstr ""
 
@@ -35613,6 +35607,9 @@ msgstr ""
 msgid "Interval"
 msgstr ""
 
+msgid "Introducing a GitLab Duo sidebar on the right. Access Duo Agent Platform tools and get instant AI assistance anywhere in GitLab or collapse the sidebar so it gets out of the way."
+msgstr ""
+
 msgid "Introducing embedded views"
 msgstr ""
 
@@ -74039,10 +74036,10 @@ msgstr ""
 msgid "Welcome to GitLab,%{br_tag}%{name}!"
 msgstr ""
 
-msgid "Welcome to the GitLab Duo Agent Platform"
+msgid "Welcome to the new merge request homepage! This page gives you a centralized view of all the merge requests you're working on. Know at a glance what merge requests need your attention first so you can spend less time checking in, and more time reviewing and responding to feedback."
 msgstr ""
 
-msgid "Welcome to the new merge request homepage! This page gives you a centralized view of all the merge requests you're working on. Know at a glance what merge requests need your attention first so you can spend less time checking in, and more time reviewing and responding to feedback."
+msgid "Welcome to the redesigned GitLab UI"
 msgstr ""
 
 msgid "Welcome, %{name}!"
-- 
GitLab


From 1ceb9ac3bf032a0f81fc7e579220c225c541b4aa Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Thu, 23 Oct 2025 12:58:02 +0200
Subject: [PATCH 4/4] Add steps

---
 .../ai/editor_actions/generate_description.js |   3 +
 .../dap_welcome_modal/components/app.vue      | 115 +++++++++++++-----
 .../components/explainer_ai.vue               |  14 +++
 .../components/explainer_feedback.vue         |  14 +++
 .../components/explainer_panels.vue           | 105 ++++++++++++++++
 .../components/explainer_search.vue           |  14 +++
 .../components/explainer_sidebar.vue          |  96 +++++++++++++++
 .../components/explainer_ui.vue               | 109 +++++++++++++++++
 locale/gitlab.pot                             |  27 +++-
 9 files changed, 465 insertions(+), 32 deletions(-)
 create mode 100644 app/assets/javascripts/ai/editor_actions/generate_description.js
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/explainer_ai.vue
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/explainer_feedback.vue
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/explainer_panels.vue
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/explainer_search.vue
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/explainer_sidebar.vue
 create mode 100644 app/assets/javascripts/dap_welcome_modal/components/explainer_ui.vue

diff --git a/app/assets/javascripts/ai/editor_actions/generate_description.js b/app/assets/javascripts/ai/editor_actions/generate_description.js
new file mode 100644
index 00000000000000..d850d13da3ff73
--- /dev/null
+++ b/app/assets/javascripts/ai/editor_actions/generate_description.js
@@ -0,0 +1,3 @@
+// Placeholder for GitLab FOSS
+// Actual implementation: ee/app/assets/javascripts/ai/editor_actions/generate_description.js
+export const generateDescriptionAction = () => {};
diff --git a/app/assets/javascripts/dap_welcome_modal/components/app.vue b/app/assets/javascripts/dap_welcome_modal/components/app.vue
index d0c5360e8780e8..dce5e8cb6a5cf8 100644
--- a/app/assets/javascripts/dap_welcome_modal/components/app.vue
+++ b/app/assets/javascripts/dap_welcome_modal/components/app.vue
@@ -1,23 +1,34 @@
 <script>
-import { GlModal, GlIllustration } from '@gitlab/ui';
+import { GlModal, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
+import ExplainerAi from './explainer_ai.vue';
+import ExplainerFeedback from './explainer_feedback.vue';
+import ExplainerPanels from './explainer_panels.vue';
+import ExplainerSearch from './explainer_search.vue';
+import ExplainerSidebar from './explainer_sidebar.vue';
+import ExplainerUi from './explainer_ui.vue';
 // import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 
 export default {
   name: 'DapWelcomeModalApp',
-  components: { GlModal, GlIllustration },
+  components: {
+    GlModal,
+    GlButton,
+    ExplainerAi,
+    ExplainerFeedback,
+    ExplainerPanels,
+    ExplainerSearch,
+    ExplainerSidebar,
+    ExplainerUi,
+  },
   i18n: {
-    title: __('Welcome to the redesigned GitLab UI'),
     cta: __('Get Started'),
-    description: __(
-      'Introducing a GitLab Duo sidebar on the right. Access Duo Agent Platform tools and get instant AI assistance anywhere in GitLab or collapse the sidebar so it gets out of the way.',
-    ),
     next: __('Next'),
   },
-  computed: {
-    actionPrimary() {
-      return { text: this.$options.i18n.cta };
-    },
+  data() {
+    return {
+      currentStep: 1,
+    };
   },
   mounted() {
     if (this.$refs.modal) this.$refs.modal.show();
@@ -27,6 +38,12 @@ export default {
       // PLACEHOLDER ACTION
       e.preventDefault();
     },
+    onBack() {
+      this.currentStep -= 1;
+    },
+    onNext() {
+      this.currentStep += 1;
+    },
   },
 };
 </script>
@@ -38,16 +55,17 @@ export default {
   <gl-modal
     ref="modal"
     modal-id="dap_welcome_modal"
-    :action-primary="actionPrimary"
     :no-focus-on-show="true"
     size="sm"
     class="dap-welcome-modal"
-    @primary="doThings($event)"
   >
     <!-- @hide="doThings($event)" -->
-    <gl-illustration name="tanuki-ai-sm" class="gl-mb-6" />
-    <h2 class="gl-heading-2">{{ $options.i18n.title }}</h2>
-    <p class="gl-mb-0">{{ $options.i18n.description }}</p>
+    <explainer-ui v-if="currentStep === 1" />
+    <explainer-search v-else-if="currentStep === 2" />
+    <explainer-sidebar v-else-if="currentStep === 3" />
+    <explainer-panels v-else-if="currentStep === 4" />
+    <explainer-ai v-else-if="currentStep === 5" />
+    <explainer-feedback v-else-if="currentStep === 6" />
 
     <div class="particles">
       <div
@@ -57,6 +75,25 @@ export default {
         class="particle"
       ></div>
     </div>
+
+    <template #modal-footer>
+      <gl-button v-if="currentStep === 1" variant="confirm" @click="onNext">
+        {{ __('Get Started') }}
+      </gl-button>
+      <template v-else>
+        <gl-button variant="default" @click="onBack">
+          {{ __('Go Back') }}
+        </gl-button>
+
+        <gl-button v-if="currentStep < 6" variant="confirm" @click="onNext">
+          {{ __('Go Next') }}
+        </gl-button>
+
+        <gl-button v-if="currentStep === 6" variant="confirm" @click="doThings($event)">
+          {{ __('Go to GitLab') }}
+        </gl-button>
+      </template>
+    </template>
   </gl-modal>
   <!-- </template> -->
   <!-- </user-callout-dismisser> -->
@@ -99,13 +136,35 @@ export default {
   initial-value: 0%;
 }
 
-#dap_welcome_modal {
-  --tw-shadow: var(--gl-shadow-sm);
-  --tw-shadow-colored: var(--gl-shadow-sm);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
+.gl-light #dap_welcome_modal {
+  --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-950);
+  --gl-button-confirm-primary-border-color-default: var(--gl-color-neutral-950);
+  --_svg-color: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color));
+
   background-color: rgba(from var(--gl-background-color-overlay) r g b / 90%);
 
+  .modal-content {
+    background: rgba(from var(--gl-color-neutral-0) r g b / 90%);
+  }
+}
+
+.gl-dark #dap_welcome_modal {
+  --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-10);
+  --gl-button-confirm-primary-border-color-default: var(--gl-color-neutral-10);
+  --_svg-color: color-mix(in srgb, var(--gl-color-neutral-10), var(--theme-color));
+
+  background-color: rgba(from var(--gl-background-color-overlay) r g b / 70%);
+
+  .modal-content {
+    background: rgba(from var(--gl-color-neutral-950) r g b / 80%);
+  }
+}
+
+#dap_welcome_modal {
+  --_flashlight-main-color: hsla(from var(--theme-color) h calc(s + 20) calc(l + 35) / 30%);
+  --_flashlight-complimentary-color: hsla(
+    from var(--theme-color) calc(h + 30) calc(s + 20) calc(l + 35) / 15%
+  );
   backdrop-filter: blur(0.25rem);
 
   .modal-body {
@@ -127,12 +186,10 @@ export default {
     background-image: conic-gradient(
       from -90deg at 50% 120%,
       transparent var(--_flashlight-start),
-      hsla(from var(--theme-color) calc(h + 30) calc(s + 20) calc(l + 10) / 25%)
-        var(--_flashlight-step-1),
-      hsla(from var(--theme-color) h calc(s + 20) calc(l + 10) / 50%) var(--_flashlight-step-2),
-      hsla(from var(--theme-color) h calc(s + 20) calc(l + 10) / 50%) var(--_flashlight-step-3),
-      hsla(from var(--theme-color) calc(h + 30) calc(s + 20) calc(l + 10) / 25%)
-        var(--_flashlight-step-4),
+      var(--_flashlight-complimentary-color) var(--_flashlight-step-1),
+      var(--_flashlight-main-color) var(--_flashlight-step-2),
+      var(--_flashlight-main-color) var(--_flashlight-step-3),
+      var(--_flashlight-complimentary-color) var(--_flashlight-step-4),
       transparent var(--_flashlight-end)
     );
     animation:
@@ -163,7 +220,7 @@ export default {
           1 100%
         )
         both,
-      breath 5s 1s ease-in-out infinite;
+      breath 10s 1s ease-in-out infinite;
   }
 }
 
@@ -215,7 +272,7 @@ export default {
   padding: 0 10vw;
   top: 0;
   left: 0;
-  z-index: -1;
+  z-index: -2;
   display: flex;
   justify-content: space-around;
   mask: radial-gradient(circle at 50% 100%, black 50%, transparent 75%);
@@ -233,7 +290,7 @@ export default {
   animation-iteration-count: infinite;
 
   width: calc(0.5rem * var(--size));
-  animation-delay: calc(10s * var(--delay) - 1s);
+  animation-delay: calc(10s * var(--delay) - 5s);
   animation-duration: calc(20s * var(--duration) + 5s), 5s;
   filter: blur(calc(0.1rem * var(--blur)));
 }
diff --git a/app/assets/javascripts/dap_welcome_modal/components/explainer_ai.vue b/app/assets/javascripts/dap_welcome_modal/components/explainer_ai.vue
new file mode 100644
index 00000000000000..8e359e92e5804c
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/explainer_ai.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h2 class="gl-heading-2">{{ __('TITLE') }}</h2>
+    <p class="gl-mb-0">
+      {{
+        __(
+          'If you enabled Duo. You can then open the GitLab Duo Chat panel on the right side of the interface as an on-demand assistant, allowing you to engage your agents with contextual questions and instructions from anywhere in the GitLab experience.',
+        )
+      }}
+    </p>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/assets/javascripts/dap_welcome_modal/components/explainer_feedback.vue b/app/assets/javascripts/dap_welcome_modal/components/explainer_feedback.vue
new file mode 100644
index 00000000000000..628ff7fd5b3d58
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/explainer_feedback.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h2 class="gl-heading-2">{{ __('TITLE') }}</h2>
+    <p class="gl-mb-0">
+      {{
+        __(
+          'Please share your feedback and file bugs on anything you don’t love! Our engineers are listening. Assuming you love the experience as much as our own team, this toggle is expected to be removed in 18.6, making the panel UI standard across all user experiences.',
+        )
+      }}
+    </p>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/assets/javascripts/dap_welcome_modal/components/explainer_panels.vue b/app/assets/javascripts/dap_welcome_modal/components/explainer_panels.vue
new file mode 100644
index 00000000000000..d32c20cbfd145e
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/explainer_panels.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <h2 class="gl-heading-2">{{ __('TITLE') }}</h2>
+    <p>
+      {{
+        __(
+          'Panels present information side by side, allowing you to work more contextually. When you click on an issue in the issues list, you will see the details in its side panel.',
+        )
+      }}
+    </p>
+    <svg
+      width="300"
+      height="169"
+      viewBox="0 0 300 169"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="299"
+        height="168"
+        rx="11.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="94.5"
+        y="6.5"
+        width="111"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="218.5"
+        y="6.5"
+        width="19"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="240.5"
+        y="6.5"
+        width="19"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="262.5"
+        y="6.5"
+        width="19"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="284.5"
+        y="6.5"
+        width="11"
+        height="11"
+        rx="5.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="20.5"
+        y="24.5"
+        width="135"
+        height="140"
+        rx="7.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="160.5"
+        y="24.5"
+        width="135"
+        height="140"
+        rx="7.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="4.25"
+        y="24.25"
+        width="11.5"
+        height="140.5"
+        rx="5.75"
+        stroke="var(--_svg-color)"
+        stroke-width="0.5"
+        stroke-dasharray="4 4"
+        fill="transparent"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/assets/javascripts/dap_welcome_modal/components/explainer_search.vue b/app/assets/javascripts/dap_welcome_modal/components/explainer_search.vue
new file mode 100644
index 00000000000000..541e34c94b4aa0
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/explainer_search.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h2 class="gl-heading-2">{{ __('TITLE') }}</h2>
+    <p class="gl-mb-0">
+      {{
+        __(
+          'Other subtle, but usability-driven improvements include the move of the global search box to the top center for improved accessibility, while global navigation elements — including My Issues, Merge Requests, To-Dos, and the user icon — relocate to the top right.',
+        )
+      }}
+    </p>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/assets/javascripts/dap_welcome_modal/components/explainer_sidebar.vue b/app/assets/javascripts/dap_welcome_modal/components/explainer_sidebar.vue
new file mode 100644
index 00000000000000..71b7a42a322953
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/explainer_sidebar.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <h2 class="gl-heading-2">{{ __('TITLE') }}</h2>
+    <p>
+      {{
+        __(
+          'The left navigation menu now collapses and expands to provide flexible sidebar management.',
+        )
+      }}
+    </p>
+    <svg
+      width="300"
+      height="169"
+      viewBox="0 0 300 169"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="299"
+        height="168"
+        rx="11.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="94.5"
+        y="6.5"
+        width="111"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="218.5"
+        y="6.5"
+        width="19"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="240.5"
+        y="6.5"
+        width="19"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="262.5"
+        y="6.5"
+        width="19"
+        height="11"
+        rx="4.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="284.5"
+        y="6.5"
+        width="11"
+        height="11"
+        rx="5.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="20.5"
+        y="24.5"
+        width="275"
+        height="140"
+        rx="7.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="4.25"
+        y="24.25"
+        width="11.5"
+        height="140.5"
+        rx="5.75"
+        stroke="var(--_svg-color)"
+        stroke-width="0.5"
+        stroke-dasharray="4 4"
+        fill="transparent"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/assets/javascripts/dap_welcome_modal/components/explainer_ui.vue b/app/assets/javascripts/dap_welcome_modal/components/explainer_ui.vue
new file mode 100644
index 00000000000000..6416d6082bda55
--- /dev/null
+++ b/app/assets/javascripts/dap_welcome_modal/components/explainer_ui.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <h2 class="gl-heading-2">{{ __('Welcome to the redesigned GitLab UI') }}</h2>
+    <p>
+      {{
+        __(
+          'GitLab 18.5 improves the GitLab user experience with a more usable, intuitive interface driven by a new panel-based layout.',
+        )
+      }}
+    </p>
+
+    <svg
+      width="300"
+      height="169"
+      viewBox="0 0 300 169"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="299"
+        height="168"
+        rx="3.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="6.5"
+        y="36.5"
+        width="63"
+        height="11"
+        rx="3.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <path
+        d="M15 45L13.2013 43.2013M13.2013 43.2013C13.6465 42.7559 13.9218 42.1407 13.9218 41.4612C13.9218 40.1019 12.8201 39 11.4609 39C10.1018 39 9 40.1019 9 41.4612C9 42.8205 10.1018 43.9224 11.4609 43.9224C12.1406 43.9224 12.756 43.6469 13.2013 43.2013Z"
+        stroke="var(--_svg-color)"
+        stroke-width="0.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="transparent"
+      />
+      <rect
+        x="6.5"
+        y="22.5"
+        width="19"
+        height="11"
+        rx="3.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="28.5"
+        y="22.5"
+        width="19"
+        height="11"
+        rx="3.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="50.5"
+        y="22.5"
+        width="19"
+        height="11"
+        rx="3.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <rect
+        x="58.5"
+        y="6.5"
+        width="11"
+        height="11"
+        rx="5.5"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <path
+        d="M296 0.5C297.933 0.5 299.5 2.067 299.5 4V165C299.5 166.933 297.933 168.5 296 168.5H75.5V0.5H296Z"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <path
+        d="M4 0.5H75.5V168.5H4C2.067 168.5 0.5 166.933 0.5 165V4L0.504883 3.82031C0.598422 1.97083 2.12727 0.5 4 0.5Z"
+        stroke="var(--_svg-color)"
+        fill="transparent"
+      />
+      <circle
+        cx="64"
+        cy="11"
+        r="1.75"
+        stroke="var(--_svg-color)"
+        stroke-width="0.5"
+        fill="transparent"
+      />
+      <path
+        d="M60.5 16.5C60.5 15.3333 61.2 13 64 13C66.8 13 67.5 15.3333 67.5 16.5"
+        stroke="var(--_svg-color)"
+        stroke-width="0.5"
+        fill="transparent"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 55ca324bb10238..33165fcc541bb8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -30261,6 +30261,9 @@ msgstr ""
 msgid "GitLab / Unsubscribe"
 msgstr ""
 
+msgid "GitLab 18.5 improves the GitLab user experience with a more usable, intuitive interface driven by a new panel-based layout."
+msgstr ""
+
 msgid "GitLab API"
 msgstr ""
 
@@ -31261,6 +31264,9 @@ msgstr ""
 msgid "Go Micro is a framework for micro service development"
 msgstr ""
 
+msgid "Go Next"
+msgstr ""
+
 msgid "Go back"
 msgstr ""
 
@@ -34092,6 +34098,9 @@ msgstr ""
 msgid "If you don't renew by %{strong}%{downgrades_on}%{strong_close} your instance will become read-only, and you won't be able to create issues or merge requests. You will also lose access to your paid features and support entitlement. %{learn_more_link}"
 msgstr ""
 
+msgid "If you enabled Duo. You can then open the GitLab Duo Chat panel on the right side of the interface as an on-demand assistant, allowing you to engage your agents with contextual questions and instructions from anywhere in the GitLab experience."
+msgstr ""
+
 msgid "If you get a lot of false alarms from repository checks, you can clear all repository check information from the database."
 msgstr ""
 
@@ -35607,9 +35616,6 @@ msgstr ""
 msgid "Interval"
 msgstr ""
 
-msgid "Introducing a GitLab Duo sidebar on the right. Access Duo Agent Platform tools and get instant AI assistance anywhere in GitLab or collapse the sidebar so it gets out of the way."
-msgstr ""
-
 msgid "Introducing embedded views"
 msgstr ""
 
@@ -46342,6 +46348,9 @@ msgstr ""
 msgid "Other merge requests block this MR"
 msgstr ""
 
+msgid "Other subtle, but usability-driven improvements include the move of the global search box to the top center for improved accessibility, while global navigation elements — including My Issues, Merge Requests, To-Dos, and the user icon — relocate to the top right."
+msgstr ""
+
 msgid "Other updates"
 msgstr ""
 
@@ -47426,6 +47435,9 @@ msgstr ""
 msgid "Pagination|« First"
 msgstr ""
 
+msgid "Panels present information side by side, allowing you to work more contextually. When you click on an issue in the issues list, you will see the details in its side panel."
+msgstr ""
+
 msgid "Parameter"
 msgstr ""
 
@@ -49402,6 +49414,9 @@ msgstr ""
 msgid "Please set the admin account password."
 msgstr ""
 
+msgid "Please share your feedback and file bugs on anything you don’t love! Our engineers are listening. Assuming you love the experience as much as our own team, this toggle is expected to be removed in 18.6, making the panel UI standard across all user experiences."
+msgstr ""
+
 msgid "Please solve the captcha"
 msgstr ""
 
@@ -65180,6 +65195,9 @@ msgstr ""
 msgid "System started"
 msgstr ""
 
+msgid "TITLE"
+msgstr ""
+
 msgid "TXT"
 msgstr ""
 
@@ -66307,6 +66325,9 @@ msgstr ""
 msgid "The latest pipeline for this merge request has failed."
 msgstr ""
 
+msgid "The left navigation menu now collapses and expands to provide flexible sidebar management."
+msgstr ""
+
 msgid "The license key is invalid."
 msgstr ""
 
-- 
GitLab