feat: step 3 - run the router

Author: comatory

cli/.env.example

@@ -2,6 +2,8 @@ COSMO_API_KEY=cosmo_669b576aaadc10ee1ae81d9193425705
 COSMO_API_URL=http://localhost:3001
 CDN_URL=http://localhost:11000
 PLUGIN_REGISTRY_URL=
+DEFAULT_TELEMETRY_ENDPOINT=http://localhost:4318
+GRAPHQL_METRICS_COLLECTOR_ENDPOINT=http://localhost:4005
 
 # configure running wgc behind a proxy
 # HTTPS_PROXY=""

cli/src/commands/demo/command.ts

@@ -22,6 +22,7 @@ import {
   printLogo,
   publishAllPlugins,
   resetScreen,
+  runRouterContainer,
   updateScreenWithUserInfo,
 } from './util.js';
 
@@ -169,16 +170,18 @@ async function handleStep2(
     userInfo,
     supportDir,
     signal,
+    logPath,
   }: {
     onboarding: { finishedAt?: string };
     userInfo: UserInfo;
     supportDir: string;
     signal: AbortSignal;
+    logPath: string;
   },
 ) {
   function retryFn() {
     resetScreen(userInfo);
-    return handleStep2(opts, { onboarding, userInfo, supportDir, signal });
+    return handleStep2(opts, { onboarding, userInfo, supportDir, signal, logPath });
   }
 
   const graphData = await handleGetFederatedGraphResponse(opts.client, {
@@ -202,15 +205,17 @@ async function handleStep2(
       },
       'Hit [ENTER] to continue or [d] to delete the federated graph and its subgraphs to start over. CTRL+C to quit.',
     );
-    return;
+    return { routingUrl: graph.routingURL };
   }
 
   await handleCreateFederatedGraphResponse(opts.client, {
     onboarding,
     userInfo,
   });
 
-  const logPath = getDemoLogPath();
+  const routingUrl = new URL('graphql', 'http://localhost');
+  routingUrl.port = String(config.demoRouterPort);
+
   console.log(`\nPublishing plugins… ${pc.dim(`(logs: ${logPath})`)}`);
 
   const publishResult = await publishAllPlugins({
@@ -229,12 +234,27 @@ async function handleStep2(
       'Hit [r] to retry. CTRL+C to quit.',
     );
   }
+
+  return { routingUrl: routingUrl.toString() };
 }
 
-async function handleStep3(opts: BaseCommandOptions, { userInfo }: { userInfo: UserInfo }) {
+async function handleStep3(
+  opts: BaseCommandOptions,
+  {
+    userInfo,
+    routerBaseUrl,
+    signal,
+    logPath,
+  }: {
+    userInfo: UserInfo;
+    routerBaseUrl: string;
+    signal: AbortSignal;
+    logPath: string;
+  },
+) {
   function retryFn() {
     resetScreen(userInfo);
-    return handleStep3(opts, { userInfo });
+    return handleStep3(opts, { userInfo, routerBaseUrl, signal, logPath });
   }
 
   const tokenParams = {
@@ -262,9 +282,51 @@ async function handleStep3(opts: BaseCommandOptions, { userInfo }: { userInfo: U
   }
 
   spinner.succeed('Router token generated.');
-  console.log(`\n${pc.bold(createResult.token)}\n`);
 
-  // TODO: Step 3b — run router Docker container
+  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();
+    try {
+      const res = await fetch(`${routerBaseUrl}/graphql`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'GraphQL-Client-Name': 'wgc',
+        },
+        body: sampleQuery,
+      });
+      const body = await res.json();
+      querySpinner.succeed('Sample query response:');
+      console.log(pc.dim(JSON.stringify(body, null, 2)));
+    } catch (err) {
+      querySpinner.fail(`Sample query failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+    showQueryPrompt();
+  }
+
+  function showQueryPrompt() {
+    waitForKeyPress(
+      { r: fireSampleQuery, R: fireSampleQuery },
+      'Hit [r] to send a sample query. CTRL+C to stop the router.',
+    );
+  }
+
+  const routerResult = await runRouterContainer({
+    routerToken: createResult.token!,
+    routerBaseUrl,
+    signal,
+    logPath,
+    onReady: showQueryPrompt,
+  });
+
+  if (routerResult.error) {
+    console.error(`\nRouter exited with error: ${routerResult.error.message}`);
+    await waitForKeyPress({ r: retryFn, R: retryFn }, 'Hit [r] to retry. CTRL+C to quit.');
+  }
 }
 
 async function handleGetOnboardingResponse(client: BaseCommandOptions['client'], userInfo: UserInfo) {
@@ -346,9 +408,22 @@ export default function (opts: BaseCommandOptions) {
         return;
       }
 
-      await handleStep2(opts, { onboarding: onboardingCheck, userInfo, supportDir, signal: controller.signal });
+      const logPath = getDemoLogPath();
+
+      const step2Result = await handleStep2(opts, {
+        onboarding: onboardingCheck,
+        userInfo,
+        supportDir,
+        signal: controller.signal,
+        logPath,
+      });
+
+      if (!step2Result) {
+        return;
+      }
 
-      await handleStep3(opts, { userInfo });
+      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);

cli/src/commands/demo/util.ts

@@ -266,6 +266,163 @@ function pipeToLog(logStream: WriteStream, proc: ResultPromise) {
   proc.stderr?.pipe(logStream, { end: false });
 }
 
+/**
+ * Rewrite localhost to host.docker.internal so the container can
+ * reach services running on the host machine.
+ */
+function toDockerHost(url: string) {
+  return url.replace(/localhost/g, 'host.docker.internal');
+}
+
+/**
+ * Best-effort removal of a potentially stale router container
+ * from a previous crashed run.
+ */
+async function removeRouterContainer(): Promise<void> {
+  try {
+    await execa('docker', ['rm', '-f', config.demoRouterContainerName]);
+  } catch {
+    // ignore — container may not exist
+  }
+}
+
+/**
+ * Polls the router's readiness endpoint until it responds 200
+ * or the signal is aborted / max attempts exceeded.
+ */
+async function waitForRouterReady({
+  routerBaseUrl,
+  signal,
+  intervalMs = 1000,
+  maxAttempts = 60,
+}: {
+  routerBaseUrl: string;
+  signal: AbortSignal;
+  intervalMs?: number;
+  maxAttempts?: number;
+}): Promise<boolean> {
+  const url = `${routerBaseUrl}/health/ready`;
+
+  for (let i = 0; i < maxAttempts; i++) {
+    if (signal.aborted) {
+      return false;
+    }
+    try {
+      const res = await fetch(url, { signal });
+      if (res.ok) {
+        return true;
+      }
+    } catch {
+      // not up yet
+    }
+    await new Promise((resolve) => setTimeout(resolve, intervalMs));
+  }
+
+  return false;
+}
+
+/**
+ * Runs the cosmo router as a Docker container. Shows an ora spinner
+ * that transitions from "Starting…" to "Router is ready" once the
+ * health endpoint responds. The process stays alive until the abort
+ * signal fires (CTRL+C / crash) or docker exits on its own.
+ */
+export async function runRouterContainer({
+  routerToken,
+  routerBaseUrl,
+  signal,
+  logPath,
+  onReady,
+}: {
+  routerToken: string;
+  routerBaseUrl: string;
+  signal: AbortSignal;
+  logPath: string;
+  onReady?: () => void;
+}): Promise<{ error: Error | null }> {
+  await removeRouterContainer();
+
+  const port = config.demoRouterPort;
+
+  const args = [
+    'run',
+    '--name',
+    config.demoRouterContainerName,
+    '--rm',
+    '-p',
+    `${port}:${port}`,
+    '--add-host=host.docker.internal:host-gateway',
+    '--pull',
+    'always',
+    '-e',
+    'DEV_MODE=true',
+    '-e',
+    'LOG_LEVEL=debug',
+    '-e',
+    `LISTEN_ADDR=0.0.0.0:${port}`,
+    '-e',
+    `GRAPH_API_TOKEN=${routerToken}`,
+    '-e',
+    'PLUGINS_ENABLED=true',
+  ];
+
+  // Local-dev env vars — only forwarded when set in the wgc process.
+
+  const conditionalEnvs: Array<[string, string | undefined]> = [
+    ['CDN_URL', process.env.CDN_URL],
+    ['REGISTRY_URL', process.env.PLUGIN_REGISTRY_URL],
+    ['PLUGINS_REGISTRY_URL', process.env.PLUGIN_REGISTRY_URL],
+    ['CONTROLPLANE_URL', process.env.COSMO_API_URL],
+    ['DEFAULT_TELEMETRY_ENDPOINT', process.env.DEFAULT_TELEMETRY_ENDPOINT],
+    ['GRAPHQL_METRICS_COLLECTOR_ENDPOINT', process.env.GRAPHQL_METRICS_COLLECTOR_ENDPOINT],
+  ];
+
+  for (const [key, value] of conditionalEnvs) {
+    if (value) {
+      args.push('-e', `${key}=${toDockerHost(value)}`);
+    }
+  }
+
+  args.push(config.demoRouterImage);
+
+  const logStream = createWriteStream(logPath, { flags: 'a' });
+  const spinner = ora(`Starting router on ${pc.bold(routerBaseUrl)}…`).start();
+
+  try {
+    const proc = execa('docker', args, {
+      stdio: 'pipe',
+      ...(signal ? { cancelSignal: signal } : {}),
+    });
+
+    pipeToLog(logStream, proc);
+
+    // Poll readiness in parallel with the long-running docker process
+    waitForRouterReady({ routerBaseUrl, signal }).then((ready) => {
+      if (ready) {
+        spinner.succeed(`Router is ready on ${pc.bold(routerBaseUrl)}.`);
+        console.log(pc.dim(`(logs: ${logPath})`));
+        onReady?.();
+      } else if (!signal.aborted) {
+        spinner.warn('Router started but readiness check timed out. It may still be starting.');
+        console.log(pc.dim(`(logs: ${logPath})`));
+      }
+    });
+
+    await proc;
+  } catch (error) {
+    // Graceful abort — not an error
+    if (error instanceof Error && 'isCanceled' in error && (error as any).isCanceled) {
+      return { error: null };
+    }
+    spinner.fail('Router failed to start.');
+    return { error: error instanceof Error ? error : new Error(String(error)) };
+  } finally {
+    logStream.end();
+  }
+
+  return { error: null };
+}
+
 /**
  * Publishes demo plugins sequentially.
  * Returns [error] on first failure; spinner shows which plugin failed.

cli/src/core/config.ts

@@ -42,9 +42,13 @@ export const config = {
   demoOnboardingRepositoryName: 'wundergraph/cosmo-onboarding' as const,
   demoOnboardingRepositoryBranch: 'main' as const,
   dockerBuilderName: 'cosmo-builder' as const,
+  defaultTelemetryEndpoint: process.env.DEFAULT_TELEMETRY_ENDPOINT,
+  graphqlMetricsCollectorEndpoint: process.env.GRAPHQL_METRICS_COLLECTOR_ENDPOINT,
   demoRouterPort: 3002 as const,
   demoPluginNames: ['products', 'reviews'] as const,
   demoRouterTokenName: 'demo-router-token' as const,
+  demoRouterImage: 'ghcr.io/wundergraph/cosmo/router:latest' as const,
+  demoRouterContainerName: 'cosmo-router' as const,
 };
 
 export const getBaseHeaders = (): HeadersInit => {