Repository: withastro/astro
File: packages/astro/src/cli/install-package.ts (TypeScript)

Code before:
	}
	const coloredOutput = `${bold(installCommand.command)} ${installCommand.args.join(' ')} ${cyan(packageNames.join(' '))}`;
	logger.info(
		'SKIP_FORMAT',
		`\n  ${magenta('Astro will run the following command:')}\n  ${dim(
			'If you skip this step, you can always run it yourself later',
		)}`,
	);
	clack.box(coloredOutput, undefined, {
		rounded: true,
	});

	let response;
	if (options.skipAsk) {
		response = true;
	} else {
		response =
			(await clack.confirm({
				message: 'Continue?',
				initialValue: true,
			})) === true;
	}

	if (Boolean(response)) {
		const spinner = clack.spinner();
		spinner.start('Installing dependencies...');
		try {
			await exec(installCommand.command, [...installCommand.args, ...packageNames], {
				nodeOptions: {
					cwd,
					// reset NODE_ENV to ensure install command run in dev mode
					env: { NODE_ENV: undefined },
				},
			});
			spinner.stop();

			return true;
		} catch (err) {
			logger.debug('add', 'Error installing dependencies', err);
			spinner.stop(undefined, 2);

			return false;
		}
	} else {
		return false;
	}
}

export async function fetchPackageJson(
	scope: string | undefined,
	name: string,

Review comment (suggestion):
Documenting the visual changes here:

| Current CLI | This PR |
|---|---|
| <img width="667" height="142" alt="image" src="https://github.com/user-attachments/assets/a4fcf262-7309-4b4a-8bf9-6dc503844429" /> | <img width="588" height="161" alt="image" src="https://github.com/user-attachments/assets/e85374fe-08c0-468e-9baa-fab7ea8bd46b" /> |

Cancel state:

| Current CLI | This PR |
|---|---|
| <img width="410" height="108" alt="image" src="https://github.com/user-attachments/assets/150bb7d4-188b-4707-b929-cbefb8d85db4" /> | <img width="404" height="101" alt="image" src="https://github.com/user-attachments/assets/17534afd-8f8f-40d0-b8b1-f1c5db4c382a" /> |

I quite like how the bold text in the old version helps the “Continue?” question stand out, so could be something for us to create a little set of styled utilities for? For example, something like this would help us use that style consistently:

```js
const confirm = ({ message, ...opts }) =>
  clack.confirm({ message: bold(message), ...opts });
```

As noted in my main comment, you can see the inconsistency of switching between the Clack style with the left border and the regular logging here.

Code after:
		packageNames = packageNames.map((name) => `npm:${name}`);
	}
	const coloredOutput = `${bold(installCommand.command)} ${installCommand.args.join(' ')} ${cyan(packageNames.join(' '))}`;
	logger.info(
		'SKIP_FORMAT',
		`\n  ${magenta('Astro will run the following command:')}\n  ${dim(
			'If you skip this step, you can always run it yourself later',
		)}`,
	);
	clack.box(coloredOutput, undefined, {
		rounded: true,
		withGuide: false,
		width: 'auto',
	});

	let response;
	if (options.skipAsk) {
		response = true;
	} else {
		response =
			(await clack.confirm({
				message: colors.bold('Continue?'),
				initialValue: true,
				withGuide: false,
			})) === true;
	}

	if (Boolean(response)) {
		const spinner = clack.spinner({ withGuide: false });
		spinner.start('Installing dependencies...');
		try {
			await exec(installCommand.command, [...installCommand.args, ...packageNames], {
				nodeOptions: {
					cwd,
					// reset NODE_ENV to ensure install command run in dev mode
					env: { NODE_ENV: undefined },
				},
			});
			spinner.stop('Dependencies installed.');

			return true;
		} catch (err) {
			logger.debug('add', 'Error installing dependencies', err);
			spinner.error('Failed to install dependencies.');

			return false;
		}
	} else {
		return false;
	}
}