fix: restore per-step progress display in TUI components

The refactored TUI components showed a single flat status line instead
of the original per-operation stepper. Added an onProgress callback to
cloneRepo, installPackages, and cleanupFiles so the TUI renders each
step with its own status: green checkmark for completed, dimmed circle
with Working... for in-progress, red cross for errors. Non-interactive
path omits the callback with zero overhead.

Author: fernandomg

architecture.md

@@ -78,7 +78,7 @@ When adding a new feature, add it here. All other code (validation, cleanup, inf
 
 ### Operations Layer (`source/operations/`)
 
-Plain async functions with no UI dependencies. Each operation receives explicit arguments (project folder, mode, features) and performs file system or shell work.
+Plain async functions with no UI dependencies. Each operation receives explicit arguments (project folder, mode, features) and performs file system or shell work. Multi-step operations accept an optional `onProgress` callback that the TUI uses to render per-step progress; the non-interactive path omits it.
 
 | Function | What it does |
 |---|---|

source/__tests__/operations/cleanupFiles.test.ts

@@ -242,4 +242,43 @@ describe('cleanupFiles', () => {
     const commands = getExecFileCommands()
     expect(commands.at(-1)).toBe('rm -rf .install-files')
   })
+
+  describe('onProgress callback', () => {
+    it('reports only Install script for full mode', async () => {
+      const steps: string[] = []
+      await cleanupFiles('/project/my_app', 'full', [], (step) => steps.push(step))
+
+      expect(steps).toEqual(['Install script'])
+    })
+
+    it('reports all feature cleanups when no features selected', async () => {
+      const steps: string[] = []
+      await cleanupFiles('/project/my_app', 'custom', [], (step) => steps.push(step))
+
+      expect(steps).toEqual([
+        'Component demos',
+        'Subgraph',
+        'Typedoc',
+        'Vocs',
+        'Husky',
+        'Install script',
+      ])
+    })
+
+    it('skips steps for selected features', async () => {
+      const steps: string[] = []
+      await cleanupFiles('/project/my_app', 'custom', ['demo', 'subgraph'], (step) =>
+        steps.push(step),
+      )
+
+      expect(steps).not.toContain('Component demos')
+      expect(steps).not.toContain('Subgraph')
+      expect(steps).toContain('Typedoc')
+      expect(steps).toContain('Install script')
+    })
+
+    it('works without a callback', async () => {
+      await expect(cleanupFiles('/project/my_app', 'full')).resolves.toBeUndefined()
+    })
+  })
 })

source/__tests__/operations/cloneRepo.test.ts

@@ -90,4 +90,23 @@ describe('cloneRepo', () => {
       expect(call[0]).not.toContain('my_app')
     }
   })
+
+  describe('onProgress callback', () => {
+    it('reports all 5 steps in order', async () => {
+      const steps: string[] = []
+      await cloneRepo('my_app', (step) => steps.push(step))
+
+      expect(steps).toEqual([
+        'Cloning dAppBooster in my_app',
+        'Fetching tags',
+        'Checking out latest tag',
+        'Removing .git folder',
+        'Initializing Git repository',
+      ])
+    })
+
+    it('works without a callback', async () => {
+      await expect(cloneRepo('my_app')).resolves.toBeUndefined()
+    })
+  })
 })

source/__tests__/operations/installPackages.test.ts

@@ -133,4 +133,32 @@ describe('installPackages', () => {
 
     expect(exec).not.toHaveBeenCalled()
   })
+
+  describe('onProgress callback', () => {
+    it('reports one step for full mode', async () => {
+      const steps: string[] = []
+      await installPackages('/project/my_app', 'full', [], (step) => steps.push(step))
+
+      expect(steps).toEqual(['Installing packages'])
+    })
+
+    it('reports two steps for custom mode with packages to remove', async () => {
+      const steps: string[] = []
+      await installPackages('/project/my_app', 'custom', ['demo'], (step) => steps.push(step))
+
+      expect(steps).toEqual(['Installing packages', 'Executing post-install scripts'])
+    })
+
+    it('reports one step for custom mode with all features selected', async () => {
+      const allFeatures = Object.keys(featureDefinitions) as Array<keyof typeof featureDefinitions>
+      const steps: string[] = []
+      await installPackages('/project/my_app', 'custom', allFeatures, (step) => steps.push(step))
+
+      expect(steps).toEqual(['Installing packages'])
+    })
+
+    it('works without a callback', async () => {
+      await expect(installPackages('/project/my_app', 'full')).resolves.toBeUndefined()
+    })
+  })
 })

source/components/steps/CloneRepo/CloneRepo.tsx

@@ -1,5 +1,5 @@
 import { Text } from 'ink'
-import { type FC, useEffect, useState } from 'react'
+import { type FC, useCallback, useEffect, useState } from 'react'
 import { cloneRepo } from '../../../operations/index.js'
 import Divider from '../../Divider.js'
 
@@ -9,11 +9,16 @@ interface Props {
 }
 
 const CloneRepo: FC<Props> = ({ projectName, onCompletion }) => {
+  const [steps, setSteps] = useState<string[]>([])
   const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
   const [errorMessage, setErrorMessage] = useState('')
 
+  const handleProgress = useCallback((step: string) => {
+    setSteps((prev) => [...prev, step])
+  }, [])
+
   useEffect(() => {
-    cloneRepo(projectName)
+    cloneRepo(projectName, handleProgress)
       .then(() => {
         setStatus('done')
         onCompletion()
@@ -22,22 +27,29 @@ const CloneRepo: FC<Props> = ({ projectName, onCompletion }) => {
         setStatus('error')
         setErrorMessage(error instanceof Error ? error.message : String(error))
       })
-  }, [projectName, onCompletion])
+  }, [projectName, onCompletion, handleProgress])
+
+  const completedSteps = status === 'done' ? steps : steps.slice(0, -1)
+  const currentStep = status === 'running' ? steps.at(-1) : undefined
 
   return (
     <>
       <Divider title={'Git tasks'} />
-      {status === 'running' && (
-        <Text color={'whiteBright'}>
-          Cloning dAppBooster in <Text italic>{projectName}</Text>... Working...
+      {completedSteps.map((step) => (
+        <Text key={step}>
+          <Text color={'green'}>{'\u2714'}</Text> {step}
+        </Text>
+      ))}
+      {currentStep && (
+        <Text>
+          <Text dimColor>{'\u25CB'}</Text> {currentStep} <Text dimColor>Working...</Text>
         </Text>
       )}
-      {status === 'done' && (
-        <Text color={'green'}>
-          Cloned dAppBooster in <Text italic>{projectName}</Text>. Done!
+      {status === 'error' && (
+        <Text>
+          <Text color={'red'}>{'\u2717'}</Text> Failed to clone: {errorMessage}
         </Text>
       )}
-      {status === 'error' && <Text color={'red'}>Failed to clone: {errorMessage}</Text>}
     </>
   )
 }

source/components/steps/FileCleanup.tsx

@@ -1,5 +1,5 @@
 import { Text } from 'ink'
-import { type FC, useEffect, useMemo, useState } from 'react'
+import { type FC, useCallback, useEffect, useMemo, useState } from 'react'
 import type { FeatureName } from '../../constants/config.js'
 import { cleanupFiles } from '../../operations/index.js'
 import type { InstallationType, MultiSelectItem } from '../../types/types.js'
@@ -18,13 +18,18 @@ interface Props {
 const FileCleanup: FC<Props> = ({ onCompletion, installationConfig, projectName }) => {
   const { installationType, selectedFeatures } = installationConfig
   const projectFolder = useMemo(() => getProjectFolder(projectName), [projectName])
+  const [steps, setSteps] = useState<string[]>([])
   const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
   const [errorMessage, setErrorMessage] = useState('')
 
+  const handleProgress = useCallback((step: string) => {
+    setSteps((prev) => [...prev, step])
+  }, [])
+
   useEffect(() => {
     const features = selectedFeatures?.map((f) => f.value as FeatureName) ?? []
 
-    cleanupFiles(projectFolder, installationType ?? 'full', features)
+    cleanupFiles(projectFolder, installationType ?? 'full', features, handleProgress)
       .then(() => {
         setStatus('done')
         onCompletion()
@@ -33,14 +38,29 @@ const FileCleanup: FC<Props> = ({ onCompletion, installationConfig, projectName
         setStatus('error')
         setErrorMessage(error instanceof Error ? error.message : String(error))
       })
-  }, [projectFolder, installationType, selectedFeatures, onCompletion])
+  }, [projectFolder, installationType, selectedFeatures, onCompletion, handleProgress])
+
+  const completedSteps = status === 'done' ? steps : steps.slice(0, -1)
+  const currentStep = status === 'running' ? steps.at(-1) : undefined
 
   return (
     <>
       <Divider title={'File cleanup'} />
-      {status === 'running' && <Text color={'whiteBright'}>Cleaning up files... Working...</Text>}
-      {status === 'done' && <Text color={'green'}>File cleanup complete. Done!</Text>}
-      {status === 'error' && <Text color={'red'}>Cleanup failed: {errorMessage}</Text>}
+      {completedSteps.map((step) => (
+        <Text key={step}>
+          <Text color={'green'}>{'\u2714'}</Text> {step}
+        </Text>
+      ))}
+      {currentStep && (
+        <Text>
+          <Text dimColor>{'\u25CB'}</Text> {currentStep} <Text dimColor>Working...</Text>
+        </Text>
+      )}
+      {status === 'error' && (
+        <Text>
+          <Text color={'red'}>{'\u2717'}</Text> Cleanup failed: {errorMessage}
+        </Text>
+      )}
     </>
   )
 }

source/components/steps/Install/Install.tsx

@@ -1,5 +1,5 @@
 import { Text } from 'ink'
-import { type FC, useEffect, useMemo, useState } from 'react'
+import { type FC, useCallback, useEffect, useMemo, useState } from 'react'
 import type { FeatureName } from '../../../constants/config.js'
 import { createEnvFile } from '../../../operations/createEnvFile.js'
 import { installPackages } from '../../../operations/installPackages.js'
@@ -19,19 +19,25 @@ interface Props {
 const Install: FC<Props> = ({ projectName, onCompletion, installationConfig }) => {
   const { installationType, selectedFeatures } = installationConfig
   const projectFolder = useMemo(() => getProjectFolder(projectName), [projectName])
+  const [steps, setSteps] = useState<string[]>([])
   const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
   const [errorMessage, setErrorMessage] = useState('')
 
   const title = installationType
     ? installationType[0]?.toUpperCase() + installationType.slice(1)
     : ''
 
+  const handleProgress = useCallback((step: string) => {
+    setSteps((prev) => [...prev, step])
+  }, [])
+
   useEffect(() => {
     const features = selectedFeatures?.map((f) => f.value as FeatureName) ?? []
 
     const run = async () => {
+      handleProgress('Creating .env.local file')
       await createEnvFile(projectFolder)
-      await installPackages(projectFolder, installationType ?? 'full', features)
+      await installPackages(projectFolder, installationType ?? 'full', features, handleProgress)
     }
 
     run()
@@ -43,14 +49,29 @@ const Install: FC<Props> = ({ projectName, onCompletion, installationConfig }) =
         setStatus('error')
         setErrorMessage(error instanceof Error ? error.message : String(error))
       })
-  }, [projectFolder, installationType, selectedFeatures, onCompletion])
+  }, [projectFolder, installationType, selectedFeatures, onCompletion, handleProgress])
+
+  const completedSteps = status === 'done' ? steps : steps.slice(0, -1)
+  const currentStep = status === 'running' ? steps.at(-1) : undefined
 
   return (
     <>
       <Divider title={`${title ?? 'Full'} installation`} />
-      {status === 'running' && <Text color={'whiteBright'}>Installing packages... Working...</Text>}
-      {status === 'done' && <Text color={'green'}>Installation complete. Done!</Text>}
-      {status === 'error' && <Text color={'red'}>Installation failed: {errorMessage}</Text>}
+      {completedSteps.map((step) => (
+        <Text key={step}>
+          <Text color={'green'}>{'\u2714'}</Text> {step}
+        </Text>
+      ))}
+      {currentStep && (
+        <Text>
+          <Text dimColor>{'\u25CB'}</Text> {currentStep} <Text dimColor>Working...</Text>
+        </Text>
+      )}
+      {status === 'error' && (
+        <Text>
+          <Text color={'red'}>{'\u2717'}</Text> Installation failed: {errorMessage}
+        </Text>
+      )}
     </>
   )
 }

source/operations/cleanupFiles.ts

@@ -75,30 +75,37 @@ export async function cleanupFiles(
   projectFolder: string,
   mode: InstallationType,
   features: FeatureName[] = [],
+  onProgress?: (step: string) => void,
 ): Promise<void> {
   if (mode === 'custom') {
     if (!isFeatureSelected('demo', features)) {
+      onProgress?.('Component demos')
       await cleanupDemo(projectFolder)
     }
 
     if (!isFeatureSelected('subgraph', features)) {
+      onProgress?.('Subgraph')
       await cleanupSubgraph(projectFolder, features)
     }
 
     if (!isFeatureSelected('typedoc', features)) {
+      onProgress?.('Typedoc')
       await cleanupTypedoc(projectFolder)
     }
 
     if (!isFeatureSelected('vocs', features)) {
+      onProgress?.('Vocs')
       await cleanupVocs(projectFolder)
     }
 
     if (!isFeatureSelected('husky', features)) {
+      onProgress?.('Husky')
       await cleanupHusky(projectFolder)
     }
 
     patchPackageJson(projectFolder, features)
   }
 
+  onProgress?.('Install script')
   await execFile('rm', ['-rf', '.install-files'], { cwd: projectFolder })
 }

source/operations/cloneRepo.ts

@@ -2,15 +2,27 @@ import { repoUrl } from '../constants/config.js'
 import { getProjectFolder } from '../utils/utils.js'
 import { exec, execFile } from './exec.js'
 
-export async function cloneRepo(projectName: string): Promise<void> {
+export async function cloneRepo(
+  projectName: string,
+  onProgress?: (step: string) => void,
+): Promise<void> {
   const projectFolder = getProjectFolder(projectName)
 
+  onProgress?.(`Cloning dAppBooster in ${projectName}`)
   await execFile('git', ['clone', '--depth', '1', '--no-checkout', repoUrl, projectName])
+
+  onProgress?.('Fetching tags')
   await execFile('git', ['fetch', '--tags'], { cwd: projectFolder })
+
+  onProgress?.('Checking out latest tag')
   // Shell required for $() command substitution
   await exec('git checkout $(git describe --tags $(git rev-list --tags --max-count=1))', {
     cwd: projectFolder,
   })
+
+  onProgress?.('Removing .git folder')
   await execFile('rm', ['-rf', '.git'], { cwd: projectFolder })
+
+  onProgress?.('Initializing Git repository')
   await execFile('git', ['init'], { cwd: projectFolder })
 }

source/operations/installPackages.ts

@@ -7,19 +7,25 @@ export async function installPackages(
   projectFolder: string,
   mode: InstallationType,
   features: FeatureName[] = [],
+  onProgress?: (step: string) => void,
 ): Promise<void> {
   if (mode === 'full') {
+    onProgress?.('Installing packages')
     await execFile('pnpm', ['i'], { cwd: projectFolder })
     return
   }
 
   const packagesToRemove = getPackagesToRemove(features)
 
   if (packagesToRemove.length === 0) {
+    onProgress?.('Installing packages')
     await execFile('pnpm', ['i'], { cwd: projectFolder })
     return
   }
 
+  onProgress?.('Installing packages')
   await execFile('pnpm', ['remove', ...packagesToRemove], { cwd: projectFolder })
+
+  onProgress?.('Executing post-install scripts')
   await execFile('pnpm', ['run', 'postinstall'], { cwd: projectFolder })
 }