fix: handle CTRL+C during spinners

Author: comatory

cli/src/commands/demo/command.ts

@@ -1,5 +1,4 @@
 import pc from 'picocolors';
-import ora from 'ora';
 import { program } from 'commander';
 import type { FederatedGraph, Subgraph, WhoAmIResponse } from '@wundergraph/cosmo-connect/dist/platform/v1/platform_pb';
 import { config } from '../../core/config.js';
@@ -24,6 +23,7 @@ import {
   resetScreen,
   runRouterContainer,
   updateScreenWithUserInfo,
+  demoSpinner,
 } from './util.js';
 
 function printHello() {
@@ -54,7 +54,7 @@ async function handleGetFederatedGraphResponse(
     });
   }
 
-  const spinner = ora().start();
+  const spinner = demoSpinner().start();
   const getFederatedGraphResponse = await fetchFederatedGraphByName(client, {
     name: config.demoGraphName,
     namespace: config.demoNamespace,
@@ -99,7 +99,7 @@ async function cleanupFederatedGraph(
     cleanupFederatedGraph(client, { graphData, userInfo });
   }
 
-  const spinner = ora().start(`Removing federated graph ${pc.bold(graphData.graph.name)}…`);
+  const spinner = demoSpinner(`Removing federated graph ${pc.bold(graphData.graph.name)}…`).start();
   const deleteResponse = await cleanUpFederatedGraph(client, graphData);
 
   if (deleteResponse.error) {
@@ -139,7 +139,7 @@ async function handleCreateFederatedGraphResponse(
   const routingUrl = new URL('graphql', 'http://localhost');
   routingUrl.port = String(config.demoRouterPort);
 
-  const federatedGraphSpinner = ora().start();
+  const federatedGraphSpinner = demoSpinner().start();
   const createGraphResponse = await createFederatedGraph(client, {
     name: config.demoGraphName,
     namespace: config.demoNamespace,
@@ -192,11 +192,14 @@ async function handleStep2(
   const graph = graphData?.graph;
   const subgraphs = graphData?.subgraphs ?? [];
   if (graph) {
-    const cleanupFn = async () =>
+    let deleted = false;
+    const cleanupFn = async () => {
       await cleanupFederatedGraph(opts.client, {
         graphData: { graph, subgraphs },
         userInfo,
       });
+      deleted = true;
+    };
     await waitForKeyPress(
       {
         Enter: () => undefined,
@@ -205,6 +208,10 @@ async function handleStep2(
       },
       'Hit [ENTER] to continue or [d] to delete the federated graph and its subgraphs to start over. CTRL+C to quit.',
     );
+    if (deleted) {
+      console.log(pc.yellow('\nPlease restart the demo command to continue.\n'));
+      process.exit(0);
+    }
     return { routingUrl: graph.routingURL };
   }
 
@@ -272,7 +279,7 @@ async function handleStep3(
     return;
   }
 
-  const spinner = ora().start('Generating router token…');
+  const spinner = demoSpinner('Generating router token…').start();
   const createResult = await createRouterToken(tokenParams);
 
   if (createResult.error) {
@@ -282,14 +289,15 @@ async function handleStep3(
   }
 
   spinner.succeed('Router token generated.');
+  console.log(`  ${pc.bold(createResult.token)}`);
 
   const sampleQuery = JSON.stringify({
     query: `query GetProductWithReviews($id: ID!) { product(id: $id) { id title price { currency amount } reviews { id author rating contents } } }`,
     variables: { id: 'product-1' },
   });
 
   async function fireSampleQuery() {
-    const querySpinner = ora('Sending sample query…').start();
+    const querySpinner = demoSpinner('Sending sample query…').start();
     try {
       const res = await fetch(`${routerBaseUrl}/graphql`, {
         method: 'POST',
@@ -363,7 +371,7 @@ async function handleStep1(opts: BaseCommandOptions, userInfo: UserInfo) {
 }
 
 async function getUserInfo(client: BaseCommandOptions['client']) {
-  const spinner = ora('Retrieving information about you…').start();
+  const spinner = demoSpinner('Retrieving information about you…').start();
   const { userInfo, error } = await fetchUserInfo(client);
 
   if (error) {
@@ -381,9 +389,6 @@ async function getUserInfo(client: BaseCommandOptions['client']) {
 export default function (opts: BaseCommandOptions) {
   return async function handleCommand() {
     const controller = new AbortController();
-    const cleanup = () => controller.abort();
-    process.on('SIGINT', cleanup);
-    process.on('SIGTERM', cleanup);
 
     try {
       clearScreen();
@@ -425,8 +430,7 @@ export default function (opts: BaseCommandOptions) {
       const routerBaseUrl = new URL(step2Result.routingUrl).origin;
       await handleStep3(opts, { userInfo, routerBaseUrl, signal: controller.signal, logPath });
     } finally {
-      process.off('SIGINT', cleanup);
-      process.off('SIGTERM', cleanup);
+      // no-op
     }
   };
 }

cli/src/commands/demo/util.ts

@@ -12,6 +12,14 @@ import type { BaseCommandOptions } from '../../core/types/types.js';
 import { visibleLength } from '../../utils.js';
 import type { UserInfo } from './types.js';
 
+// TODO: ora defaults discardStdin to true which puts stdin into raw mode
+// and restores it to cooked mode when the spinner stops. This conflicts
+// with the demo command's own stdin management (enableRawModeWithCtrlC)
+// causing CTRL+C to stop working between prompts.
+export function demoSpinner(text?: string) {
+  return ora({ text, discardStdin: false });
+}
+
 /**
  * Clears whole screen
  */
@@ -119,7 +127,7 @@ const GitHubTreeSchema = z.object({
  * @returns [directory] path which contains the support data
  */
 export async function prepareSupportingData() {
-  const spinner = ora('Preparing supporting data…').start();
+  const spinner = demoSpinner('Preparing supporting data…').start();
 
   const cosmoDir = path.join(cacheDir, 'demo');
   await fs.mkdir(cosmoDir, { recursive: true });
@@ -215,7 +223,7 @@ async function createDockerContainerBuilder(builderName: string): Promise<void>
  * properly. In case of failures, show prompt to install/setup.
  */
 export async function checkDockerReadiness(): Promise<void> {
-  const spinner = ora('Checking Docker availability…').start();
+  const spinner = demoSpinner('Checking Docker availability…').start();
 
   if (!(await isDockerAvailable())) {
     spinner.fail('Docker is not available.');
@@ -386,7 +394,7 @@ export async function runRouterContainer({
   args.push(config.demoRouterImage);
 
   const logStream = createWriteStream(logPath, { flags: 'a' });
-  const spinner = ora(`Starting router on ${pc.bold(routerBaseUrl)}…`).start();
+  const spinner = demoSpinner(`Starting router on ${pc.bold(routerBaseUrl)}…`).start();
 
   try {
     const proc = execa('docker', args, {
@@ -451,7 +459,7 @@ export async function publishAllPlugins({
       const pluginName = pluginNames[i];
       const pluginDir = path.join(supportDir, 'plugins', pluginName);
 
-      const spinner = ora(`Publishing plugin ${pc.bold(pluginName)} (${i + 1}/${pluginNames.length})…`).start();
+      const spinner = demoSpinner(`Publishing plugin ${pc.bold(pluginName)} (${i + 1}/${pluginNames.length})…`).start();
 
       const files = await readPluginFiles(pluginDir);
       const result = await publishPluginPipeline({

cli/src/utils.ts

@@ -308,7 +308,10 @@ type PrintTruncationWarningParams = {
  * For non-Enter keys, the callback fires immediately on keypress (no Enter required).
  * Ctrl+C always exits the process.
  */
-export function waitForKeyPress(keyMap: Record<string, (() => void) | undefined>, message?: string): Promise<void> {
+export function waitForKeyPress(
+  keyMap: Record<string, (() => unknown | Promise<unknown>) | undefined>,
+  message?: string,
+): Promise<void> {
   const { promise, resolve } = Promise.withResolvers<void>();
 
   if (message) {
@@ -318,7 +321,7 @@ export function waitForKeyPress(keyMap: Record<string, (() => void) | undefined>
   process.stdin.setRawMode(true);
   process.stdin.resume();
 
-  const onData = (data: Buffer) => {
+  const onData = async (data: Buffer) => {
     const key = data.toString();
 
     // Ctrl+C
@@ -337,7 +340,7 @@ export function waitForKeyPress(keyMap: Record<string, (() => void) | undefined>
       process.stdin.setRawMode(false);
       process.stdin.pause();
       process.stdout.write('\n');
-      keyMap[normalized]?.();
+      await keyMap[normalized]?.();
       resolve();
     }
   };