Reuse the spinner and quiet install path for template and example fetches.

Author: AbhinRustagi

packages/openui-cli/src/commands/create-app.ts

@@ -3,8 +3,12 @@ import * as os from "node:os";
 import * as path from "node:path";
 
 import { resolveCloudApiKey, THESYS_KEYS_URL } from "../auth/mint";
-import { printLogTail, QUIET_COMMAND_CAPTURE_LIMIT } from "../lib/command-output";
-import { promptForProviderKey, resolveImmediate } from "../lib/create-helpers";
+import {
+  promptForProviderKey,
+  resolveImmediate,
+  runDependencyInstall,
+  withProgress,
+} from "../lib/create-helpers";
 import { aiSetupFromTemplate, createFunnelProps } from "../lib/create-telemetry";
 import type { CreateAppOptions, EnvResult, TemplateName } from "../lib/create-types";
 import {
@@ -21,15 +25,13 @@ import {
   resolveOverlay,
   type OverlayManifest,
 } from "../lib/overlays";
-import { runCommand } from "../lib/process-runner";
 import {
   rejectConflictingScaffoldSelectors,
   resolveProject,
   templatesFromOverlays,
 } from "../lib/projects";
 import { resolveArgs } from "../lib/resolve-args";
 import { resolveTemplateSource } from "../lib/scaffold-template";
-import { withSpinner } from "../lib/spinner";
 import { resolveAvailableTarget } from "../lib/target-dir";
 import { CliCancelledError, CreateError, telemetry } from "../lib/telemetry";
 import { cliErrorProperties, processErrorProperties } from "../lib/utils";
@@ -224,7 +226,9 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
     );
   }
 
-  const templateSource = await templateSourcePromise;
+  const templateSource = template
+    ? await withProgress("Fetching template...", () => templateSourcePromise, options.verbose)
+    : await templateSourcePromise;
   const templateDir = templateSource?.dir;
   const overlays = templateDir ? listOverlays(templateDir) : [];
   const overlayNames = overlays.map((overlay) => overlay.name);
@@ -261,9 +265,6 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       "MISSING_REQUIRED_ARG",
     );
   }
-  if (templateSource.origin === "github") {
-    console.info("Checked out template from GitHub.\n");
-  }
 
   const backendFramework = project.name;
   if (!overlayNames.includes(backendFramework)) {
@@ -484,41 +485,22 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       template,
       ai_setup: aiSetup,
     });
-    const runInstall = () =>
-      options.verbose
-        ? runCommand(packageManager.runCmd, installArgs, targetDir)
-        : runCommand(packageManager.runCmd, installArgs, targetDir, {
-            echo: false,
-            stdin: "ignore",
-            captureLimit: QUIET_COMMAND_CAPTURE_LIMIT,
-            env: {
-              ...process.env,
-              npm_config_loglevel: "error",
-              NPM_CONFIG_LOGLEVEL: "error",
-            },
-          });
-
-    if (options.verbose) {
-      console.info(`Installing dependencies with: ${installCmd}\n`);
-    }
-    const installResult = options.verbose
-      ? await runInstall()
-      : await withSpinner("Installing dependencies...", runInstall);
+    const installResult = await runDependencyInstall({
+      verbose: options.verbose,
+      command: packageManager.runCmd,
+      args: installArgs,
+      cwd: targetDir,
+      installCmd,
+    });
     if (!installResult.error && installResult.status === 0) {
       dependencyInstalled = true;
-      if (!options.verbose) {
-        console.info("✓ Dependencies installed\n");
-      }
       telemetry.capture("cli_dependency_install_succeeded", {
         ...createFunnelProps("dependency_install_succeeded"),
         template,
         ai_setup: aiSetup,
         dependency_installed: dependencyInstalled,
       });
     } else {
-      if (!options.verbose) {
-        printLogTail(installResult.diagnosticTail, "install log (tail)");
-      }
       const properties = processErrorProperties(installResult, "dependency_install", {
         error_class: "dependency",
         error_code: "NONZERO_EXIT",

packages/openui-cli/src/commands/create-example.ts

@@ -1,13 +1,17 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 
-import { promptForProviderKey, resolveImmediate } from "../lib/create-helpers";
+import {
+  promptForProviderKey,
+  resolveImmediate,
+  runDependencyInstall,
+  withProgress,
+} from "../lib/create-helpers";
 import { createFunnelProps } from "../lib/create-telemetry";
 import type { CreateAppOptions, EnvResult } from "../lib/create-types";
 import { resolveInstallPackageManager } from "../lib/detect-package-manager";
 import { runDevCommand } from "../lib/dev-server";
 import { runSkillInstall, shouldInstallSkill } from "../lib/install-skill";
-import { runCommand } from "../lib/process-runner";
 import type { ExampleProject } from "../lib/projects";
 import { scaffoldExample, upsertEnvKey } from "../lib/scaffold-example";
 import { CliCancelledError, CreateError, telemetry } from "../lib/telemetry";
@@ -61,16 +65,18 @@ export async function runCreateExample(params: {
     example: example.name,
   });
   try {
-    const origin = await scaffoldExample({
-      example,
-      targetDir,
-      name,
-      packageManager: packageManager.name,
-      sourceRoot,
-    });
-    if (origin === "github") {
-      console.info("Checked out example from GitHub.\n");
-    }
+    await withProgress(
+      "Fetching example...",
+      () =>
+        scaffoldExample({
+          example,
+          targetDir,
+          name,
+          packageManager: packageManager.name,
+          sourceRoot,
+        }),
+      options.verbose,
+    );
     if (packageManager.name !== "npm") {
       fs.rmSync(path.join(targetDir, "package-lock.json"), { force: true });
     }
@@ -189,12 +195,17 @@ export async function runCreateExample(params: {
     });
     console.info(`Skipping dependency install (--no-install). Run \`${installCmd}\` later.\n`);
   } else {
-    console.info(`Installing dependencies with: ${installCmd}\n`);
     telemetry.capture("cli_dependency_install_started", {
       ...createFunnelProps("dependency_install_started"),
       example: example.name,
     });
-    const installResult = await runCommand(packageManager.runCmd, installArgs, targetDir);
+    const installResult = await runDependencyInstall({
+      verbose: options.verbose,
+      command: packageManager.runCmd,
+      args: installArgs,
+      cwd: targetDir,
+      installCmd,
+    });
     if (!installResult.error && installResult.status === 0) {
       dependencyInstalled = true;
       telemetry.capture("cli_dependency_install_succeeded", {

packages/openui-cli/src/lib/create-helpers.ts

@@ -1,3 +1,6 @@
+import { printLogTail, QUIET_COMMAND_CAPTURE_LIMIT } from "./command-output";
+import { runCommand, type CommandResult } from "./process-runner";
+import { withSpinner } from "./spinner";
 import { CliCancelledError } from "./telemetry";
 
 const isInteractiveTerminal = () => Boolean(process.stdin.isTTY && process.stdout.isTTY);
@@ -31,6 +34,52 @@ export function resolveImmediate(
   return { immediate: true, installDependencies: true, source: "interactive_default" };
 }
 
+/** Spinner in quiet mode; print the label and stream output when `--verbose`. */
+export async function withProgress<T>(
+  label: string,
+  run: () => Promise<T>,
+  verbose?: boolean,
+): Promise<T> {
+  if (verbose) {
+    console.info(`${label}\n`);
+    return run();
+  }
+  return withSpinner(label, run);
+}
+
+export async function runDependencyInstall(params: {
+  verbose?: boolean;
+  command: string;
+  args: string[];
+  cwd: string;
+  installCmd: string;
+}): Promise<CommandResult> {
+  const { verbose, command, args, cwd, installCmd } = params;
+  const runInstall = () =>
+    verbose
+      ? runCommand(command, args, cwd)
+      : runCommand(command, args, cwd, {
+          echo: false,
+          stdin: "ignore",
+          captureLimit: QUIET_COMMAND_CAPTURE_LIMIT,
+          env: {
+            ...process.env,
+            npm_config_loglevel: "error",
+            NPM_CONFIG_LOGLEVEL: "error",
+          },
+        });
+
+  if (verbose) console.info(`Installing dependencies with: ${installCmd}\n`);
+  const result = verbose
+    ? await runInstall()
+    : await withSpinner("Installing dependencies...", runInstall);
+
+  const ok = !result.error && result.status === 0;
+  if (ok && !verbose) console.info("✓ Dependencies installed\n");
+  if (!ok && !verbose) printLogTail(result.diagnosticTail, "install log (tail)");
+  return result;
+}
+
 export async function promptForProviderKey(envKey = "OPENAI_API_KEY"): Promise<string | null> {
   try {
     const { input } = await import("@inquirer/prompts");