From dfc80faf7d0e51900e826cefbb29cbc2396f54c5 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 12:58:06 +0200
Subject: [PATCH 1/9] feat(onboarding): simplify app details flow

---
 messages/en.context.json                      |  11 +
 messages/en.json                              |  11 +
 .../dashboard/AppOnboardingFlow.vue           | 194 ++++++++++++++++--
 .../dashboard/AppOnboardingIconInput.vue      |  70 ++++++-
 src/utils/onboardingProgressAnalytics.ts      |  68 +++++-
 tests/app-onboarding-file-input.unit.test.ts  |  18 +-
 ...boarding-progress-integration.unit.test.ts |   3 +-
 tests/app-onboarding-v2.unit.test.ts          |  55 +++++
 ...rding-details-field-debouncer.unit.test.ts |  45 ++++
 ...onboarding-progress-analytics.unit.test.ts |  27 ++-
 10 files changed, 461 insertions(+), 41 deletions(-)
 create mode 100644 tests/app-onboarding-v2.unit.test.ts
 create mode 100644 tests/onboarding-details-field-debouncer.unit.test.ts

diff --git a/messages/en.context.json b/messages/en.context.json
index 7a4dcf8cba..f171e99d57 100644
--- a/messages/en.context.json
+++ b/messages/en.context.json
@@ -426,8 +426,10 @@
   "app-onboarding-explore-dashboard-confirm-title": "Used in Capgo web console areas: components. Role: section or dialog title. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-exploring-subtitle": "Used in Capgo web console areas: components/dashboard. Role: UI sentence. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-exploring-title": "Used in Capgo web console areas: components/dashboard. Role: section or dialog title. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
+  "app-onboarding-icon-choose-file": "Used in pre-organization app onboarding. Role: button that opens the native image file picker.",
   "app-onboarding-icon-help": "Used in Capgo web console areas: components/dashboard. Role: helper or description text. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-icon-label": "Used in Capgo web console areas: components/dashboard. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
+  "app-onboarding-icon-no-file-selected": "Used in pre-organization app onboarding. Role: status shown before an app icon file is selected.",
   "app-onboarding-icon-preview-alt": "Used in Capgo web console areas: components/dashboard. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-install-badge": "Used in Capgo web console areas: components/dashboard. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-install-ready-title": "Used in app onboarding flow. Role: section or dialog title about \"app onboarding install ready title\". Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
@@ -477,6 +479,14 @@
   "app-onboarding-toast-no-organization": "Used in Capgo web console areas: components/dashboard. Role: toast or status message. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-toast-resume-not-found": "Used in Capgo web console areas: components/dashboard. Role: toast or status message. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-onboarding-toast-store-metadata-error": "Used in Capgo web console areas: components/dashboard. Role: toast or status message. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
+  "app-onboarding-v2-ai-help-status": "Used in the pre-organization app onboarding AI help prompt. Role: status clarifying that store publication is optional.",
+  "app-onboarding-v2-appid-dialog-description": "Used in pre-organization app onboarding. Role: dialog text explaining that Capgo's App ID may differ from native project IDs.",
+  "app-onboarding-v2-appid-dialog-title": "Used in pre-organization app onboarding. Role: title for the App ID explanation dialog.",
+  "app-onboarding-v2-appid-help": "Used in the pre-organization app onboarding flow. Role: helper text explaining which native project identifier to enter.",
+  "app-onboarding-v2-details-helper": "Used in the pre-organization app onboarding flow. Role: helper text clarifying that store publication is not required.",
+  "app-onboarding-v2-details-title": "Used in the pre-organization app onboarding flow. Role: section title for entering app details.",
+  "app-onboarding-v2-store-import-help": "Used in the pre-organization app onboarding flow. Role: helper text for the optional store import.",
+  "app-onboarding-v2-store-import-toggle": "Used in the pre-organization app onboarding flow. Role: button that reveals the optional store import controls.",
   "app-perm": "Used in Capgo web console areas: components/tables. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-to-channel": "Used in Capgo web console areas: pages/admin/dashboard. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "app-transferred": "Used in Capgo web console areas: components/dashboard. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
@@ -1495,6 +1505,7 @@
   "key-upload": "Used in Capgo web console. Role: short UI label about \"key upload\". Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "key-write": "Used in Capgo web console. Role: short UI label about \"key write\". Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "language": "Used in Capgo web console areas: pages/settings/account. Role: short UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
+  "learn-more": "Used in pre-organization app onboarding. Role: button opening additional App ID guidance.",
   "last": "Used in Capgo web console. Role: short UI label about \"last\". Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "last-1-hour": "Used in Capgo web console areas: services. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
   "last-12-hours": "Used in Capgo web console areas: services. Role: UI label. Translate for UI; keep Capgo product names, code, and placeholders unchanged.",
diff --git a/messages/en.json b/messages/en.json
index 38a44399a5..af0704a5fe 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -408,8 +408,10 @@
   "app-onboarding-existing-yes-helper": "Import details from the store listing or enter the package ID manually.",
   "app-onboarding-exploring-subtitle": "Demo data is temporary — your real app is waiting.",
   "app-onboarding-exploring-title": "Exploring the Capgo dashboard",
+  "app-onboarding-icon-choose-file": "Choose file",
   "app-onboarding-icon-help": "The icon is optional. If you import from a store listing, Capgo will try to reuse the store icon automatically.",
   "app-onboarding-icon-label": "App icon",
+  "app-onboarding-icon-no-file-selected": "No file selected",
   "app-onboarding-icon-preview-alt": "App icon preview",
   "app-onboarding-install-badge": "CLI onboarding",
   "app-onboarding-explore-dashboard": "Explore Capgo dashboard",
@@ -462,6 +464,14 @@
   "app-onboarding-toast-no-organization": "No organization selected.",
   "app-onboarding-toast-resume-not-found": "Unable to find the onboarding app.",
   "app-onboarding-toast-store-metadata-error": "Unable to fetch metadata from that store link.",
+  "app-onboarding-v2-ai-help-status": "Existing mobile project; store publication is optional",
+  "app-onboarding-v2-appid-dialog-description": "Capgo uses this App ID to identify the app in the dashboard and CLI. It is often the same as your native project ID, but it does not have to be. Changing it here does not change your iOS Bundle Identifier, Android Application ID, Capacitor appId, or store listing.",
+  "app-onboarding-v2-appid-dialog-title": "How does the Capgo App ID work?",
+  "app-onboarding-v2-appid-help": "Choose the ID Capgo should use for this app. It may differ from your native project IDs.",
+  "app-onboarding-v2-details-helper": "Enter the details from your project. Your app does not need to be published on the App Store or Google Play.",
+  "app-onboarding-v2-details-title": "Add your app details",
+  "app-onboarding-v2-store-import-help": "Paste a store link to prefill the app name, App ID, and icon when available.",
+  "app-onboarding-v2-store-import-toggle": "Import details from the App Store or Google Play",
   "app-not-found": "App not found",
   "app-not-found-description": "This app could not be found. It might have been deleted or you might not have access to it.",
   "app-perm": "App permission",
@@ -1422,6 +1432,7 @@
   "key-upload": "Upload",
   "key-write": "Write",
   "language": "Language",
+  "learn-more": "Learn more",
   "last": "Last",
   "last-12-months": "Last 12 Months",
   "last-30-minutes": "Last 30 minutes",
diff --git a/src/components/dashboard/AppOnboardingFlow.vue b/src/components/dashboard/AppOnboardingFlow.vue
index e62fd83b4a..8ae1f282ff 100644
--- a/src/components/dashboard/AppOnboardingFlow.vue
+++ b/src/components/dashboard/AppOnboardingFlow.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Database } from '~/types/supabase.types'
 import type {
+  OnboardingDetailsEvent,
+  OnboardingDetailsEventProperties,
   OnboardingIntent,
   OnboardingStepCompletionProperties,
 } from '~/utils/onboardingProgressAnalytics'
@@ -41,7 +43,7 @@ import {
   clearOnboardingAppDraft,
   loadOnboardingAppDraft,
 } from '~/utils/onboardingAppDraft'
-import { createOnboardingProgressTracker } from '~/utils/onboardingProgressAnalytics'
+import { createOnboardingDetailsFieldDebouncer, createOnboardingProgressTracker } from '~/utils/onboardingProgressAnalytics'
 import { allowOnboardingDashboardExploration } from '~/utils/onboardingRedirect'
 import { slugifyOnboardingSegment } from '~/utils/onboardingSlug'
 import AppOnboardingIconInput from './AppOnboardingIconInput.vue'
@@ -158,10 +160,12 @@ const resumeStep = computed(() => {
   const value = route.query.step
   return value === 'choice' || value === 'install' || value === 'setup' ? value : null
 })
-const canUseStoreImportPreview = computed(() => existingApp.value === true && existingAppSetup.value === 'import')
+const canUseStoreImportPreview = computed(() => existingAppSetup.value === 'import' && (props.preOrg || existingApp.value === true))
 const iconPreview = computed(() => localIconPreview.value || (canUseStoreImportPreview.value ? storeIconPreview.value : '') || '')
 const hasImportedStoreMetadata = computed(() => canUseStoreImportPreview.value && !!(importedStoreAppId.value || storeIconPreview.value || storeScreenshotPreview.value))
 const canShowAppDetails = computed(() => {
+  if (props.preOrg)
+    return true
   if (existingApp.value === false)
     return true
   if (existingApp.value === true)
@@ -188,9 +192,11 @@ const generatedAppId = computed(() => createdApp.value?.app_id || manualAppId.va
 const aiHelpPrompt = computed(() => {
   const resolvedAppId = createdApp.value?.app_id || generatedAppId.value || '[APP_ID]'
   const resolvedAppName = createdApp.value?.name?.trim() || appName.value.trim() || resolvedAppId
-  const appStatus = createdApp.value?.existing_app
-    ? t('app-onboarding-ai-help-status-existing')
-    : t('app-onboarding-ai-help-status-new')
+  const appStatus = props.preOrg
+    ? t('app-onboarding-v2-ai-help-status')
+    : createdApp.value?.existing_app
+      ? t('app-onboarding-ai-help-status-existing')
+      : t('app-onboarding-ai-help-status-new')
 
   return t('app-onboarding-ai-help-prompt', {
     appName: resolvedAppName,
@@ -240,6 +246,13 @@ const setupSubtitle = computed(() => usesBuilderSetupCommand.value ? t('unified-
 
 let progressTracker: ReturnType<typeof createOnboardingProgressTracker> | null = null
 
+function trackV2DetailsEvent(name: OnboardingDetailsEvent, details: OnboardingDetailsEventProperties = {}) {
+  if (props.preOrg)
+    progressTracker?.trackDetailsEvent(name, details)
+}
+
+const detailsFieldTracker = createOnboardingDetailsFieldDebouncer(trackV2DetailsEvent)
+
 function initializeProgressTracking(resumed: boolean) {
   const trackedSteps = appOnboardingSteps.value.map(step => step.id)
   if (!props.preOrg && resumed && flowStep.value === 'setup')
@@ -360,6 +373,17 @@ function resetStoreImportState() {
   isImportingStore.value = false
 }
 
+function togglePreOrgStoreImport() {
+  if (existingAppSetup.value === 'import') {
+    trackV2DetailsEvent('onboarding_store_import_hidden')
+    existingAppSetup.value = 'manual'
+    return
+  }
+
+  trackV2DetailsEvent('onboarding_store_import_shown')
+  existingAppSetup.value = 'import'
+}
+
 let resumeIconLoadRun = 0
 async function loadResumeIconPreview(rawIconUrl: string | null | undefined, appId: string, run: number) {
   if (!rawIconUrl || getImmediateImageUrl(rawIconUrl)) {
@@ -453,6 +477,7 @@ async function importStoreMetadata() {
   if (!requestedUrl || existingAppSetup.value !== 'import')
     return
 
+  trackV2DetailsEvent('onboarding_store_import_submitted', { store_url: requestedUrl })
   const requestedRun = ++storeImportRun
   isImportingStore.value = true
   try {
@@ -483,12 +508,18 @@ async function importStoreMetadata() {
 
     if (typeof data?.app_id === 'string' && data.app_id.trim())
       importedStoreAppId.value = data.app_id.trim()
+
+    if (props.preOrg)
+      existingApp.value = true
+
+    trackV2DetailsEvent('onboarding_store_import_succeeded', { store_url: requestedUrl })
   }
   catch (error) {
     if (requestedRun !== storeImportRun || existingAppSetup.value !== 'import' || storeUrl.value.trim() !== requestedUrl)
       return
 
     console.error('Cannot import store metadata', error)
+    trackV2DetailsEvent('onboarding_store_import_failed', { store_url: requestedUrl })
     toast.error(t('app-onboarding-toast-store-metadata-error'))
   }
   finally {
@@ -510,12 +541,49 @@ function onSelectIconFormKit(value: unknown) {
     URL.revokeObjectURL(localIconPreview.value)
   localIconPreview.value = file ? URL.createObjectURL(file) : ''
   isResumeIconLoading.value = false
+  if (file)
+    trackV2DetailsEvent('onboarding_app_icon_picked', { icon_source: 'file' })
+}
+
+function onIconPickerOpened() {
+  trackV2DetailsEvent('onboarding_app_icon_picker_opened')
+}
+
+function onIconPickerOpenFailed() {
+  trackV2DetailsEvent('onboarding_app_icon_picker_open_failed')
+}
+
+function onIconPickerClosedWithoutSelection() {
+  trackV2DetailsEvent('onboarding_app_icon_picker_closed_without_selection')
+}
+
+function onAppNameInput(event: Event) {
+  detailsFieldTracker.schedule('onboarding_app_name_entered', 'app_name', (event.target as HTMLInputElement).value)
 }
 
 function onAppIdInput(event: Event) {
   hasEditedAppId.value = true
   manualAppId.value = (event.target as HTMLInputElement).value
   appIdFeedback.value = ''
+  detailsFieldTracker.schedule('onboarding_app_id_entered', 'app_id', manualAppId.value)
+}
+
+function onStoreUrlInput(event: Event) {
+  detailsFieldTracker.schedule('onboarding_store_url_entered', 'store_url', (event.target as HTMLInputElement).value)
+}
+
+function openAppIdHelp() {
+  trackV2DetailsEvent('onboarding_app_id_help_opened')
+  dialogStore.openDialog({
+    title: t('app-onboarding-v2-appid-dialog-title'),
+    description: t('app-onboarding-v2-appid-dialog-description'),
+    buttons: [
+      {
+        text: t('close'),
+        role: 'primary',
+      },
+    ],
+  })
 }
 
 function applyAppIdSuggestion(suggestion: string) {
@@ -547,8 +615,13 @@ async function uploadIcon(appId: string, iconSourceUrl?: string) {
     }
   }
 
-  if (!fileToUpload)
+  if (!fileToUpload) {
+    if (iconSourceUrl)
+      trackV2DetailsEvent('onboarding_app_icon_upload_failed', { icon_source: 'store' })
     return
+  }
+
+  const iconSource = selectedIconFile.value ? 'file' : 'store'
 
   const iconPath = `org/${currentOrg.value.gid}/${appId}/icon`
   const { error: uploadError } = await supabase.storage
@@ -560,13 +633,22 @@ async function uploadIcon(appId: string, iconSourceUrl?: string) {
 
   if (uploadError) {
     console.error('Cannot upload app icon', uploadError)
+    trackV2DetailsEvent('onboarding_app_icon_upload_failed', { icon_source: iconSource })
     return
   }
 
-  await supabase
+  const { error: appUpdateError } = await supabase
     .from('apps')
     .update({ icon_url: iconPath })
     .eq('app_id', appId)
+
+  if (appUpdateError) {
+    console.error('Cannot save app icon path', appUpdateError)
+    trackV2DetailsEvent('onboarding_app_icon_upload_failed', { icon_source: iconSource })
+    return
+  }
+
+  trackV2DetailsEvent('onboarding_app_icon_uploaded', { icon_source: iconSource })
 }
 
 function ensureValidAppId(): boolean {
@@ -631,11 +713,6 @@ function continueFromIntent() {
 }
 
 function continuePreOrgDetails() {
-  if (existingApp.value === null) {
-    toast.error(t('app-onboarding-toast-existing-required'))
-    return
-  }
-
   if (!appName.value.trim()) {
     toast.error(t('app-onboarding-toast-name-required'))
     return
@@ -649,6 +726,9 @@ function continuePreOrgDetails() {
   if (!ensureValidAppId())
     return
 
+  // Store publication is unrelated to whether the user already has a mobile project.
+  existingApp.value = true
+
   completeAndViewStep('organization', {
     storeImportUsed: hasImportedStoreMetadata.value,
   })
@@ -930,7 +1010,11 @@ onMounted(async () => {
   isLoading.value = true
   try {
     if (props.preOrg) {
-      restoreDraftState()
+      const restoredDraft = restoreDraftState()
+      if (!restoredDraft || existingAppSetup.value !== 'import') {
+        existingApp.value = true
+        existingAppSetup.value = 'manual'
+      }
       flowStep.value = 'intent'
       return
     }
@@ -955,11 +1039,21 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
+  detailsFieldTracker.dispose()
+
   if (localIconPreview.value.startsWith('blob:'))
     URL.revokeObjectURL(localIconPreview.value)
 })
 
 watch(existingApp, (value) => {
+  if (props.preOrg) {
+    if (value === false)
+      estimatedUsersIndex.value = 0
+    appIdSuggestions.value = []
+    appIdFeedback.value = ''
+    return
+  }
+
   existingAppSetup.value = value === true ? null : value === false ? 'manual' : null
   if (value !== true) {
     resetStoreImportState()
@@ -1080,11 +1174,16 @@ watch(appName, (value) => {
                   {{ t('app-onboarding-step-details') }}
                 </p>
                 <h2 class="mt-2 text-2xl font-semibold text-slate-950 dark:text-white">
-                  {{ t('app-onboarding-existing-question') }}
+                  {{ props.preOrg
+                    ? t('app-onboarding-v2-details-title')
+                    : t('app-onboarding-existing-question') }}
                 </h2>
+                <p v-if="props.preOrg" class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
+                  {{ t('app-onboarding-v2-details-helper') }}
+                </p>
               </div>
 
-              <div class="grid gap-3 sm:grid-cols-2">
+              <div v-if="!props.preOrg" class="grid gap-3 sm:grid-cols-2">
                 <button
                   type="button"
                   :aria-pressed="existingApp === true"
@@ -1131,7 +1230,7 @@ watch(appName, (value) => {
                 </button>
               </div>
 
-              <div v-if="existingApp === true" class="space-y-5 border-t border-slate-200 pt-6 dark:border-white/15">
+              <div v-if="!props.preOrg && existingApp === true" class="space-y-5 border-t border-slate-200 pt-6 dark:border-white/15">
                 <div>
                   <p class="text-sm font-semibold text-slate-950 dark:text-white">
                     {{ t('app-onboarding-start-question') }}
@@ -1218,6 +1317,7 @@ watch(appName, (value) => {
                     class="mt-2 min-h-12 w-full rounded-xl border border-slate-300 bg-white px-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/10 dark:border-white/20 dark:bg-slate-950/90 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-primary-500 dark:focus:ring-primary-500/30"
                     :placeholder="t('app-onboarding-name-placeholder')"
                     maxlength="100"
+                    @input="onAppNameInput"
                   >
                 </div>
 
@@ -1231,10 +1331,21 @@ watch(appName, (value) => {
                     @input="onAppIdInput"
                   >
                   <p class="mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400">
-                    {{ existingApp
-                      ? t('app-onboarding-appid-help-existing')
-                      : t('app-onboarding-appid-help-new') }}
+                    {{ props.preOrg
+                      ? t('app-onboarding-v2-appid-help')
+                      : existingApp
+                        ? t('app-onboarding-appid-help-existing')
+                        : t('app-onboarding-appid-help-new') }}
                   </p>
+                  <button
+                    v-if="props.preOrg"
+                    type="button"
+                    class="mt-1 text-sm font-medium text-primary-500 underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                    data-test="app-onboarding-appid-learn-more"
+                    @click="openAppIdHelp()"
+                  >
+                    {{ t('learn-more') }}
+                  </button>
                   <output v-if="appIdFeedback" class="mt-2 block text-sm font-medium text-amber-700 dark:text-amber-300" for="app-onboarding-app-id">
                     {{ appIdFeedback }}
                   </output>
@@ -1251,9 +1362,54 @@ watch(appName, (value) => {
                   </div>
                 </div>
 
+                <div v-if="props.preOrg" class="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-white/15 dark:bg-slate-950/60">
+                  <button
+                    type="button"
+                    class="d-btn min-h-10"
+                    :class="whiteCardSecondaryButtonClass()"
+                    :aria-expanded="existingAppSetup === 'import'"
+                    data-test="app-onboarding-toggle-store-import"
+                    @click="togglePreOrgStoreImport()"
+                  >
+                    <IconStore class="h-4 w-4" />
+                    <span>{{ t('app-onboarding-v2-store-import-toggle') }}</span>
+                  </button>
+
+                  <div v-if="existingAppSetup === 'import'" class="mt-4 border-t border-slate-200 pt-4 dark:border-white/15">
+                    <label for="app-onboarding-v2-store-url" class="text-sm font-medium text-slate-800 dark:text-slate-200">
+                      {{ t('app-onboarding-store-link-label') }}
+                    </label>
+                    <div class="mt-2 flex flex-col gap-3 sm:flex-row">
+                      <input
+                        id="app-onboarding-v2-store-url"
+                        v-model="storeUrl"
+                        class="min-h-12 w-full rounded-xl border border-slate-300 bg-white px-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/10 dark:border-white/20 dark:bg-slate-950/90 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-primary-500 dark:focus:ring-primary-500/30"
+                        :placeholder="t('app-onboarding-store-link-placeholder')"
+                        type="url"
+                        @input="onStoreUrlInput"
+                      >
+                      <button class="d-btn min-h-12 shrink-0" :class="whiteCardPrimaryButtonClass()" :disabled="isImportingStore || !storeUrl" @click="importStoreMetadata()">
+                        <IconLoader v-if="isImportingStore" class="h-4 w-4 animate-spin" />
+                        <IconSparkles v-else class="h-4 w-4" />
+                        <span>{{ t('app-onboarding-store-import-button') }}</span>
+                      </button>
+                    </div>
+                    <p class="mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400" aria-live="polite">
+                      {{ hasImportedStoreMetadata
+                        ? t('app-onboarding-store-imported-help')
+                        : t('app-onboarding-v2-store-import-help') }}
+                    </p>
+                  </div>
+                </div>
+
                 <div>
                   <AppOnboardingIconInput
                     :label="t('app-onboarding-icon-label')"
+                    :choose-label="t('app-onboarding-icon-choose-file')"
+                    :empty-label="t('app-onboarding-icon-no-file-selected')"
+                    @picker-closed-without-selection="onIconPickerClosedWithoutSelection"
+                    @picker-open-failed="onIconPickerOpenFailed"
+                    @picker-opened="onIconPickerOpened"
                     @update:model-value="onSelectIconFormKit"
                   />
                   <p class="mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400">
diff --git a/src/components/dashboard/AppOnboardingIconInput.vue b/src/components/dashboard/AppOnboardingIconInput.vue
index 75232ac5f4..b823d8d7bc 100644
--- a/src/components/dashboard/AppOnboardingIconInput.vue
+++ b/src/components/dashboard/AppOnboardingIconInput.vue
@@ -1,22 +1,70 @@
 <script setup lang="ts">
-import { FormKit } from '@formkit/vue'
+import { ref } from 'vue'
 
 defineProps<{
+  chooseLabel: string
+  emptyLabel: string
   label: string
 }>()
 
+const emit = defineEmits<{
+  pickerClosedWithoutSelection: []
+  pickerOpenFailed: []
+  pickerOpened: []
+}>()
+
 const modelValue = defineModel<unknown>()
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFileName = ref('')
+
+function openFilePicker() {
+  try {
+    if (!fileInput.value)
+      throw new Error('File input is unavailable')
+    fileInput.value.click()
+    emit('pickerOpened')
+  }
+  catch {
+    emit('pickerOpenFailed')
+  }
+}
+
+function onFileSelected(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0] ?? null
+  if (!file) {
+    emit('pickerClosedWithoutSelection')
+    return
+  }
+
+  selectedFileName.value = file.name
+  modelValue.value = file
+}
 </script>
 
 <template>
-  <FormKit
-    v-model="modelValue"
-    type="file"
-    :label="label"
-    accept="image/*"
-    outer-class="mt-0"
-    label-class="text-sm font-medium text-slate-800 dark:text-slate-200"
-    input-class="mt-2 block w-full min-h-11 text-sm text-slate-600 file:mr-3 file:min-h-9 file:rounded-lg file:border-0 file:bg-slate-100 file:px-3 file:text-sm file:font-medium file:text-slate-700 dark:text-slate-300 dark:file:bg-slate-800 dark:file:text-slate-200"
-    no-files-class="text-slate-600! dark:text-slate-300!"
-  />
+  <div>
+    <p class="text-sm font-medium text-slate-800 dark:text-slate-200">
+      {{ label }}
+    </p>
+    <div class="mt-2 flex min-h-11 items-center gap-3">
+      <button
+        type="button"
+        class="d-btn min-h-10 border-slate-200 bg-slate-100 text-slate-700 hover:bg-slate-200 dark:border-white/15 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+        @click="openFilePicker"
+      >
+        {{ chooseLabel }}
+      </button>
+      <span class="min-w-0 truncate text-sm text-slate-600 dark:text-slate-300">
+        {{ selectedFileName || emptyLabel }}
+      </span>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      hidden
+      @cancel="emit('pickerClosedWithoutSelection')"
+      @change="onFileSelected"
+    >
+  </div>
 </template>
diff --git a/src/utils/onboardingProgressAnalytics.ts b/src/utils/onboardingProgressAnalytics.ts
index a78a5bc9f5..34e86561cf 100644
--- a/src/utils/onboardingProgressAnalytics.ts
+++ b/src/utils/onboardingProgressAnalytics.ts
@@ -1,10 +1,26 @@
 import { pushEvent } from '~/services/posthog'
 
-export const ONBOARDING_ANALYTICS_VERSION = 1
+export const ONBOARDING_ANALYTICS_VERSION = 2
 
 export type OnboardingAnalyticsFlow = 'pre_org' | 'existing_org'
 export type OnboardingAnalyticsStep = 'intent' | 'details' | 'organization' | 'choice' | 'install' | 'setup'
 export type OnboardingIntent = 'ota' | 'builder' | 'both' | 'exploring'
+export type OnboardingDetailsEvent
+  = | 'onboarding_app_id_entered'
+    | 'onboarding_app_id_help_opened'
+    | 'onboarding_app_icon_picked'
+    | 'onboarding_app_icon_picker_closed_without_selection'
+    | 'onboarding_app_icon_picker_open_failed'
+    | 'onboarding_app_icon_picker_opened'
+    | 'onboarding_app_icon_upload_failed'
+    | 'onboarding_app_icon_uploaded'
+    | 'onboarding_app_name_entered'
+    | 'onboarding_store_import_failed'
+    | 'onboarding_store_import_hidden'
+    | 'onboarding_store_import_shown'
+    | 'onboarding_store_import_submitted'
+    | 'onboarding_store_import_succeeded'
+    | 'onboarding_store_url_entered'
 
 type AnalyticsPrimitive = string | number | boolean | null
 type AnalyticsProperties = Record<string, AnalyticsPrimitive>
@@ -17,6 +33,47 @@ export interface OnboardingStepCompletionProperties {
   storeImportUsed?: boolean
 }
 
+export interface OnboardingDetailsEventProperties {
+  app_id?: string
+  app_name?: string
+  icon_source?: 'file' | 'store'
+  store_url?: string
+}
+
+export type OnboardingDetailsFieldProperty = keyof Pick<OnboardingDetailsEventProperties, 'app_id' | 'app_name' | 'store_url'>
+
+export function createOnboardingDetailsFieldDebouncer(
+  emit: (name: OnboardingDetailsEvent, properties: OnboardingDetailsEventProperties) => void,
+  delayMs = 1_000,
+) {
+  const timers = new Map<OnboardingDetailsFieldProperty, ReturnType<typeof setTimeout>>()
+
+  function schedule(name: OnboardingDetailsEvent, property: OnboardingDetailsFieldProperty, value: string) {
+    const activeTimer = timers.get(property)
+    if (activeTimer)
+      clearTimeout(activeTimer)
+
+    const normalizedValue = value.trim()
+    if (!normalizedValue) {
+      timers.delete(property)
+      return
+    }
+
+    timers.set(property, setTimeout(() => {
+      emit(name, { [property]: normalizedValue })
+      timers.delete(property)
+    }, delayMs))
+  }
+
+  function dispose() {
+    for (const timer of timers.values())
+      clearTimeout(timer)
+    timers.clear()
+  }
+
+  return { dispose, schedule }
+}
+
 interface CreateOnboardingProgressTrackerOptions {
   capture?: CaptureEvent
   flow: OnboardingAnalyticsFlow
@@ -101,8 +158,17 @@ export function createOnboardingProgressTracker(options: CreateOnboardingProgres
     safelyCapture('onboarding_step_completed', properties)
   }
 
+  function trackDetailsEvent(name: OnboardingDetailsEvent, details: OnboardingDetailsEventProperties = {}) {
+    const properties = sharedProperties('details')
+    if (!properties)
+      return
+
+    safelyCapture(name, { ...properties, ...details })
+  }
+
   return {
     completeStep,
+    trackDetailsEvent,
     viewStep,
   }
 }
diff --git a/tests/app-onboarding-file-input.unit.test.ts b/tests/app-onboarding-file-input.unit.test.ts
index 00c55ad8e0..b0982b4791 100644
--- a/tests/app-onboarding-file-input.unit.test.ts
+++ b/tests/app-onboarding-file-input.unit.test.ts
@@ -1,24 +1,26 @@
 // @vitest-environment happy-dom
 
-import { defaultConfig, plugin } from '@formkit/vue'
 import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
 import { renderToString } from 'vue/server-renderer'
-import { rootClasses } from '../formkit.theme'
 import AppOnboardingIconInput from '../src/components/dashboard/AppOnboardingIconInput.vue'
 
 describe('app onboarding file input', () => {
   it('keeps the rendered empty file status visible in dark mode', async () => {
-    const app = createSSRApp(AppOnboardingIconInput, { label: 'App icon' })
-    app.use(plugin, defaultConfig({ config: { rootClasses } }))
+    const app = createSSRApp(AppOnboardingIconInput, {
+      chooseLabel: 'Choose file',
+      emptyLabel: 'No file selected',
+      label: 'App icon',
+    })
 
     const html = await renderToString(app)
     const container = document.createElement('div')
     container.innerHTML = html
-    const noFiles = container.querySelector('.formkit-noFiles')
+    const noFiles = Array.from(container.querySelectorAll('span'))
+      .find(element => element.textContent?.trim() === 'No file selected')
 
-    expect(noFiles).not.toBeNull()
-    expect(noFiles?.classList.contains('text-slate-600!')).toBe(true)
-    expect(noFiles?.classList.contains('dark:text-slate-300!')).toBe(true)
+    expect(noFiles).toBeDefined()
+    expect(noFiles?.classList.contains('text-slate-600')).toBe(true)
+    expect(noFiles?.classList.contains('dark:text-slate-300')).toBe(true)
   })
 })
diff --git a/tests/app-onboarding-progress-integration.unit.test.ts b/tests/app-onboarding-progress-integration.unit.test.ts
index a1c7afa329..a87408e4d2 100644
--- a/tests/app-onboarding-progress-integration.unit.test.ts
+++ b/tests/app-onboarding-progress-integration.unit.test.ts
@@ -9,7 +9,8 @@ function sourceBetween(start: string, end: string) {
 
 describe('app onboarding progress analytics integration', () => {
   it.concurrent('initializes tracking once the real initial or resumed step is resolved', () => {
-    expect(onboardingSource).toContain("import { createOnboardingProgressTracker } from '~/utils/onboardingProgressAnalytics'")
+    expect(onboardingSource).toContain('createOnboardingProgressTracker')
+    expect(onboardingSource).toContain("from '~/utils/onboardingProgressAnalytics'")
 
     const initializer = sourceBetween('function initializeProgressTracking(', 'function whiteCardToggleButtonClass(')
     expect(initializer).toContain("flow: props.preOrg ? 'pre_org' : 'existing_org'")
diff --git a/tests/app-onboarding-v2.unit.test.ts b/tests/app-onboarding-v2.unit.test.ts
new file mode 100644
index 0000000000..8ce1ab79f5
--- /dev/null
+++ b/tests/app-onboarding-v2.unit.test.ts
@@ -0,0 +1,55 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const onboardingSource = readFileSync(new URL('../src/components/dashboard/AppOnboardingFlow.vue', import.meta.url), 'utf8')
+const iconInputSource = readFileSync(new URL('../src/components/dashboard/AppOnboardingIconInput.vue', import.meta.url), 'utf8')
+
+function sourceBetween(start: string, end: string) {
+  return onboardingSource.slice(onboardingSource.indexOf(start), onboardingSource.indexOf(end))
+}
+
+describe('pre-organization onboarding v2 app details', () => {
+  it.concurrent('shows app name and App ID without asking about store publication', () => {
+    const detailsTemplate = sourceBetween('<div v-if="flowStep === \'details\'">', '<div v-else-if="props.preOrg && flowStep === \'organization\'"')
+
+    expect(detailsTemplate).toContain('v-if="!props.preOrg"')
+    expect(detailsTemplate).toContain('data-test="app-onboarding-name"')
+    expect(detailsTemplate).toContain('id="app-onboarding-app-id"')
+    expect(onboardingSource).toContain('if (props.preOrg)\n    return true')
+  })
+
+  it.concurrent('keeps store import optional and inline for pre-organization onboarding', () => {
+    expect(onboardingSource).toContain('data-test="app-onboarding-toggle-store-import"')
+    expect(onboardingSource).toContain(':aria-expanded="existingAppSetup === \'import\'"')
+    expect(onboardingSource).toContain('id="app-onboarding-v2-store-url"')
+    expect(onboardingSource).toContain('// Store publication is unrelated to whether the user already has a mobile project.')
+    expect(onboardingSource).toContain('existingApp.value = true')
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_shown')")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_hidden')")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_submitted'")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_succeeded'")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_failed'")
+  })
+
+  it.concurrent('tracks native app icon picker and upload outcomes', () => {
+    expect(iconInputSource).toContain("emit('pickerOpened')")
+    expect(iconInputSource).toContain("emit('pickerOpenFailed')")
+    expect(iconInputSource).toContain("emit('pickerClosedWithoutSelection')")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_app_icon_picked'")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_app_icon_uploaded'")
+    expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_app_icon_upload_failed'")
+  })
+
+  it.concurrent('opens App ID guidance and tracks only the open action', () => {
+    const appIdHelp = sourceBetween('function openAppIdHelp()', 'function applyAppIdSuggestion(')
+    expect(appIdHelp).toContain("trackV2DetailsEvent('onboarding_app_id_help_opened')")
+    expect(appIdHelp).toContain('dialogStore.openDialog({')
+    expect(appIdHelp).not.toContain('onDialogDismiss')
+  })
+
+  it.concurrent('preserves the existing-organization publication choices', () => {
+    expect(onboardingSource).toContain('data-test="app-onboarding-existing-yes"')
+    expect(onboardingSource).toContain('data-test="app-onboarding-existing-no"')
+    expect(onboardingSource).toContain('v-if="!props.preOrg && existingApp === true"')
+  })
+})
diff --git a/tests/onboarding-details-field-debouncer.unit.test.ts b/tests/onboarding-details-field-debouncer.unit.test.ts
new file mode 100644
index 0000000000..f8b289973c
--- /dev/null
+++ b/tests/onboarding-details-field-debouncer.unit.test.ts
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createOnboardingDetailsFieldDebouncer } from '../src/utils/onboardingProgressAnalytics'
+
+describe('onboarding details field analytics debounce', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('emits the latest non-empty value one second after the last keystroke', () => {
+    vi.useFakeTimers()
+    const emit = vi.fn()
+    const tracker = createOnboardingDetailsFieldDebouncer(emit)
+
+    tracker.schedule('onboarding_app_name_entered', 'app_name', 'Example')
+    vi.advanceTimersByTime(750)
+    tracker.schedule('onboarding_app_name_entered', 'app_name', '  Example App  ')
+    vi.advanceTimersByTime(999)
+    expect(emit).not.toHaveBeenCalled()
+
+    vi.advanceTimersByTime(1)
+    expect(emit).toHaveBeenCalledOnce()
+    expect(emit).toHaveBeenCalledWith('onboarding_app_name_entered', { app_name: 'Example App' })
+  })
+
+  it('tracks fields independently and cancels pending empty or disposed values', () => {
+    vi.useFakeTimers()
+    const emit = vi.fn()
+    const tracker = createOnboardingDetailsFieldDebouncer(emit)
+
+    tracker.schedule('onboarding_app_name_entered', 'app_name', 'Discard me')
+    tracker.schedule('onboarding_app_name_entered', 'app_name', '   ')
+    tracker.schedule('onboarding_app_id_entered', 'app_id', 'com.example.app')
+    tracker.schedule('onboarding_store_url_entered', 'store_url', 'https://apps.apple.com/example')
+    vi.advanceTimersByTime(1_000)
+
+    expect(emit).toHaveBeenCalledTimes(2)
+    expect(emit).toHaveBeenCalledWith('onboarding_app_id_entered', { app_id: 'com.example.app' })
+    expect(emit).toHaveBeenCalledWith('onboarding_store_url_entered', { store_url: 'https://apps.apple.com/example' })
+
+    tracker.schedule('onboarding_app_name_entered', 'app_name', 'Never emitted')
+    tracker.dispose()
+    vi.runAllTimers()
+    expect(emit).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/tests/onboarding-progress-analytics.unit.test.ts b/tests/onboarding-progress-analytics.unit.test.ts
index b101c39f4d..f240ea4f6d 100644
--- a/tests/onboarding-progress-analytics.unit.test.ts
+++ b/tests/onboarding-progress-analytics.unit.test.ts
@@ -20,7 +20,7 @@ describe('onboarding progress analytics', () => {
 
     tracker.viewStep('intent')
 
-    expect(ONBOARDING_ANALYTICS_VERSION).toBe(1)
+    expect(ONBOARDING_ANALYTICS_VERSION).toBe(2)
     expect(capture).toHaveBeenCalledOnce()
     expect(capture).toHaveBeenCalledWith(
       'onboarding_step_viewed',
@@ -112,6 +112,31 @@ describe('onboarding progress analytics', () => {
     })
   })
 
+  it.concurrent('associates app-details interaction events with the active onboarding attempt', () => {
+    const capture = vi.fn()
+    const tracker = createOnboardingProgressTracker({
+      capture,
+      flow: 'pre_org',
+      resumed: false,
+      steps,
+      supaHost: 'https://supabase.capgo.test',
+    })
+
+    tracker.trackDetailsEvent('onboarding_app_name_entered', { app_name: 'Example App' })
+
+    expect(capture).toHaveBeenCalledWith(
+      'onboarding_app_name_entered',
+      'https://supabase.capgo.test',
+      expect.objectContaining({
+        app_name: 'Example App',
+        flow: 'pre_org',
+        onboarding_attempt_id: expect.any(String),
+        onboarding_version: 2,
+        step: 'details',
+      }),
+    )
+  })
+
   it.concurrent('deduplicates completion for one visit and resets timing after back navigation', () => {
     let now = 10
     const capture = vi.fn()

From 57b61f8e790460902b70bacf989aedce9a68ab02 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 13:05:54 +0200
Subject: [PATCH 2/9] test(onboarding): update registration flow for v2

---
 playwright/e2e/register.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/playwright/e2e/register.spec.ts b/playwright/e2e/register.spec.ts
index 68d3ec6d30..f679d42629 100644
--- a/playwright/e2e/register.spec.ts
+++ b/playwright/e2e/register.spec.ts
@@ -38,7 +38,6 @@ test.describe('Registration', () => {
     await page.click('[data-test="onboarding-intent-ota"]')
     await page.click('[data-test="app-onboarding-continue-intent"]')
 
-    await page.click('[data-test="app-onboarding-existing-no"]')
     await page.fill('[data-test="app-onboarding-name"]', appName)
     await page.click('[data-test="app-onboarding-continue"]')
 

From 1cf6aa8d2fd23dd17d26886d651673f48ecfe55b Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 13:10:15 +0200
Subject: [PATCH 3/9] fix(onboarding): avoid raw values in analytics

---
 .../dashboard/AppOnboardingFlow.vue           |  6 +++---
 src/utils/onboardingProgressAnalytics.ts      | 20 +++++++++----------
 tests/app-onboarding-v2.unit.test.ts          |  9 +++++++++
 ...rding-details-field-debouncer.unit.test.ts |  6 +++---
 ...onboarding-progress-analytics.unit.test.ts |  4 ++--
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/dashboard/AppOnboardingFlow.vue b/src/components/dashboard/AppOnboardingFlow.vue
index 8ae1f282ff..c9d1be43c3 100644
--- a/src/components/dashboard/AppOnboardingFlow.vue
+++ b/src/components/dashboard/AppOnboardingFlow.vue
@@ -477,7 +477,7 @@ async function importStoreMetadata() {
   if (!requestedUrl || existingAppSetup.value !== 'import')
     return
 
-  trackV2DetailsEvent('onboarding_store_import_submitted', { store_url: requestedUrl })
+  trackV2DetailsEvent('onboarding_store_import_submitted')
   const requestedRun = ++storeImportRun
   isImportingStore.value = true
   try {
@@ -512,14 +512,14 @@ async function importStoreMetadata() {
     if (props.preOrg)
       existingApp.value = true
 
-    trackV2DetailsEvent('onboarding_store_import_succeeded', { store_url: requestedUrl })
+    trackV2DetailsEvent('onboarding_store_import_succeeded')
   }
   catch (error) {
     if (requestedRun !== storeImportRun || existingAppSetup.value !== 'import' || storeUrl.value.trim() !== requestedUrl)
       return
 
     console.error('Cannot import store metadata', error)
-    trackV2DetailsEvent('onboarding_store_import_failed', { store_url: requestedUrl })
+    trackV2DetailsEvent('onboarding_store_import_failed')
     toast.error(t('app-onboarding-toast-store-metadata-error'))
   }
   finally {
diff --git a/src/utils/onboardingProgressAnalytics.ts b/src/utils/onboardingProgressAnalytics.ts
index 34e86561cf..9173a26621 100644
--- a/src/utils/onboardingProgressAnalytics.ts
+++ b/src/utils/onboardingProgressAnalytics.ts
@@ -34,34 +34,32 @@ export interface OnboardingStepCompletionProperties {
 }
 
 export interface OnboardingDetailsEventProperties {
-  app_id?: string
-  app_name?: string
+  field_length?: number
   icon_source?: 'file' | 'store'
-  store_url?: string
 }
 
-export type OnboardingDetailsFieldProperty = keyof Pick<OnboardingDetailsEventProperties, 'app_id' | 'app_name' | 'store_url'>
+export type OnboardingDetailsField = 'app_id' | 'app_name' | 'store_url'
 
 export function createOnboardingDetailsFieldDebouncer(
   emit: (name: OnboardingDetailsEvent, properties: OnboardingDetailsEventProperties) => void,
   delayMs = 1_000,
 ) {
-  const timers = new Map<OnboardingDetailsFieldProperty, ReturnType<typeof setTimeout>>()
+  const timers = new Map<OnboardingDetailsField, ReturnType<typeof setTimeout>>()
 
-  function schedule(name: OnboardingDetailsEvent, property: OnboardingDetailsFieldProperty, value: string) {
-    const activeTimer = timers.get(property)
+  function schedule(name: OnboardingDetailsEvent, field: OnboardingDetailsField, value: string) {
+    const activeTimer = timers.get(field)
     if (activeTimer)
       clearTimeout(activeTimer)
 
     const normalizedValue = value.trim()
     if (!normalizedValue) {
-      timers.delete(property)
+      timers.delete(field)
       return
     }
 
-    timers.set(property, setTimeout(() => {
-      emit(name, { [property]: normalizedValue })
-      timers.delete(property)
+    timers.set(field, setTimeout(() => {
+      emit(name, { field_length: normalizedValue.length })
+      timers.delete(field)
     }, delayMs))
   }
 
diff --git a/tests/app-onboarding-v2.unit.test.ts b/tests/app-onboarding-v2.unit.test.ts
index 8ce1ab79f5..f5294d2e8f 100644
--- a/tests/app-onboarding-v2.unit.test.ts
+++ b/tests/app-onboarding-v2.unit.test.ts
@@ -29,6 +29,15 @@ describe('pre-organization onboarding v2 app details', () => {
     expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_submitted'")
     expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_succeeded'")
     expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_store_import_failed'")
+    expect(onboardingSource).not.toContain("{ store_url: requestedUrl }")
+  })
+
+  it.concurrent('does not send raw onboarding field values to analytics', () => {
+    expect(onboardingSource).toContain("detailsFieldTracker.schedule('onboarding_app_name_entered', 'app_name'")
+    expect(onboardingSource).toContain("detailsFieldTracker.schedule('onboarding_app_id_entered', 'app_id'")
+    expect(onboardingSource).toContain("detailsFieldTracker.schedule('onboarding_store_url_entered', 'store_url'")
+    expect(onboardingSource).not.toContain('{ app_name:')
+    expect(onboardingSource).not.toContain('{ store_url:')
   })
 
   it.concurrent('tracks native app icon picker and upload outcomes', () => {
diff --git a/tests/onboarding-details-field-debouncer.unit.test.ts b/tests/onboarding-details-field-debouncer.unit.test.ts
index f8b289973c..629ac2a17e 100644
--- a/tests/onboarding-details-field-debouncer.unit.test.ts
+++ b/tests/onboarding-details-field-debouncer.unit.test.ts
@@ -19,7 +19,7 @@ describe('onboarding details field analytics debounce', () => {
 
     vi.advanceTimersByTime(1)
     expect(emit).toHaveBeenCalledOnce()
-    expect(emit).toHaveBeenCalledWith('onboarding_app_name_entered', { app_name: 'Example App' })
+    expect(emit).toHaveBeenCalledWith('onboarding_app_name_entered', { field_length: 11 })
   })
 
   it('tracks fields independently and cancels pending empty or disposed values', () => {
@@ -34,8 +34,8 @@ describe('onboarding details field analytics debounce', () => {
     vi.advanceTimersByTime(1_000)
 
     expect(emit).toHaveBeenCalledTimes(2)
-    expect(emit).toHaveBeenCalledWith('onboarding_app_id_entered', { app_id: 'com.example.app' })
-    expect(emit).toHaveBeenCalledWith('onboarding_store_url_entered', { store_url: 'https://apps.apple.com/example' })
+    expect(emit).toHaveBeenCalledWith('onboarding_app_id_entered', { field_length: 15 })
+    expect(emit).toHaveBeenCalledWith('onboarding_store_url_entered', { field_length: 30 })
 
     tracker.schedule('onboarding_app_name_entered', 'app_name', 'Never emitted')
     tracker.dispose()
diff --git a/tests/onboarding-progress-analytics.unit.test.ts b/tests/onboarding-progress-analytics.unit.test.ts
index f240ea4f6d..3a17d72378 100644
--- a/tests/onboarding-progress-analytics.unit.test.ts
+++ b/tests/onboarding-progress-analytics.unit.test.ts
@@ -122,13 +122,13 @@ describe('onboarding progress analytics', () => {
       supaHost: 'https://supabase.capgo.test',
     })
 
-    tracker.trackDetailsEvent('onboarding_app_name_entered', { app_name: 'Example App' })
+    tracker.trackDetailsEvent('onboarding_app_name_entered', { field_length: 11 })
 
     expect(capture).toHaveBeenCalledWith(
       'onboarding_app_name_entered',
       'https://supabase.capgo.test',
       expect.objectContaining({
-        app_name: 'Example App',
+        field_length: 11,
         flow: 'pre_org',
         onboarding_attempt_id: expect.any(String),
         onboarding_version: 2,

From 7750a183d69d3d51681353be871682ea35160617 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 13:18:54 +0200
Subject: [PATCH 4/9] test(onboarding): select organization scale

---
 playwright/e2e/register.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playwright/e2e/register.spec.ts b/playwright/e2e/register.spec.ts
index f679d42629..3fd2a914dc 100644
--- a/playwright/e2e/register.spec.ts
+++ b/playwright/e2e/register.spec.ts
@@ -44,6 +44,7 @@ test.describe('Registration', () => {
     await expectProtectedRouteRedirect(page, '/apps', /\/onboarding\/app/, '[data-test="onboarding-logout"]')
 
     await expect(page.locator('[data-test="onboarding-org-name"]')).toHaveValue(appName)
+    await page.locator('[data-test="onboarding-estimated-users-option"]').first().click()
     await page.getByRole('button', { name: 'Back', exact: true }).click()
     await page.fill('[data-test="app-onboarding-name"]', editedAppName)
     await page.click('[data-test="app-onboarding-continue"]')

From c86f7276d3872d81049271778ed2a098b56eb473 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 13:28:02 +0200
Subject: [PATCH 5/9] fix(onboarding): satisfy frontend quality checks

---
 src/components/dashboard/AppOnboardingFlow.vue      | 12 ++++++------
 src/components/dashboard/AppOnboardingIconInput.vue |  5 +++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/dashboard/AppOnboardingFlow.vue b/src/components/dashboard/AppOnboardingFlow.vue
index c9d1be43c3..54c58c5ef4 100644
--- a/src/components/dashboard/AppOnboardingFlow.vue
+++ b/src/components/dashboard/AppOnboardingFlow.vue
@@ -192,11 +192,11 @@ const generatedAppId = computed(() => createdApp.value?.app_id || manualAppId.va
 const aiHelpPrompt = computed(() => {
   const resolvedAppId = createdApp.value?.app_id || generatedAppId.value || '[APP_ID]'
   const resolvedAppName = createdApp.value?.name?.trim() || appName.value.trim() || resolvedAppId
-  const appStatus = props.preOrg
-    ? t('app-onboarding-v2-ai-help-status')
-    : createdApp.value?.existing_app
-      ? t('app-onboarding-ai-help-status-existing')
-      : t('app-onboarding-ai-help-status-new')
+  let appStatus = t('app-onboarding-ai-help-status-new')
+  if (props.preOrg)
+    appStatus = t('app-onboarding-v2-ai-help-status')
+  else if (createdApp.value?.existing_app)
+    appStatus = t('app-onboarding-ai-help-status-existing')
 
   return t('app-onboarding-ai-help-prompt', {
     appName: resolvedAppName,
@@ -1388,7 +1388,7 @@ watch(appName, (value) => {
                         type="url"
                         @input="onStoreUrlInput"
                       >
-                      <button class="d-btn min-h-12 shrink-0" :class="whiteCardPrimaryButtonClass()" :disabled="isImportingStore || !storeUrl" @click="importStoreMetadata()">
+                      <button type="button" class="d-btn min-h-12 shrink-0" :class="whiteCardPrimaryButtonClass()" :disabled="isImportingStore || !storeUrl" @click="importStoreMetadata()">
                         <IconLoader v-if="isImportingStore" class="h-4 w-4 animate-spin" />
                         <IconSparkles v-else class="h-4 w-4" />
                         <span>{{ t('app-onboarding-store-import-button') }}</span>
diff --git a/src/components/dashboard/AppOnboardingIconInput.vue b/src/components/dashboard/AppOnboardingIconInput.vue
index b823d8d7bc..8d55fabd5e 100644
--- a/src/components/dashboard/AppOnboardingIconInput.vue
+++ b/src/components/dashboard/AppOnboardingIconInput.vue
@@ -43,9 +43,9 @@ function onFileSelected(event: Event) {
 
 <template>
   <div>
-    <p class="text-sm font-medium text-slate-800 dark:text-slate-200">
+    <label for="app-onboarding-icon-input" class="text-sm font-medium text-slate-800 dark:text-slate-200">
       {{ label }}
-    </p>
+    </label>
     <div class="mt-2 flex min-h-11 items-center gap-3">
       <button
         type="button"
@@ -59,6 +59,7 @@ function onFileSelected(event: Event) {
       </span>
     </div>
     <input
+      id="app-onboarding-icon-input"
       ref="fileInput"
       type="file"
       accept="image/*"

From 982b2aabfeea540c67fae55bfac4c54fcbb37776 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 13:48:50 +0200
Subject: [PATCH 6/9] fix(onboarding): address review findings

---
 playwright/e2e/register.spec.ts               |  4 ++++
 .../dashboard/AppOnboardingFlow.vue           |  6 +++--
 .../dashboard/AppOnboardingIconInput.vue      |  3 ++-
 src/services/adminFrontendOnboarding.ts       |  2 +-
 src/utils/onboardingProgressAnalytics.ts      | 10 ++++++++-
 .../utils/frontend_onboarding_analytics.ts    |  2 +-
 .../frontend_onboarding_analytics_model.ts    |  2 +-
 ...frontend-onboarding-dashboard.unit.test.ts |  2 +-
 tests/app-onboarding-file-input.unit.test.ts  |  3 +++
 ...boarding-progress-integration.unit.test.ts |  3 +--
 tests/app-onboarding-v2.unit.test.ts          | 22 ++-----------------
 ...frontend-onboarding-analytics.unit.test.ts |  6 ++---
 ...rding-details-field-debouncer.unit.test.ts |  5 +++--
 13 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/playwright/e2e/register.spec.ts b/playwright/e2e/register.spec.ts
index 3fd2a914dc..92a8da3510 100644
--- a/playwright/e2e/register.spec.ts
+++ b/playwright/e2e/register.spec.ts
@@ -38,6 +38,10 @@ test.describe('Registration', () => {
     await page.click('[data-test="onboarding-intent-ota"]')
     await page.click('[data-test="app-onboarding-continue-intent"]')
 
+    await expect(page.locator('[data-test="app-onboarding-existing-yes"]')).toHaveCount(0)
+    await expect(page.locator('[data-test="app-onboarding-existing-no"]')).toHaveCount(0)
+    await expect(page.locator('[data-test="app-onboarding-name"]')).toBeVisible()
+    await expect(page.locator('#app-onboarding-app-id')).toBeVisible()
     await page.fill('[data-test="app-onboarding-name"]', appName)
     await page.click('[data-test="app-onboarding-continue"]')
 
diff --git a/src/components/dashboard/AppOnboardingFlow.vue b/src/components/dashboard/AppOnboardingFlow.vue
index 54c58c5ef4..ce48081a92 100644
--- a/src/components/dashboard/AppOnboardingFlow.vue
+++ b/src/components/dashboard/AppOnboardingFlow.vue
@@ -601,8 +601,10 @@ async function uploadIcon(appId: string, iconSourceUrl?: string) {
   if (!fileToUpload && iconSourceUrl) {
     try {
       const parsedIconUrl = new URL(iconSourceUrl)
-      if (parsedIconUrl.protocol !== 'https:') {
-        console.warn('Skipping non-HTTPS icon URL', iconSourceUrl)
+      const isRemoteImage = parsedIconUrl.protocol === 'https:'
+      const isInlineImage = parsedIconUrl.protocol === 'data:' && iconSourceUrl.startsWith('data:image/')
+      if (!isRemoteImage && !isInlineImage) {
+        console.warn('Skipping unsupported icon URL', iconSourceUrl)
       }
       else {
         const response = await fetch(parsedIconUrl.toString())
diff --git a/src/components/dashboard/AppOnboardingIconInput.vue b/src/components/dashboard/AppOnboardingIconInput.vue
index 8d55fabd5e..b1d18c8479 100644
--- a/src/components/dashboard/AppOnboardingIconInput.vue
+++ b/src/components/dashboard/AppOnboardingIconInput.vue
@@ -21,6 +21,7 @@ function openFilePicker() {
   try {
     if (!fileInput.value)
       throw new Error('File input is unavailable')
+    fileInput.value.value = ''
     fileInput.value.click()
     emit('pickerOpened')
   }
@@ -54,7 +55,7 @@ function onFileSelected(event: Event) {
       >
         {{ chooseLabel }}
       </button>
-      <span class="min-w-0 truncate text-sm text-slate-600 dark:text-slate-300">
+      <span aria-live="polite" class="min-w-0 truncate text-sm text-slate-600 dark:text-slate-300">
         {{ selectedFileName || emptyLabel }}
       </span>
     </div>
diff --git a/src/services/adminFrontendOnboarding.ts b/src/services/adminFrontendOnboarding.ts
index b0ac4310e5..f88fa509be 100644
--- a/src/services/adminFrontendOnboarding.ts
+++ b/src/services/adminFrontendOnboarding.ts
@@ -14,7 +14,7 @@ export interface FrontendOnboardingComparison {
 }
 
 export interface FrontendOnboardingAnalytics {
-  onboarding_version: 1
+  onboarding_version: 2
   kpis: {
     attempts: number
     completed: number
diff --git a/src/utils/onboardingProgressAnalytics.ts b/src/utils/onboardingProgressAnalytics.ts
index 9173a26621..6efc295e5d 100644
--- a/src/utils/onboardingProgressAnalytics.ts
+++ b/src/utils/onboardingProgressAnalytics.ts
@@ -45,6 +45,7 @@ export function createOnboardingDetailsFieldDebouncer(
   delayMs = 1_000,
 ) {
   const timers = new Map<OnboardingDetailsField, ReturnType<typeof setTimeout>>()
+  const pending = new Map<OnboardingDetailsField, { name: OnboardingDetailsEvent, properties: OnboardingDetailsEventProperties }>()
 
   function schedule(name: OnboardingDetailsEvent, field: OnboardingDetailsField, value: string) {
     const activeTimer = timers.get(field)
@@ -54,19 +55,26 @@ export function createOnboardingDetailsFieldDebouncer(
     const normalizedValue = value.trim()
     if (!normalizedValue) {
       timers.delete(field)
+      pending.delete(field)
       return
     }
 
+    const event = { name, properties: { field_length: normalizedValue.length } }
+    pending.set(field, event)
     timers.set(field, setTimeout(() => {
-      emit(name, { field_length: normalizedValue.length })
+      emit(event.name, event.properties)
       timers.delete(field)
+      pending.delete(field)
     }, delayMs))
   }
 
   function dispose() {
     for (const timer of timers.values())
       clearTimeout(timer)
+    for (const event of pending.values())
+      emit(event.name, event.properties)
     timers.clear()
+    pending.clear()
   }
 
   return { dispose, schedule }
diff --git a/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts b/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
index 5731697f54..6b68531a9d 100644
--- a/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
+++ b/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
@@ -113,7 +113,7 @@ export function buildFrontendOnboardingHogql(startDate: string, cohortEndDate: s
       FROM events
       WHERE event = 'onboarding_step_viewed'
         AND JSONExtractString(toString(properties), 'flow') = 'pre_org'
-        AND toIntOrZero(toString(properties.onboarding_version)) = 1
+        AND toIntOrZero(toString(properties.onboarding_version)) = ${FRONTEND_ONBOARDING_VERSION}
         AND timestamp >= parseDateTimeBestEffort(${sqlStr(startDate)})
         AND timestamp < parseDateTimeBestEffort(${sqlStr(followupEndDate)})
     )
diff --git a/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts b/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts
index eaf649c08e..dd4fc593b8 100644
--- a/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts
+++ b/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts
@@ -1,4 +1,4 @@
-export const FRONTEND_ONBOARDING_VERSION = 1 as const
+export const FRONTEND_ONBOARDING_VERSION = 2 as const
 export const FRONTEND_ONBOARDING_FOLLOWUP_MS = 24 * 60 * 60 * 1000
 
 export type FrontendOnboardingStageKey = 'intent' | 'details' | 'organization' | 'setup'
diff --git a/tests/admin-frontend-onboarding-dashboard.unit.test.ts b/tests/admin-frontend-onboarding-dashboard.unit.test.ts
index 5cd8a0770e..0b67ca9ca4 100644
--- a/tests/admin-frontend-onboarding-dashboard.unit.test.ts
+++ b/tests/admin-frontend-onboarding-dashboard.unit.test.ts
@@ -21,7 +21,7 @@ function deferred<T>() {
 
 describe('admin frontend onboarding dashboard', () => {
   const analytics: FrontendOnboardingAnalytics = {
-    onboarding_version: 1,
+    onboarding_version: 2,
     kpis: {
       attempts: 10,
       completed: 4,
diff --git a/tests/app-onboarding-file-input.unit.test.ts b/tests/app-onboarding-file-input.unit.test.ts
index b0982b4791..c2c56d5da5 100644
--- a/tests/app-onboarding-file-input.unit.test.ts
+++ b/tests/app-onboarding-file-input.unit.test.ts
@@ -22,5 +22,8 @@ describe('app onboarding file input', () => {
     expect(noFiles).toBeDefined()
     expect(noFiles?.classList.contains('text-slate-600')).toBe(true)
     expect(noFiles?.classList.contains('dark:text-slate-300')).toBe(true)
+    expect(noFiles?.getAttribute('aria-live')).toBe('polite')
+    expect(container.querySelector('label')?.getAttribute('for')).toBe('app-onboarding-icon-input')
+    expect(container.querySelector('input')?.id).toBe('app-onboarding-icon-input')
   })
 })
diff --git a/tests/app-onboarding-progress-integration.unit.test.ts b/tests/app-onboarding-progress-integration.unit.test.ts
index a87408e4d2..c76017a529 100644
--- a/tests/app-onboarding-progress-integration.unit.test.ts
+++ b/tests/app-onboarding-progress-integration.unit.test.ts
@@ -9,8 +9,7 @@ function sourceBetween(start: string, end: string) {
 
 describe('app onboarding progress analytics integration', () => {
   it.concurrent('initializes tracking once the real initial or resumed step is resolved', () => {
-    expect(onboardingSource).toContain('createOnboardingProgressTracker')
-    expect(onboardingSource).toContain("from '~/utils/onboardingProgressAnalytics'")
+    expect(onboardingSource).toContain("import { createOnboardingDetailsFieldDebouncer, createOnboardingProgressTracker } from '~/utils/onboardingProgressAnalytics'")
 
     const initializer = sourceBetween('function initializeProgressTracking(', 'function whiteCardToggleButtonClass(')
     expect(initializer).toContain("flow: props.preOrg ? 'pre_org' : 'existing_org'")
diff --git a/tests/app-onboarding-v2.unit.test.ts b/tests/app-onboarding-v2.unit.test.ts
index f5294d2e8f..b4a6602d6d 100644
--- a/tests/app-onboarding-v2.unit.test.ts
+++ b/tests/app-onboarding-v2.unit.test.ts
@@ -4,20 +4,7 @@ import { describe, expect, it } from 'vitest'
 const onboardingSource = readFileSync(new URL('../src/components/dashboard/AppOnboardingFlow.vue', import.meta.url), 'utf8')
 const iconInputSource = readFileSync(new URL('../src/components/dashboard/AppOnboardingIconInput.vue', import.meta.url), 'utf8')
 
-function sourceBetween(start: string, end: string) {
-  return onboardingSource.slice(onboardingSource.indexOf(start), onboardingSource.indexOf(end))
-}
-
 describe('pre-organization onboarding v2 app details', () => {
-  it.concurrent('shows app name and App ID without asking about store publication', () => {
-    const detailsTemplate = sourceBetween('<div v-if="flowStep === \'details\'">', '<div v-else-if="props.preOrg && flowStep === \'organization\'"')
-
-    expect(detailsTemplate).toContain('v-if="!props.preOrg"')
-    expect(detailsTemplate).toContain('data-test="app-onboarding-name"')
-    expect(detailsTemplate).toContain('id="app-onboarding-app-id"')
-    expect(onboardingSource).toContain('if (props.preOrg)\n    return true')
-  })
-
   it.concurrent('keeps store import optional and inline for pre-organization onboarding', () => {
     expect(onboardingSource).toContain('data-test="app-onboarding-toggle-store-import"')
     expect(onboardingSource).toContain(':aria-expanded="existingAppSetup === \'import\'"')
@@ -47,18 +34,13 @@ describe('pre-organization onboarding v2 app details', () => {
     expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_app_icon_picked'")
     expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_app_icon_uploaded'")
     expect(onboardingSource).toContain("trackV2DetailsEvent('onboarding_app_icon_upload_failed'")
+    expect(onboardingSource).toContain("parsedIconUrl.protocol === 'data:' && iconSourceUrl.startsWith('data:image/')")
   })
 
   it.concurrent('opens App ID guidance and tracks only the open action', () => {
-    const appIdHelp = sourceBetween('function openAppIdHelp()', 'function applyAppIdSuggestion(')
+    const appIdHelp = onboardingSource.slice(onboardingSource.indexOf('function openAppIdHelp()'), onboardingSource.indexOf('function applyAppIdSuggestion('))
     expect(appIdHelp).toContain("trackV2DetailsEvent('onboarding_app_id_help_opened')")
     expect(appIdHelp).toContain('dialogStore.openDialog({')
     expect(appIdHelp).not.toContain('onDialogDismiss')
   })
-
-  it.concurrent('preserves the existing-organization publication choices', () => {
-    expect(onboardingSource).toContain('data-test="app-onboarding-existing-yes"')
-    expect(onboardingSource).toContain('data-test="app-onboarding-existing-no"')
-    expect(onboardingSource).toContain('v-if="!props.preOrg && existingApp === true"')
-  })
 })
diff --git a/tests/frontend-onboarding-analytics.unit.test.ts b/tests/frontend-onboarding-analytics.unit.test.ts
index f2534649ad..ffa3cef49d 100644
--- a/tests/frontend-onboarding-analytics.unit.test.ts
+++ b/tests/frontend-onboarding-analytics.unit.test.ts
@@ -40,7 +40,7 @@ beforeEach(() => {
 })
 
 describe('buildFrontendOnboardingHogql', () => {
-  it('queries the fixed v1 pre-org viewed events grouped by attempt in an exclusive time range', () => {
+  it('queries the fixed v2 pre-org viewed events grouped by attempt in an exclusive time range', () => {
     const query = buildFrontendOnboardingHogql(
       '2026-08-01T00:00:00.123Z',
       '2026-08-03T00:00:00.456Z',
@@ -49,7 +49,7 @@ describe('buildFrontendOnboardingHogql', () => {
 
     expect(query).toContain('event = \'onboarding_step_viewed\'')
     expect(query).toContain('JSONExtractString(toString(properties), \'flow\') = \'pre_org\'')
-    expect(query).toContain('toIntOrZero(toString(properties.onboarding_version)) = 1')
+    expect(query).toContain('toIntOrZero(toString(properties.onboarding_version)) = 2')
     expect(query).not.toContain('toInt64OrZero')
     expect(query).toContain('JSONExtractString(toString(properties), \'onboarding_attempt_id\')')
     expect(query).toContain('JSONExtractString(toString(properties), \'step\')')
@@ -103,7 +103,7 @@ describe('getAdminFrontendOnboardingAnalytics', () => {
     const result = await getAdminFrontendOnboardingAnalytics(createContext(), start, '2026-08-03T00:00:00.000Z')
 
     expect(result).toMatchObject({
-      onboarding_version: 1,
+      onboarding_version: 2,
       kpis: { attempts: 1, completed: 1, completion_rate: 100, median_completion_ms: 2_666 },
       daily_attempts: [
         { date: '2026-08-01', attempts: 1 },
diff --git a/tests/onboarding-details-field-debouncer.unit.test.ts b/tests/onboarding-details-field-debouncer.unit.test.ts
index 629ac2a17e..edccf28427 100644
--- a/tests/onboarding-details-field-debouncer.unit.test.ts
+++ b/tests/onboarding-details-field-debouncer.unit.test.ts
@@ -22,7 +22,7 @@ describe('onboarding details field analytics debounce', () => {
     expect(emit).toHaveBeenCalledWith('onboarding_app_name_entered', { field_length: 11 })
   })
 
-  it('tracks fields independently and cancels pending empty or disposed values', () => {
+  it('tracks fields independently, cancels empty values, and flushes pending values on dispose', () => {
     vi.useFakeTimers()
     const emit = vi.fn()
     const tracker = createOnboardingDetailsFieldDebouncer(emit)
@@ -40,6 +40,7 @@ describe('onboarding details field analytics debounce', () => {
     tracker.schedule('onboarding_app_name_entered', 'app_name', 'Never emitted')
     tracker.dispose()
     vi.runAllTimers()
-    expect(emit).toHaveBeenCalledTimes(2)
+    expect(emit).toHaveBeenCalledTimes(3)
+    expect(emit).toHaveBeenLastCalledWith('onboarding_app_name_entered', { field_length: 13 })
   })
 })

From dee78ffa5b27e12d3cc713c3beb8f0933281db21 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 14:01:50 +0200
Subject: [PATCH 7/9] fix(admin): keep onboarding analytics on v1

---
 src/services/adminFrontendOnboarding.ts                     | 2 +-
 .../_backend/utils/frontend_onboarding_analytics.ts         | 2 +-
 .../_backend/utils/frontend_onboarding_analytics_model.ts   | 2 +-
 tests/admin-frontend-onboarding-dashboard.unit.test.ts      | 2 +-
 tests/frontend-onboarding-analytics.unit.test.ts            | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/services/adminFrontendOnboarding.ts b/src/services/adminFrontendOnboarding.ts
index f88fa509be..b0ac4310e5 100644
--- a/src/services/adminFrontendOnboarding.ts
+++ b/src/services/adminFrontendOnboarding.ts
@@ -14,7 +14,7 @@ export interface FrontendOnboardingComparison {
 }
 
 export interface FrontendOnboardingAnalytics {
-  onboarding_version: 2
+  onboarding_version: 1
   kpis: {
     attempts: number
     completed: number
diff --git a/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts b/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
index 6b68531a9d..5731697f54 100644
--- a/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
+++ b/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
@@ -113,7 +113,7 @@ export function buildFrontendOnboardingHogql(startDate: string, cohortEndDate: s
       FROM events
       WHERE event = 'onboarding_step_viewed'
         AND JSONExtractString(toString(properties), 'flow') = 'pre_org'
-        AND toIntOrZero(toString(properties.onboarding_version)) = ${FRONTEND_ONBOARDING_VERSION}
+        AND toIntOrZero(toString(properties.onboarding_version)) = 1
         AND timestamp >= parseDateTimeBestEffort(${sqlStr(startDate)})
         AND timestamp < parseDateTimeBestEffort(${sqlStr(followupEndDate)})
     )
diff --git a/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts b/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts
index dd4fc593b8..eaf649c08e 100644
--- a/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts
+++ b/supabase/functions/_backend/utils/frontend_onboarding_analytics_model.ts
@@ -1,4 +1,4 @@
-export const FRONTEND_ONBOARDING_VERSION = 2 as const
+export const FRONTEND_ONBOARDING_VERSION = 1 as const
 export const FRONTEND_ONBOARDING_FOLLOWUP_MS = 24 * 60 * 60 * 1000
 
 export type FrontendOnboardingStageKey = 'intent' | 'details' | 'organization' | 'setup'
diff --git a/tests/admin-frontend-onboarding-dashboard.unit.test.ts b/tests/admin-frontend-onboarding-dashboard.unit.test.ts
index 0b67ca9ca4..5cd8a0770e 100644
--- a/tests/admin-frontend-onboarding-dashboard.unit.test.ts
+++ b/tests/admin-frontend-onboarding-dashboard.unit.test.ts
@@ -21,7 +21,7 @@ function deferred<T>() {
 
 describe('admin frontend onboarding dashboard', () => {
   const analytics: FrontendOnboardingAnalytics = {
-    onboarding_version: 2,
+    onboarding_version: 1,
     kpis: {
       attempts: 10,
       completed: 4,
diff --git a/tests/frontend-onboarding-analytics.unit.test.ts b/tests/frontend-onboarding-analytics.unit.test.ts
index ffa3cef49d..f2534649ad 100644
--- a/tests/frontend-onboarding-analytics.unit.test.ts
+++ b/tests/frontend-onboarding-analytics.unit.test.ts
@@ -40,7 +40,7 @@ beforeEach(() => {
 })
 
 describe('buildFrontendOnboardingHogql', () => {
-  it('queries the fixed v2 pre-org viewed events grouped by attempt in an exclusive time range', () => {
+  it('queries the fixed v1 pre-org viewed events grouped by attempt in an exclusive time range', () => {
     const query = buildFrontendOnboardingHogql(
       '2026-08-01T00:00:00.123Z',
       '2026-08-03T00:00:00.456Z',
@@ -49,7 +49,7 @@ describe('buildFrontendOnboardingHogql', () => {
 
     expect(query).toContain('event = \'onboarding_step_viewed\'')
     expect(query).toContain('JSONExtractString(toString(properties), \'flow\') = \'pre_org\'')
-    expect(query).toContain('toIntOrZero(toString(properties.onboarding_version)) = 2')
+    expect(query).toContain('toIntOrZero(toString(properties.onboarding_version)) = 1')
     expect(query).not.toContain('toInt64OrZero')
     expect(query).toContain('JSONExtractString(toString(properties), \'onboarding_attempt_id\')')
     expect(query).toContain('JSONExtractString(toString(properties), \'step\')')
@@ -103,7 +103,7 @@ describe('getAdminFrontendOnboardingAnalytics', () => {
     const result = await getAdminFrontendOnboardingAnalytics(createContext(), start, '2026-08-03T00:00:00.000Z')
 
     expect(result).toMatchObject({
-      onboarding_version: 2,
+      onboarding_version: 1,
       kpis: { attempts: 1, completed: 1, completion_rate: 100, median_completion_ms: 2_666 },
       daily_attempts: [
         { date: '2026-08-01', attempts: 1 },

From d15b67a337497be640a7a85bf9388fc6626cfcf4 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 14:13:24 +0200
Subject: [PATCH 8/9] fix(onboarding): address final review feedback

---
 .../dashboard/AppOnboardingFlow.vue           |  6 +++-
 .../dashboard/AppOnboardingIconInput.vue      |  7 ++--
 .../utils/frontend_onboarding_analytics.ts    |  2 +-
 tests/app-onboarding-file-input.unit.test.ts  | 32 +++++++++++++++++--
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/dashboard/AppOnboardingFlow.vue b/src/components/dashboard/AppOnboardingFlow.vue
index ce48081a92..5f1f720d71 100644
--- a/src/components/dashboard/AppOnboardingFlow.vue
+++ b/src/components/dashboard/AppOnboardingFlow.vue
@@ -608,8 +608,12 @@ async function uploadIcon(appId: string, iconSourceUrl?: string) {
       }
       else {
         const response = await fetch(parsedIconUrl.toString())
+        if (!response.ok)
+          throw new Error(`Icon request failed with status ${response.status}`)
         const blob = await response.blob()
-        fileToUpload = new File([blob], 'store-icon.png', { type: blob.type || 'image/png' })
+        if (!blob.type.startsWith('image/'))
+          throw new Error(`Icon response has unsupported content type: ${blob.type || 'unknown'}`)
+        fileToUpload = new File([blob], 'store-icon.png', { type: blob.type })
       }
     }
     catch (error) {
diff --git a/src/components/dashboard/AppOnboardingIconInput.vue b/src/components/dashboard/AppOnboardingIconInput.vue
index b1d18c8479..90ef6025cc 100644
--- a/src/components/dashboard/AppOnboardingIconInput.vue
+++ b/src/components/dashboard/AppOnboardingIconInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useId } from 'vue'
 
 defineProps<{
   chooseLabel: string
@@ -14,6 +14,7 @@ const emit = defineEmits<{
 }>()
 
 const modelValue = defineModel<unknown>()
+const fileInputId = `app-onboarding-icon-input-${useId()}`
 const fileInput = ref<HTMLInputElement | null>(null)
 const selectedFileName = ref('')
 
@@ -44,7 +45,7 @@ function onFileSelected(event: Event) {
 
 <template>
   <div>
-    <label for="app-onboarding-icon-input" class="text-sm font-medium text-slate-800 dark:text-slate-200">
+    <label :for="fileInputId" class="text-sm font-medium text-slate-800 dark:text-slate-200">
       {{ label }}
     </label>
     <div class="mt-2 flex min-h-11 items-center gap-3">
@@ -60,7 +61,7 @@ function onFileSelected(event: Event) {
       </span>
     </div>
     <input
-      id="app-onboarding-icon-input"
+      :id="fileInputId"
       ref="fileInput"
       type="file"
       accept="image/*"
diff --git a/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts b/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
index 5731697f54..6b68531a9d 100644
--- a/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
+++ b/supabase/functions/_backend/utils/frontend_onboarding_analytics.ts
@@ -113,7 +113,7 @@ export function buildFrontendOnboardingHogql(startDate: string, cohortEndDate: s
       FROM events
       WHERE event = 'onboarding_step_viewed'
         AND JSONExtractString(toString(properties), 'flow') = 'pre_org'
-        AND toIntOrZero(toString(properties.onboarding_version)) = 1
+        AND toIntOrZero(toString(properties.onboarding_version)) = ${FRONTEND_ONBOARDING_VERSION}
         AND timestamp >= parseDateTimeBestEffort(${sqlStr(startDate)})
         AND timestamp < parseDateTimeBestEffort(${sqlStr(followupEndDate)})
     )
diff --git a/tests/app-onboarding-file-input.unit.test.ts b/tests/app-onboarding-file-input.unit.test.ts
index c2c56d5da5..4112e7286c 100644
--- a/tests/app-onboarding-file-input.unit.test.ts
+++ b/tests/app-onboarding-file-input.unit.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import { describe, expect, it } from 'vitest'
-import { createSSRApp } from 'vue'
+import { createSSRApp, h } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import AppOnboardingIconInput from '../src/components/dashboard/AppOnboardingIconInput.vue'
 
@@ -23,7 +23,33 @@ describe('app onboarding file input', () => {
     expect(noFiles?.classList.contains('text-slate-600')).toBe(true)
     expect(noFiles?.classList.contains('dark:text-slate-300')).toBe(true)
     expect(noFiles?.getAttribute('aria-live')).toBe('polite')
-    expect(container.querySelector('label')?.getAttribute('for')).toBe('app-onboarding-icon-input')
-    expect(container.querySelector('input')?.id).toBe('app-onboarding-icon-input')
+    const labelFor = container.querySelector('label')?.getAttribute('for')
+    const inputId = container.querySelector('input')?.id
+    expect(labelFor).toBeTruthy()
+    expect(labelFor).toBe(inputId)
+  })
+
+  it('uses a unique accessible input id for each rendered instance', async () => {
+    const props = {
+      chooseLabel: 'Choose file',
+      emptyLabel: 'No file selected',
+      label: 'App icon',
+    }
+    const app = createSSRApp({
+      render: () => h('div', [
+        h(AppOnboardingIconInput, props),
+        h(AppOnboardingIconInput, props),
+      ]),
+    })
+
+    const html = await renderToString(app)
+    const container = document.createElement('div')
+    container.innerHTML = html
+    const inputIds = Array.from(container.querySelectorAll('input'), input => input.id)
+    const labelTargets = Array.from(container.querySelectorAll('label'), label => label.htmlFor)
+
+    expect(inputIds).toHaveLength(2)
+    expect(new Set(inputIds).size).toBe(2)
+    expect(labelTargets).toEqual(inputIds)
   })
 })

From fc667c28abcecc3dab4df029925a9697f6163938 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Wed, 12 Aug 2026 14:24:27 +0200
Subject: [PATCH 9/9] fix(onboarding): bound store icon fetch

---
 .../dashboard/AppOnboardingFlow.vue           | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/AppOnboardingFlow.vue b/src/components/dashboard/AppOnboardingFlow.vue
index 5f1f720d71..d9cc26aec0 100644
--- a/src/components/dashboard/AppOnboardingFlow.vue
+++ b/src/components/dashboard/AppOnboardingFlow.vue
@@ -62,6 +62,7 @@ const main = useMainStore()
 const organizationStore = useOrganizationStore()
 const onboardingUserId = computed(() => main.user?.id ?? main.auth?.id ?? null)
 const config = getLocalConfig()
+const STORE_ICON_FETCH_TIMEOUT_MS = 10_000
 
 type AppRow = Database['public']['Tables']['apps']['Row']
 type StandardFlowStep = 'details' | 'choice' | 'install' | 'setup'
@@ -607,13 +608,20 @@ async function uploadIcon(appId: string, iconSourceUrl?: string) {
         console.warn('Skipping unsupported icon URL', iconSourceUrl)
       }
       else {
-        const response = await fetch(parsedIconUrl.toString())
-        if (!response.ok)
-          throw new Error(`Icon request failed with status ${response.status}`)
-        const blob = await response.blob()
-        if (!blob.type.startsWith('image/'))
-          throw new Error(`Icon response has unsupported content type: ${blob.type || 'unknown'}`)
-        fileToUpload = new File([blob], 'store-icon.png', { type: blob.type })
+        const controller = new AbortController()
+        const timeoutId = setTimeout(() => controller.abort(), STORE_ICON_FETCH_TIMEOUT_MS)
+        try {
+          const response = await fetch(parsedIconUrl.toString(), { signal: controller.signal })
+          if (!response.ok)
+            throw new Error(`Icon request failed with status ${response.status}`)
+          const blob = await response.blob()
+          if (!blob.type.startsWith('image/'))
+            throw new Error(`Icon response has unsupported content type: ${blob.type || 'unknown'}`)
+          fileToUpload = new File([blob], 'store-icon.png', { type: blob.type })
+        }
+        finally {
+          clearTimeout(timeoutId)
+        }
       }
     }
     catch (error) {