refactor(@angular/cli): Add spawn to MCP's host

Author: amishne

packages/angular/cli/src/commands/mcp/host.ts

@@ -14,7 +14,7 @@
  */
 
 import { existsSync as nodeExistsSync } from 'fs';
-import { spawn } from 'node:child_process';
+import { ChildProcess, spawn } from 'node:child_process';
 import { Stats } from 'node:fs';
 import { stat } from 'node:fs/promises';
 
@@ -68,14 +68,33 @@ export interface Host {
       env?: Record<string, string>;
     },
   ): Promise<{ stdout: string; stderr: string }>;
+
+  /**
+   * Spawns a long-running child process and returns the `ChildProcess` object.
+   * @param command The command to run.
+   * @param args The arguments to pass to the command.
+   * @param options Options for the child process.
+   * @returns The spawned `ChildProcess` instance.
+   */
+  spawn(
+    command: string,
+    args: readonly string[],
+    options?: {
+      stdio?: 'pipe' | 'ignore';
+      cwd?: string;
+      env?: Record<string, string>;
+    },
+  ): ChildProcess;
 }
 
 /**
  * A concrete implementation of the `Host` interface that runs on a local workspace.
  */
 export const LocalWorkspaceHost: Host = {
   stat,
+
   existsSync: nodeExistsSync,
+
   runCommand: async (
     command: string,
     args: readonly string[],
@@ -127,4 +146,24 @@ export const LocalWorkspaceHost: Host = {
       });
     });
   },
+
+  spawn(
+    command: string,
+    args: readonly string[],
+    options: {
+      stdio?: 'pipe' | 'ignore';
+      cwd?: string;
+      env?: Record<string, string>;
+    } = {},
+  ): ChildProcess {
+    return spawn(command, args, {
+      shell: false,
+      stdio: options.stdio ?? 'pipe',
+      cwd: options.cwd,
+      env: {
+        ...process.env,
+        ...options.env,
+      },
+    });
+  },
 };

packages/angular/cli/src/commands/mcp/tools/build_spec.ts

@@ -17,7 +17,7 @@ describe('Build Tool', () => {
       runCommand: jasmine.createSpy('runCommand').and.resolveTo({ stdout: '', stderr: '' }),
       stat: jasmine.createSpy('stat'),
       existsSync: jasmine.createSpy('existsSync'),
-    };
+    } as Partial<Host> as Host;
   });
 
   it('should handle a successful build and extract the output path', async () => {

packages/angular/cli/src/commands/mcp/tools/serve.ts

@@ -8,10 +8,8 @@
 
 import { ChildProcess, spawn } from 'child_process';
 import { z } from 'zod';
-import { McpToolContext, declareTool } from './tool-registry';
-
-let devServerProcess: ChildProcess | null = null;
-const serverLogs: string[] = [];
+import { Host, LocalWorkspaceHost } from '../host';
+import { McpToolDeclaration, declareTool } from './tool-registry';
 
 const serveToolInputSchema = z.object({
   command: z.enum(['start_devserver', 'stop_devserver']).describe('The subcommand to execute.'),
@@ -37,77 +35,83 @@ const serveToolOutputSchema = z.object({
 
 export type ServeToolOutput = z.infer<typeof serveToolOutputSchema>;
 
-function serveToolFactory(context: McpToolContext) {
-  return (input: ServeToolInput) => {
-    switch (input.command) {
-      case 'start_devserver':
-        if (devServerProcess) {
-          return {
-            structuredContent: {
-              message: 'Development server is already running.',
-            },
-          };
-        }
-
-        const args = ['serve'];
-        if (input.project) {
-          args.push(input.project);
-        }
-        if (input.configuration) {
-          args.push(`--configuration=${input.configuration}`);
-        }
-
-        serverLogs.length = 0; // Clear previous logs
-        devServerProcess = spawn('ng', args, { stdio: 'pipe' });
-
-        devServerProcess.stdout?.on('data', (data) => {
-          serverLogs.push(data.toString());
-        });
-        devServerProcess.stderr?.on('data', (data) => {
-          serverLogs.push(data.toString());
-        });
-
-        devServerProcess.on('close', () => {
-          devServerProcess = null;
-        });
-
-        return {
-          structuredContent: {
-            message: 'Development server started.',
-          },
-        };
-
-      case 'stop_devserver':
-        if (!devServerProcess) {
-          return {
-            structuredContent: {
-              message: 'Development server is not running.',
-            },
-          };
-        }
-
-        devServerProcess.kill('SIGTERM');
-        devServerProcess = null;
-
-        return {
-          structuredContent: {
-            message: 'Development server stopped.',
-            logs: serverLogs,
-          },
-        };
-    }
-  };
+interface ServeContext {
+  devServerProcess: ChildProcess | null;
+  serverLogs: string[];
+}
+
+function startDevserver(input: ServeToolInput, host: Host, context: ServeContext) {
+  if (context.devServerProcess) {
+    return createStructureContentOutput({
+      message: 'Development server is already running.',
+    });
+  }
+
+  const args = ['serve'];
+  if (input.project) {
+    args.push(input.project);
+  }
+  if (input.configuration) {
+    args.push(`--configuration=${input.configuration}`);
+  }
+
+  context.serverLogs.length = 0; // Clear previous logs
+  context.devServerProcess = host.spawn('ng', args, { stdio: 'pipe' });
+
+  context.devServerProcess.stdout?.on('data', (data) => {
+    context.serverLogs.push(data.toString());
+  });
+  context.devServerProcess.stderr?.on('data', (data) => {
+    context.serverLogs.push(data.toString());
+  });
+
+  context.devServerProcess.on('close', () => {
+    context.devServerProcess = null;
+  });
+
+  return createStructureContentOutput({
+    message: 'Development server started.',
+  });
+}
+
+function stopDevserver(context: ServeContext) {
+  if (!context.devServerProcess) {
+    return createStructureContentOutput({
+      message: 'Development server is already not running.',
+    });
+  }
+
+  context.devServerProcess.kill('SIGTERM');
+  context.devServerProcess = null;
+
+  return createStructureContentOutput({
+    message: 'Development server stopped.',
+    logs: context.serverLogs,
+  });
+}
+
+function runServeTool(input: ServeToolInput, host: Host, context: ServeContext) {
+  switch (input.command) {
+    case 'start_devserver':
+      return startDevserver(input, host, context);
+    case 'stop_devserver':
+      return stopDevserver(context);
+  }
 }
 
-export const SERVE_TOOL = declareTool({
+export const SERVE_TOOL: McpToolDeclaration<
+  typeof serveToolInputSchema.shape,
+  typeof serveToolOutputSchema.shape
+> = declareTool({
   name: 'serve',
   title: 'Serve Tool',
   description: `
 <Purpose>
 Manages the Angular development server ("ng serve"). It allows you to start and stop the server as a background process.
 </Purpose>
 <Use Cases>
-* **Starting the Server:** Use the 'start_devserver' command to begin serving the application. The tool will return immediately while the server runs in the background.
+* **Starting the Server:** Use the 'start_devserver' command to begin serving the application. The tool will return immediately
+  while the server runs in the background.
 * **Stopping the Server:** Use the 'stop_devserver' command to terminate the running development server and retrieve the logs.
 </Use Cases>
 <Operational Notes>
@@ -120,5 +124,7 @@ Manages the Angular development server ("ng serve"). It allows you to start and
   isLocalOnly: true,
   inputSchema: serveToolInputSchema.shape,
   outputSchema: serveToolOutputSchema.shape,
-  factory: serveToolFactory,
+  factory: () => (input) => {
+    return runServeTool(input, LocalWorkspaceHost, { devServerProcess: null, serverLogs: [] });
+  },
 });