feat(cloud): redesign the cloud onboarding survey

src/locales/en/main.json

@@ -3123,57 +3123,52 @@
   "cloudOnboarding": {
     "skipToCloudApp": "Skip to the cloud app",
     "survey": {
-      "title": "Cloud Survey",
+      "title": "Let's get to know you",
       "placeholder": "Survey questions placeholder",
-      "intro": "Help us tailor your ComfyUI experience.",
+      "intro": "A few quick questions so we can set up ComfyUI for you.",
+      "otherPlaceholder": "Tell us more",
       "errors": {
         "chooseAnOption": "Please choose an option.",
         "selectAtLeastOne": "Please select at least one option.",
-        "describeAnswer": "Please describe your answer."
-      },
-      "steps": {
-        "usage": "How do you plan to use ComfyUI?",
-        "familiarity": "How familiar are you with ComfyUI?",
-        "intent": "What do you want to create with ComfyUI?",
-        "source": "Where did you hear about ComfyUI?"
+        "describeAnswer": "Please describe your answer.",
+        "answerTooLong": "Please keep your answer under {max} characters."
       },
       "options": {
-        "usage": {
-          "personal": "Personal use",
-          "work": "Work",
-          "education": "Education (student or educator)"
+        "intent": {
+          "images": "Images",
+          "video": "Video",
+          "workflows": "Workflows and pipelines",
+          "apps_api": "Apps and APIs",
+          "exploring": "Just exploring",
+          "other": "Something else",
+          "otherPlaceholder": "What do you want to make?"
         },
-        "familiarity": {
-          "new": "New — never used it",
-          "starting": "Beginner — following tutorials",
-          "basics": "Intermediate — comfortable with basics",
-          "advanced": "Advanced — build and edit workflows",
-          "expert": "Expert — I help others"
+        "experience": {
+          "new": "New to ComfyUI",
+          "some": "I know my way around",
+          "pro": "I'm a power user"
         },
-        "intent": {
-          "workflows": "Custom workflows or pipelines",
+        "focus": {
           "custom_nodes": "Custom nodes",
-          "videos": "Videos",
-          "images": "Images",
-          "3d_game": "3D assets / game assets",
-          "audio": "Audio / music",
-          "apps": "Simplified Apps from workflows",
-          "api": "API endpoints to run workflows",
-          "not_sure": "Not sure"
+          "pipelines": "Automated pipelines",
+          "products": "Products for others"
         },
         "source": {
+          "social": "Social media",
+          "friend": "A friend or colleague",
+          "search": "Web search",
+          "community": "A community or forum",
+          "other": "Somewhere else",
+          "otherPlaceholder": "Where did you find us?"
+        },
+        "source_social": {
           "youtube": "YouTube",
           "reddit": "Reddit",
-          "twitter": "Twitter / X",
+          "twitter": "X (Twitter)",
           "instagram": "Instagram",
+          "tiktok": "TikTok",
           "linkedin": "LinkedIn",
-          "friend": "Friend or colleague",
-          "search": "Google / search",
-          "newsletter": "Newsletter or blog",
-          "conference": "Conference or event",
-          "discord": "Discord / community",
-          "github": "GitHub",
-          "other": "Other"
+          "discord": "Discord"
         }
       }
     },
@@ -3266,10 +3261,11 @@
   "cloudForgotPassword_emailRequired": "Email is required",
   "cloudForgotPassword_passwordResetSent": "Password reset sent",
   "cloudForgotPassword_passwordResetError": "Failed to send password reset email",
-  "cloudSurvey_steps_usage": "How do you plan to use ComfyUI?",
-  "cloudSurvey_steps_familiarity": "How familiar are you with ComfyUI?",
-  "cloudSurvey_steps_intent": "What do you want to create with ComfyUI?",
-  "cloudSurvey_steps_source": "Where did you hear about ComfyUI?",
+  "cloudSurvey_steps_intent": "What do you want to make?",
+  "cloudSurvey_steps_experience": "How well do you know ComfyUI?",
+  "cloudSurvey_steps_focus": "What are you building?",
+  "cloudSurvey_steps_source": "How did you find us?",
+  "cloudSurvey_steps_source_social": "Which platform?",
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",

src/platform/cloud/onboarding/CloudSurveyView.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="flex h-[700px] max-h-[85vh] w-[320px] max-w-[90vw] flex-col">
+  <div
+    class="dark-theme flex max-h-[85vh] w-full max-w-md flex-col overflow-y-auto px-4 sm:px-6"
+  >
+    <h1
+      class="-mb-1 font-inter text-xl/8 font-semibold tracking-wide text-primary-comfy-canvas sm:text-2xl/8"
+    >
+      {{ $t('cloudOnboarding.survey.title') }}
+    </h1>
     <DynamicSurveyForm
       :key="activeSurvey.version"
       :survey="activeSurvey"

src/platform/cloud/onboarding/components/CloudTemplate.vue

@@ -13,15 +13,24 @@
       </div>
       <CloudTemplateFooter />
     </div>
-    <div class="relative hidden flex-1 overflow-hidden py-2 pr-2 lg:block">
+    <div
+      v-if="!hideHero"
+      class="relative hidden flex-1 overflow-hidden py-2 pr-2 lg:block"
+    >
       <CloudHeroCarousel />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
 import CloudHeroCarousel from '@/platform/cloud/onboarding/components/CloudHeroCarousel.vue'
 import CloudTemplateFooter from '@/platform/cloud/onboarding/components/CloudTemplateFooter.vue'
+
+const route = useRoute()
+const hideHero = computed(() => Boolean(route.meta.hideHero))
 </script>
 <style>
 @import '../assets/css/fonts.css';

src/platform/cloud/onboarding/components/CloudTemplateFooter.vue

@@ -5,20 +5,22 @@
     <a
       href="https://www.comfy.org/terms-of-service"
       target="_blank"
-      class="cursor-pointer text-sm text-gray-600 no-underline"
+      rel="noopener noreferrer"
+      class="cursor-pointer text-sm text-primary-comfy-canvas/60 no-underline"
     >
       {{ t('auth.login.termsLink') }}
     </a>
     <a
       href="https://www.comfy.org/privacy-policy"
       target="_blank"
-      class="cursor-pointer text-sm text-gray-600 no-underline"
+      rel="noopener noreferrer"
+      class="cursor-pointer text-sm text-primary-comfy-canvas/60 no-underline"
     >
       {{ t('auth.login.privacyLink') }}
     </a>
     <a
       href="https://support.comfy.org"
-      class="cursor-pointer text-sm text-gray-600 no-underline"
+      class="cursor-pointer text-sm text-primary-comfy-canvas/60 no-underline"
       target="_blank"
       rel="noopener noreferrer"
     >

src/platform/cloud/onboarding/onboardingCloudRoutes.ts

@@ -94,7 +94,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
         name: 'cloud-survey',
         component: () =>
           import('@/platform/cloud/onboarding/CloudSurveyView.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true, hideHero: true }
       },
       {
         path: 'oauth/consent',
@@ -106,7 +106,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
         name: 'cloud-user-check',
         component: () =>
           import('@/platform/cloud/onboarding/UserCheckView.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true, hideHero: true }
       },
       {
         path: 'sorry-contact-support',

src/platform/cloud/onboarding/survey/DynamicSurveyField.test.ts

@@ -0,0 +1,176 @@
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+import type { OnboardingSurveyField } from '@/platform/remoteConfig/types'
+
+import DynamicSurveyField from './DynamicSurveyField.vue'
+
+const renderField = (
+  field: OnboardingSurveyField,
+  props: {
+    modelValue?: string | string[]
+    otherValue?: string
+    errorMessage?: string
+  } = {},
+  locale = 'en'
+) =>
+  render(DynamicSurveyField, {
+    global: {
+      plugins: [
+        createI18n({ legacy: false, locale, messages: { en: enMessages } })
+      ]
+    },
+    props: { field, modelValue: undefined, ...props }
+  })
+
+const optionButton = (label: string) =>
+  screen.getByRole('button', { name: label })
+
+describe('DynamicSurveyField', () => {
+  const singleField: OnboardingSurveyField = {
+    id: 'intent',
+    type: 'single',
+    label: 'What do you want to make?',
+    required: true,
+    options: [
+      { value: 'images', label: 'Images', icon: 'icon-[lucide--image]' },
+      { value: 'video', label: 'Video' }
+    ]
+  }
+
+  it('renders the label and one card per option', () => {
+    renderField(singleField)
+    expect(screen.getByText('What do you want to make?')).toBeVisible()
+    expect(screen.getByText('Images')).toBeInTheDocument()
+    expect(screen.getByText('Video')).toBeInTheDocument()
+  })
+
+  it('emits the chosen value for a single-select card', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderField(singleField)
+
+    await user.click(screen.getByText('Images'))
+    expect(emitted()['update:modelValue']?.[0]).toEqual(['images'])
+  })
+
+  it('marks the selected single card as on (aria-pressed/state)', () => {
+    renderField(singleField, { modelValue: 'images' })
+    expect(optionButton('Images')).toHaveAttribute('data-state', 'on')
+    expect(optionButton('Video')).toHaveAttribute('data-state', 'off')
+  })
+
+  it('gives each option card a stable "<fieldId>-<value>" id', () => {
+    renderField(singleField)
+    expect(optionButton('Images')).toHaveAttribute('id', 'intent-images')
+    expect(optionButton('Video')).toHaveAttribute('id', 'intent-video')
+  })
+
+  const multiField: OnboardingSurveyField = {
+    id: 'making',
+    type: 'multi',
+    label: 'Pick some',
+    required: true,
+    options: [
+      { value: 'a', label: 'Making A' },
+      { value: 'b', label: 'Making B' }
+    ]
+  }
+
+  it('emits an array for a multi-select card and reflects current selection', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderField(multiField, { modelValue: ['a'] })
+
+    expect(optionButton('Making A')).toHaveAttribute('data-state', 'on')
+    await user.click(screen.getByText('Making B'))
+    const events = emitted()['update:modelValue'] as unknown[][] | undefined
+    const last = events?.at(-1)?.[0]
+    expect(last).toEqual(expect.arrayContaining(['a', 'b']))
+  })
+
+  it('shows the "other" free-text input only when "other" is selected and emits it', async () => {
+    const user = userEvent.setup()
+    const otherField: OnboardingSurveyField = {
+      id: 'source',
+      type: 'single',
+      label: 'How did you find us?',
+      required: true,
+      allowOther: true,
+      otherFieldId: 'sourceOther',
+      options: [
+        { value: 'search', label: 'Web search' },
+        { value: 'other', label: 'Somewhere else' }
+      ]
+    }
+
+    const { rerender, emitted } = renderField(otherField, {
+      modelValue: 'search'
+    })
+    expect(
+      screen.queryByPlaceholderText('Where did you find us?')
+    ).not.toBeInTheDocument()
+
+    await rerender({ field: otherField, modelValue: 'other', otherValue: '' })
+    const input = screen.getByPlaceholderText('Where did you find us?')
+    await user.type(input, 'A podcast')
+    expect(emitted()['update:otherValue']?.length).toBeGreaterThan(0)
+  })
+
+  it('renders a text field and emits typed input', async () => {
+    const user = userEvent.setup()
+    const textField: OnboardingSurveyField = {
+      id: 'note',
+      type: 'text',
+      label: 'Anything else?',
+      placeholder: 'Your note'
+    }
+    const { emitted } = renderField(textField)
+
+    await user.type(screen.getByPlaceholderText('Your note'), 'Hi')
+    expect(emitted()['update:modelValue']?.length).toBeGreaterThan(0)
+  })
+
+  it('resolves labels via labelKey, locale map, and falls back to the value', () => {
+    renderField(
+      {
+        id: 'q',
+        type: 'single',
+        labelKey: 'cloudSurvey_steps_intent',
+        options: [
+          { value: 'x', label: { en: 'Ex', ko: '엑스' } },
+          { value: 'raw' } // no label → falls back to the value
+        ]
+      },
+      {}
+    )
+    expect(screen.getByText('What do you want to make?')).toBeVisible()
+    expect(screen.getByText('Ex')).toBeInTheDocument()
+    expect(screen.getByText('raw')).toBeInTheDocument()
+  })
+
+  it('resolves a field label from a locale map when no labelKey is set', () => {
+    renderField({
+      id: 'q',
+      type: 'single',
+      label: { en: 'Server question', ko: '서버 질문' },
+      options: [{ value: 'a', label: 'A' }]
+    })
+    expect(screen.getByText('Server question')).toBeVisible()
+  })
+
+  it('falls back to the field id when neither labelKey nor label resolves', () => {
+    renderField({
+      id: 'bare_field_id',
+      type: 'single',
+      options: [{ value: 'a', label: 'A' }]
+    })
+    expect(screen.getByText('bare_field_id')).toBeVisible()
+  })
+
+  it('renders the error message when provided', () => {
+    renderField(singleField, { errorMessage: 'Please choose an option.' })
+    expect(screen.getByText('Please choose an option.')).toBeVisible()
+  })
+})