fix: prevent @clack/prompts stdout writes from corrupting Ink onboarding UI (#560)

During init, functions like findProjectType() and checkAlerts() wrote
directly to stdout via @clack/prompts while the Ink terminal UI had
control, causing garbled rendering and a broken header banner.

- Split checkAlerts into checkVersionStatus (pure data) + checkAlerts (clack UI)
- Init flow now uses checkVersionStatus and renders an Ink Alert for outdated CLI
- findProjectType accepts { quiet: true } to suppress clack logging during init
- loginInternal skips clack output when called with silent=true from init

Author: WcaleNieWolny

src/api/update.ts

@@ -2,13 +2,29 @@ import { log } from '@clack/prompts'
 import pack from '../../package.json'
 import { getLatestVersion } from '../utils/latest-version'
 
-export async function checkAlerts() {
+export interface VersionCheckResult {
+  currentVersion: string
+  latestVersion: string
+  isOutdated: boolean
+  majorVersion: string
+}
+
+export async function checkVersionStatus(): Promise<VersionCheckResult> {
   const latest = await getLatestVersion('@capgo/cli') ?? ''
-  const major = latest?.split('.')[0]
-  if (latest !== pack.version) {
-    log.warning(`🚨 You are using @capgo/cli@${pack.version} it's not the latest version.
-Please use @capgo/cli@${latest}" or @capgo/cli@${major} to keep up to date with the latest features and bug fixes.`,
+  const major = latest?.split('.')[0] ?? ''
+  return {
+    currentVersion: pack.version,
+    latestVersion: latest,
+    isOutdated: !!latest && latest !== pack.version,
+    majorVersion: major,
+  }
+}
+
+export async function checkAlerts() {
+  const { isOutdated, currentVersion, latestVersion, majorVersion } = await checkVersionStatus()
+  if (isOutdated) {
+    log.warning(`🚨 You are using @capgo/cli@${currentVersion} it's not the latest version.
+Please use @capgo/cli@${latestVersion}" or @capgo/cli@${majorVersion} to keep up to date with the latest features and bug fixes.`,
     )
   }
-  // check if the app use old encryption key and if so alert the user it not secure enough and it should migrate on v2
 }

src/init/command.ts

@@ -8,7 +8,7 @@ import { cwd, env, exit, platform, stdin, stdout } from 'node:process'
 import { canParse, format, increment, lessThan, parse } from '@std/semver'
 import tmp from 'tmp'
 import { checkAppIdsExist, completePendingOnboardingApp, listPendingOnboardingApps } from '../api/app'
-import { checkAlerts } from '../api/update'
+import { checkVersionStatus } from '../api/update'
 import { addAppInternal } from '../app/add'
 import { markSnag, waitLog } from '../app/debug'
 import { canUseFilePicker, openPackageJsonPicker } from '../build/onboarding/file-picker'
@@ -21,7 +21,7 @@ import { doLoginExists, loginInternal } from '../login'
 import { showReplicationProgress } from '../replicationProgress'
 import { createSupabaseClient, findBuildCommandForProjectType, findMainFile, findMainFileForProjectType, findProjectType, findRoot, findSavedKey, formatError, getAllPackagesDependencies, getAppId, getBundleVersion, getConfig, getInstalledVersion, getLocalConfig, getNativeProjectResetAdvice, getPackageScripts, getPMAndCommand, PACKNAME, projectIsMonorepo, updateConfigbyKey, updateConfigUpdater, validateIosUpdaterSync, verifyUser } from '../utils'
 import { cancel as pCancel, confirm as pConfirm, intro as pIntro, isCancel as pIsCancel, log as pLog, outro as pOutro, select as pSelect, spinner as pSpinner, text as pText } from './prompts'
-import { stopInitInkSession } from './runtime'
+import { setInitVersionWarning, stopInitInkSession } from './runtime'
 import { formatInitResumeMessage, initOnboardingSteps, renderInitOnboardingComplete, renderInitOnboardingFrame, renderInitOnboardingWelcome } from './ui'
 
 interface SuperOptions extends Options {
@@ -329,7 +329,7 @@ async function ensureWorkspaceReadyForInit(initialAppId?: string): Promise<strin
     const nearestCapacitorConfig = findNearestCapacitorConfig(currentDir)
     const nearestPackageJson = findNearestPackageJson(currentDir)
     const projectDir = nearestCapacitorConfig?.dir || (nearestPackageJson ? dirname(nearestPackageJson) : currentDir)
-    const projectType = await findProjectType()
+    const projectType = await findProjectType({ quiet: true })
     const frameworkKind = getFrameworkKind(projectType)
 
     if (nearestCapacitorConfig?.dir === currentDir) {
@@ -2261,7 +2261,10 @@ export async function initApp(apikeyCommand: string, appId: string, options: Sup
   pIntro('Capgo onboarding')
   renderInitOnboardingWelcome(initOnboardingSteps.length)
   appId = await ensureWorkspaceReadyForInit(appId) ?? appId
-  await checkAlerts()
+  const versionStatus = await checkVersionStatus()
+  if (versionStatus.isOutdated) {
+    setInitVersionWarning(versionStatus.currentVersion, versionStatus.latestVersion, versionStatus.majorVersion)
+  }
 
   let extConfig: Awaited<ReturnType<typeof getConfig>> | undefined
   if (!options.supaAnon || !options.supaHost) {
@@ -2300,7 +2303,7 @@ export async function initApp(apikeyCommand: string, appId: string, options: Sup
   if (!doLoginExists() || apikeyCommand) {
     log.start(`Running: ${pm.runner} @capgo/cli@latest login ***`)
     try {
-      await loginInternal(options.apikey, options, false)
+      await loginInternal(options.apikey, options, true)
       log.stop('Login Done ✅')
     }
     catch (error) {

src/init/runtime.tsx

@@ -59,11 +59,18 @@ export interface InitLogEntry {
   tone: InitLogTone
 }
 
+export interface InitVersionWarning {
+  currentVersion: string
+  latestVersion: string
+  majorVersion: string
+}
+
 export interface InitRuntimeState {
   screen?: InitScreen
   logs: InitLogEntry[]
   spinner?: string
   prompt?: PromptRequest
+  versionWarning?: InitVersionWarning
 }
 
 let state: InitRuntimeState = {
@@ -200,6 +207,13 @@ export function requestInitSelect(message: string, options: SelectPromptOption[]
   })
 }
 
+export function setInitVersionWarning(currentVersion: string, latestVersion: string, majorVersion: string) {
+  updateState(current => ({
+    ...current,
+    versionWarning: { currentVersion, latestVersion, majorVersion },
+  }))
+}
+
 function updatePromptError(error?: string) {
   updateState((current) => {
     if (current.prompt?.kind !== 'text')

src/init/ui/app.tsx

@@ -1,4 +1,5 @@
 import type { InitRuntimeState } from '../runtime'
+import { Alert } from '@inkjs/ui'
 import { Box, Text, useStdout } from 'ink'
 import React, { useEffect, useState } from 'react'
 import { CurrentStepSection, InitHeader, ProgressSection, PromptArea, ScreenIntro, SpinnerArea } from './components'
@@ -29,6 +30,14 @@ export default function InitInkApp({ getSnapshot, subscribe, updatePromptError }
     <Box flexDirection="column" padding={1} width={columns}>
       <InitHeader />
 
+      {snapshot.versionWarning && (
+        <Box marginTop={1} width={contentWidth}>
+          <Alert variant="warning">
+            You are using @capgo/cli@{snapshot.versionWarning.currentVersion} — update to @capgo/cli@{snapshot.versionWarning.latestVersion} or @capgo/cli@{snapshot.versionWarning.majorVersion}
+          </Alert>
+        </Box>
+      )}
+
       {screen?.introLines?.length || screen?.title
         ? <ScreenIntro screen={screen} />
         : null}

src/login.ts

@@ -39,7 +39,8 @@ export async function loginInternal(apikey: string, options: Options, silent = f
     throw new Error('Missing API key')
   }
 
-  await checkAlerts()
+  if (!silent)
+    await checkAlerts()
   // write in file .capgo the apikey in home directory
   const { local } = options
 

src/utils.ts

@@ -951,7 +951,7 @@ export function getContentType(filename: string): string {
   return mimeTypes[ext] || 'application/octet-stream'
 }
 
-export async function findProjectType() {
+export async function findProjectType(options?: { quiet?: boolean }) {
   // for nuxtjs check if nuxt.config.js exists
   // for nextjs check if next.config.js exists
   // for angular check if angular.json exists
@@ -960,6 +960,7 @@ export async function findProjectType() {
   // for react check if package.json exists and react is in dependencies
   const pwd = cwd()
   let isTypeScript = false
+  const quiet = options?.quiet ?? false
 
   // Check for TypeScript configuration file
   const tsConfigPath = resolve(pwd, 'tsconfig.json')
@@ -970,39 +971,39 @@ export async function findProjectType() {
   for await (const f of getFiles(pwd)) {
     // find number of folder in path after pwd
     if (f.includes('angular.json')) {
-      log.info('Found angular project')
+      if (!quiet) log.info('Found angular project')
       return isTypeScript ? 'angular-ts' : 'angular-js'
     }
     if (f.includes('nuxt.config.js') || f.includes('nuxt.config.ts')) {
-      log.info('Found nuxtjs project')
+      if (!quiet) log.info('Found nuxtjs project')
       return isTypeScript ? 'nuxtjs-ts' : 'nuxtjs-js'
     }
     if (f.includes('next.config.js') || f.includes('next.config.mjs')) {
-      log.info('Found nextjs project')
+      if (!quiet) log.info('Found nextjs project')
       return isTypeScript ? 'nextjs-ts' : 'nextjs-js'
     }
     if (f.includes('svelte.config.js')) {
-      log.info('Found sveltekit project')
+      if (!quiet) log.info('Found sveltekit project')
       return isTypeScript ? 'sveltekit-ts' : 'sveltekit-js'
     }
     if (f.includes('rolluconfig.js')) {
-      log.info('Found svelte project')
+      if (!quiet) log.info('Found svelte project')
       return isTypeScript ? 'svelte-ts' : 'svelte-js'
     }
     if (f.includes('vue.config.js')) {
-      log.info('Found vue project')
+      if (!quiet) log.info('Found vue project')
       return isTypeScript ? 'vue-ts' : 'vue-js'
     }
     if (f.includes(PACKNAME)) {
       const folder = dirname(f)
       const dependencies = await getAllPackagesDependencies(folder)
       if (dependencies) {
         if (dependencies.get('react')) {
-          log.info('Found react project')
+          if (!quiet) log.info('Found react project')
           return isTypeScript ? 'react-ts' : 'react-js'
         }
         if (dependencies.get('vue')) {
-          log.info('Found vue project')
+          if (!quiet) log.info('Found vue project')
           return isTypeScript ? 'vue-ts' : 'vue-js'
         }
       }