CLI: Minor improvements

code/core/src/cli/AddonVitestService.ts

@@ -118,14 +118,15 @@
     const errors: string[] = [];
 
     const playwrightCommand = ['playwright', 'install', 'chromium', '--with-deps'];
+    const playwrightCommandString = this.packageManager.getPackageCommand(playwrightCommand);
 
     try {
       const shouldBeInstalled = options.yes
         ? true
         : await (async () => {
             logger.log(dedent`
             Playwright browser binaries are necessary for @storybook/addon-vitest. The download can take some time. If you don't want to wait, you can skip the installation and run the following command manually later:
-            ${CLI_COLORS.cta(`npx ${playwrightCommand.join(' ')}`)}
+            ${CLI_COLORS.cta(playwrightCommandString)}
             `);
             return prompt.confirm({
               message: 'Do you want to install Playwright with Chromium now?',
@@ -143,8 +144,8 @@
             }),
           {
             id: 'playwright-installation',
-            intro: 'Installing Playwright browser binaries (Press "c" to abort)',
-            error: `An error occurred while installing Playwright browser binaries. Please run the following command later: npx ${playwrightCommand.join(' ')}`,
+            intro: 'Installing Playwright browser binaries (press "c" to abort)',
+            error: `An error occurred while installing Playwright browser binaries. Please run the following command later: ${playwrightCommandString}`,
             success: 'Playwright browser binaries installed successfully',
             abortable: true,
           }

code/core/src/common/js-package-manager/BUNProxy.ts

@@ -87,6 +87,10 @@ export class BUNProxy extends JsPackageManager {
     return `bunx ${pkg}${specifier ? `@${specifier}` : ''} ${args.join(' ')}`;
   }
 
+  getPackageCommand(args: string[]): string {
+    return `bunx ${args.join(' ')}`;
+  }
+
   public async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const wantedPath = join('node_modules', packageName, 'package.json');
     const packageJsonPath = find.up(wantedPath, {

code/core/src/common/js-package-manager/JsPackageManager.ts

@@ -101,9 +101,12 @@ export abstract class JsPackageManager {
     this.primaryPackageJson = this.#getPrimaryPackageJson();
   }
 
-  /** Runs arbitrary package scripts. */
+  /** Runs arbitrary package scripts (as a string for display). */
   abstract getRunCommand(command: string): string;
 
+  /** Returns the command to run the binary of a local package */
+  abstract getPackageCommand(args: string[]): string;
+
   /** Get the package.json file for a given module. */
   abstract getModulePackageJSON(packageName: string, cwd?: string): Promise<PackageJson | null>;
 

code/core/src/common/js-package-manager/NPMProxy.ts

@@ -98,6 +98,10 @@ export class NPMProxy extends JsPackageManager {
     return this.installArgs;
   }
 
+  public getPackageCommand(args: string[]): string {
+    return `npx ${args.join(' ')}`;
+  }
+
   public runPackageCommand(
     options: Omit<ExecuteCommandOptions, 'command'> & { args: string[] }
   ): ExecaChildProcess {

code/core/src/common/js-package-manager/PNPMProxy.ts

@@ -73,6 +73,10 @@ export class PNPMProxy extends JsPackageManager {
     return this.installArgs;
   }
 
+  getPackageCommand(args: string[]): string {
+    return `pnpm exec ${args.join(' ')}`;
+  }
+
   public runPackageCommand({
     args,
     ...options

code/core/src/common/js-package-manager/Yarn1Proxy.ts

@@ -50,6 +50,11 @@ export class Yarn1Proxy extends JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getPackageCommand(args: string[]): string {
+    const [command, ...rest] = args;
+    return `yarn exec ${command} -- ${rest.join(' ')}`;
+  }
+
   public runPackageCommand({
     args,
     ...options

code/core/src/common/js-package-manager/Yarn2Proxy.ts

@@ -94,6 +94,10 @@ export class Yarn2Proxy extends JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getPackageCommand(args: string): string {
+    return `yarn exec ${args}`;
+  }
+
   public runPackageCommand({
     args,
     ...options

code/core/src/node-logger/logger/colors.ts

@@ -4,7 +4,8 @@ export const CLI_COLORS = {
   success: picocolors.green,
   error: picocolors.red,
   warning: picocolors.yellow,
-  info: process.platform === 'win32' ? picocolors.cyan : picocolors.blue,
+  // Improve contrast on dark terminals by using cyan for info on all platforms
+  info: picocolors.cyan,
   debug: picocolors.gray,
   // Only color a link if it is the primary call to action, otherwise links shouldn't be colored
   cta: picocolors.cyan,

code/core/src/telemetry/notify.ts

@@ -19,10 +19,7 @@ export const notify = async () => {
     if (!(await cache.get(TELEMETRY_KEY_NOTIFY_DATE, null))) {
       cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now());
       logger.info(
-        dedent`
-        Attention: Storybook collects completely anonymous telemetry regarding usage. This information is used to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
-        https://storybook.js.org/telemetry
-        `
+        "Storybook collects completely anonymous usage telemetry. We use it to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt out, at https://storybook.js.org/telemetry"
       );
     }
   }

code/lib/create-storybook/src/commands/UserPreferencesCommand.ts

@@ -155,8 +155,8 @@ export class UserPreferencesCommand {
     let installType: InstallType = 'recommended';
 
     const recommendedLabel = isTestFeatureAvailable
-      ? `Recommended: Includes component development, docs and testing features.`
-      : `Recommended: Includes component development and docs`;
+      ? `Recommended: Component development, docs, and testing features.`
+      : `Recommended: Component development and docs`;
 
     if (!skipPrompt) {
       installType = await prompt.select({