From 9fab9d98caaeaff8709cca6cd1c427856b779617 Mon Sep 17 00:00:00 2001
From: Julien Dan <julien.dan50@gmail.com>
Date: Tue, 7 Jul 2026 16:38:09 +0200
Subject: [PATCH] feat(onboarding): improve checklist wording and target
 project visibility

Rework cluster/service checklist copy for clarity, add the "Spec to Prod"
use case and widen the RDE access CTA to related AI use cases, and always
show (but disable in create mode) the target project field in the
create/clone environment modal.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../section-onboarding/section-onboarding.tsx |  16 +--
 ...eate-clone-environment-modal.spec.tsx.snap | 100 +++++++++++++++++-
 .../create-clone-environment-modal.tsx        |  45 ++++----
 .../src/lib/step-use-cases/step-use-cases.tsx |   9 +-
 4 files changed, 133 insertions(+), 37 deletions(-)

diff --git a/apps/console/src/app/components/section-onboarding/section-onboarding.tsx b/apps/console/src/app/components/section-onboarding/section-onboarding.tsx
index ae860f8459e..efc33a0edeb 100644
--- a/apps/console/src/app/components/section-onboarding/section-onboarding.tsx
+++ b/apps/console/src/app/components/section-onboarding/section-onboarding.tsx
@@ -158,7 +158,7 @@ export function SectionOnboarding() {
 
   const useCases = useMemo(() => (onboarding?.use_cases ?? '').split(',').filter(Boolean), [onboarding?.use_cases])
   const hasEphemeralEnvironments = useCases.includes('ephemeral-environments')
-  const hasRde = useCases.includes('rde')
+  const hasRde = ['rde', 'ai-workflows', 'spec-to-prod'].some((useCase) => useCases.includes(useCase))
 
   const { data: deploymentRule } = useDeploymentRule({
     environmentId: firstEnvironment?.id ?? '',
@@ -313,7 +313,7 @@ export function SectionOnboarding() {
     {
       highlight: true,
       tag: 'Recommended',
-      title: 'Qovery managed',
+      title: 'Create a new cluster (Qovery Managed)',
       description:
         'Qovery will install and manage the Kubernetes cluster and the underlying infrastructure on your cloud provider account.',
       icon: <LogoIcon width="14" height="14" />,
@@ -347,10 +347,10 @@ export function SectionOnboarding() {
     {
       highlight: false,
       tag: 'Demo',
-      title: 'Local machine',
+      title: 'Local Machine',
       icon: 'laptop-code',
       description:
-        'Deploy a local Kubernetes cluster on your laptop using Docker Desktop. No cloud account or credit card required!',
+        'The best choice for exploration and testing. Deploy a local Kubernetes cluster on your laptop using Docker Desktop, no cloud account or credit card required!',
       compatibleWith: null,
       action: 'installation-guide' as const,
       isDemo: true,
@@ -467,7 +467,7 @@ export function SectionOnboarding() {
                   isClusterDeployed ? 'text-neutral-subtle line-through' : 'text-neutral'
                 )}
               >
-                Create and deploy my first cluster
+                Install Qovery
               </span>
               {isClusterDeployed ? (
                 <Icon iconName="circle-check" className="text-sm text-positive" />
@@ -575,7 +575,7 @@ export function SectionOnboarding() {
                     : 'text-neutral-subtle'
               )}
             >
-              Create and deploy my first application
+              Go to my environment to create and deploy my first application
             </span>
             {isServiceDeployed ? (
               <Icon iconName="circle-check" className="text-sm text-positive" />
@@ -639,7 +639,7 @@ export function SectionOnboarding() {
                 size="sm"
                 color="neutral"
                 variant="solid"
-                to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
+                to="/organization/$organizationId/project/$projectId/environment/$environmentId/overview"
                 params={{
                   organizationId,
                   projectId: firstProject?.id ?? '',
@@ -647,7 +647,7 @@ export function SectionOnboarding() {
                 }}
               >
                 <Icon iconName="circle-plus" />
-                New Service
+                Go to my environment
               </Link>
             ) : null}
           </div>
diff --git a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
index 15937c0f0f6..74fc7c4789f 100644
--- a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
@@ -66,6 +66,98 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="mb-3"
+        >
+          <div
+            class="input input--select !pointer-events-none !border-neutral !bg-surface-neutral-subtle input--label-up"
+            data-testid="select"
+          >
+            <label
+              class="input__label translate-y-[7px] text-sm !text-neutral-subtle"
+              for="Target project"
+            >
+              Target project
+            </label>
+            <div
+              class="input-select--is-disabled css-3iigni-container"
+            >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
+              <div
+                class="input-select__control input-select__control--is-disabled css-16xfy0z-control"
+              >
+                <div
+                  class="input-select__value-container input-select__value-container--has-value css-1fdsijx-ValueContainer"
+                >
+                  <span
+                    class="mr-1 text-sm text-neutral-subtle"
+                  >
+                    Project 1
+                  </span>
+                  <input
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-readonly="true"
+                    class="css-mohuvp-dummyInput-DummyInput"
+                    disabled=""
+                    id="Target project"
+                    inputmode="none"
+                    role="combobox"
+                    tabindex="0"
+                    value=""
+                  />
+                </div>
+                <div
+                  class="input-select__indicators css-1hb7zxy-IndicatorsContainer"
+                >
+                  <span
+                    class="input-select__indicator-separator css-894a34-indicatorSeparator"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="input-select__indicator input-select__dropdown-indicator css-1xc3v61-indicatorContainer"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="css-tj5bde-Svg"
+                      focusable="false"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      width="20"
+                    >
+                      <path
+                        d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <input
+              name="Target project"
+              type="hidden"
+              value="1"
+            />
+            <div
+              class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2"
+            >
+              <i
+                aria-hidden="true"
+                class="fa-solid fa-angle-down text-sm text-neutral-disabled"
+              />
+            </div>
+          </div>
+        </div>
         <div
           class="mb-3"
         >
@@ -84,7 +176,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-6-live-region"
               />
               <span
                 aria-atomic="false"
@@ -100,13 +192,13 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
                 >
                   <div
                     class="input-select__placeholder css-1jqq78o-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-6-placeholder"
                   >
                     Select...
                   </div>
                   <input
                     aria-autocomplete="list"
-                    aria-describedby="react-select-4-placeholder"
+                    aria-describedby="react-select-6-placeholder"
                     aria-expanded="false"
                     aria-haspopup="true"
                     aria-readonly="true"
@@ -193,7 +285,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-7-live-region"
               />
               <span
                 aria-atomic="false"
diff --git a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
index 1a8af88bfdd..cfaa62868ad 100644
--- a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
+++ b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
@@ -194,29 +194,28 @@ export function CreateCloneEnvironmentModal({
             />
           )}
         />
-        {environmentToClone && (
-          <Controller
-            name="project_id"
-            control={methods.control}
-            rules={{
-              required: 'Please select a target project.',
-            }}
-            render={({ field, fieldState: { error } }) => (
-              <InputSelect
-                className="mb-3"
-                onChange={field.onChange}
-                value={field.value}
-                label="Target project"
-                error={error?.message}
-                options={projects.map((p) => ({
-                  value: p.id,
-                  label: p.name,
-                }))}
-                portal
-              />
-            )}
-          />
-        )}
+        <Controller
+          name="project_id"
+          control={methods.control}
+          rules={{
+            required: 'Please select a target project.',
+          }}
+          render={({ field, fieldState: { error } }) => (
+            <InputSelect
+              className="mb-3"
+              onChange={field.onChange}
+              value={field.value}
+              label="Target project"
+              error={error?.message}
+              options={projects.map((p) => ({
+                value: p.id,
+                label: p.name,
+              }))}
+              disabled={!environmentToClone}
+              portal
+            />
+          )}
+        />
         <Controller
           name="cluster"
           control={methods.control}
diff --git a/libs/domains/onboarding/feature/src/lib/step-use-cases/step-use-cases.tsx b/libs/domains/onboarding/feature/src/lib/step-use-cases/step-use-cases.tsx
index 8c101e2ee1f..5d30f00d779 100644
--- a/libs/domains/onboarding/feature/src/lib/step-use-cases/step-use-cases.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-use-cases/step-use-cases.tsx
@@ -14,6 +14,11 @@ const USE_CASES: Array<{ value: string; label: string; iconName: IconName }> = [
     label: 'Enable my non-tech team to ship apps',
     iconName: 'users',
   },
+  {
+    value: 'spec-to-prod',
+    label: 'Go from spec to production with AI coding agents',
+    iconName: 'diagram-project',
+  },
   {
     value: 'automate-deployments',
     label: 'Automate deployments without manual steps',
@@ -84,13 +89,13 @@ export function StepUseCases({ onSubmit, onBack }: StepUseCasesProps) {
       <h1 className="h3 mb-3 text-neutral">What are you looking to do?</h1>
       <p className="mb-10 text-sm text-neutral">Select all that apply.</p>
       <div className="grid grid-cols-6 gap-3">
-        {USE_CASES.map((useCase, index) => (
+        {USE_CASES.map((useCase) => (
           <UseCaseCard
             key={useCase.value}
             value={useCase.value}
             label={useCase.label}
             iconName={useCase.iconName}
-            colSpan={index < 2 ? 'col-span-3' : 'col-span-2'}
+            colSpan="col-span-2"
             selected={selected.includes(useCase.value)}
             onToggle={toggle}
           />