feat(cli): Add unified Angular/React support with MCP integration and bug fixes

This commit introduces comprehensive Angular and React CLI support into the unified @sourceloop/cli package, along with critical bug fixes to the MCP server implementation.

## New Features

### Angular Commands (4)
- `angular:scaffold` - Scaffold Angular projects from ARC boilerplate
- `angular:generate` - Generate components, services, modules, directives, pipes, guards
- `angular:config` - Update Angular environment configuration files
- `angular:info` - Display Angular project information and statistics

### React Commands (4)
- `react:scaffold` - Scaffold React projects from ARC boilerplate
- `react:generate` - Generate components, hooks, contexts, pages, services, utils, Redux slices
- `react:config` - Update React .env and config.json files
- `react:info` - Display React project information and statistics

### Utility Classes
- `FileGenerator` - Shared file generation and project manipulation utilities
- `McpConfigInjector` - Automatic MCP configuration injection into scaffolded projects
- `TemplateFetcher` - Smart template fetching with GitHub and local path support

### Architecture
- **Unified CLI**: Single package (~8MB) vs separate packages (~208MB total)
- **Dynamic Templates**: Fetch templates from GitHub on-demand, no vendored templates
- **MCP Integration**: All 13 commands (5 backend + 4 Angular + 4 React) exposed via single MCP server
- **Auto MCP Injection**: Scaffolded projects automatically get .claude/mcp.json configuration

## Bug Fixes (MCP Server)

1. **Fix hookProcessMethods called in loop** (mcp.ts:95)
   - Moved hookProcessMethods() call outside forEach loop
   - Previously hooked process methods multiple times (once per command)
   - Now hooks once before registering tools

2. **Fix console.error log level** (mcp.ts:156)
   - Changed from 'debug' to 'error' level for console.error messages
   - Ensures errors are properly categorized in MCP client logs

3. **Fix console.log not actually logging** (mcp.ts:178)
   - Added missing originalLog(...args) call
   - Previously intercepted but didn't execute original console.log
   - Now properly logs to both MCP client and console

4. **Fix argToZod optional handling** (mcp.ts:183)
   - Now correctly marks non-required args as optional
   - Returns arg.required ? option : option.optional()
   - Fixes validation errors for optional command arguments

## Technical Details

### Package Size Comparison
- Option 1 (Separate packages): ~208MB total across 3 packages
- Option 2 (Vendored templates): ~208MB single package
- **Option 3 (Dynamic fetching)**: **~8MB** single package (96% reduction)

### Command Organization
- Backend: `sl <command>` (scaffold, microservice, extension, cdk, update)
- Angular: `sl angular:<command>` (scaffold, generate, config, info)
- React: `sl react:<command>` (scaffold, generate, config, info)

### MCP Server
- Single server exposes all 13 commands as tools
- AI assistants can invoke any command via MCP protocol
- Unified configuration: `npx @sourceloop/cli mcp`

## Testing
- All existing tests passing
- MCP integration tests passing (2/2)
- Build successful with zero TypeScript errors

## Documentation
- Added comprehensive TDD.md explaining architecture decisions
- Detailed comparison of 3 architectural approaches
- Implementation details and future enhancements

📦 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: rohit-sourcefuse

packages/cli/README.md

@@ -20,7 +20,7 @@ $ npm install -g @sourceloop/cli
 $ sl COMMAND
 running command...
 $ sl (-v|--version|version)
-@sourceloop/cli/12.0.0 linux-x64 node-v20.19.5
+@sourceloop/cli/12.0.0 darwin-arm64 node-v20.18.2
 $ sl --help [COMMAND]
 USAGE
   $ sl COMMAND
@@ -31,15 +31,118 @@ USAGE
 ## Commands
 
 <!-- commands -->
+* [`sl angular:config`](#sl-angularconfig)
+* [`sl angular:generate [NAME]`](#sl-angulargenerate-name)
+* [`sl angular:info`](#sl-angularinfo)
+* [`sl angular:scaffold [NAME]`](#sl-angularscaffold-name)
 * [`sl autocomplete [SHELL]`](#sl-autocomplete-shell)
 * [`sl cdk`](#sl-cdk)
 * [`sl extension [NAME]`](#sl-extension-name)
 * [`sl help [COMMAND]`](#sl-help-command)
 * [`sl mcp`](#sl-mcp)
 * [`sl microservice [NAME]`](#sl-microservice-name)
+* [`sl react:config`](#sl-reactconfig)
+* [`sl react:generate [NAME]`](#sl-reactgenerate-name)
+* [`sl react:info`](#sl-reactinfo)
+* [`sl react:scaffold [NAME]`](#sl-reactscaffold-name)
 * [`sl scaffold [NAME]`](#sl-scaffold-name)
 * [`sl update`](#sl-update)
 
+## `sl angular:config`
+
+Update Angular environment configuration files
+
+```
+USAGE
+  $ sl angular:config
+
+OPTIONS
+  --apiUrl=apiUrl                                 Base API URL
+  --authServiceUrl=authServiceUrl                 Authentication service URL
+  --clientId=clientId                             OAuth client ID
+  --environment=(development|production|staging)  [default: development] Environment to update
+  --help                                          Show manual pages
+  --publicKey=publicKey                           Public key for authentication
+```
+
+_See code: [src/commands/angular/config.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/angular/config.ts)_
+
+## `sl angular:generate [NAME]`
+
+Generate Angular components, services, modules, and other artifacts
+
+```
+USAGE
+  $ sl angular:generate [NAME]
+
+ARGUMENTS
+  NAME  Name of the artifact to generate
+
+OPTIONS
+  --help                                                  Show manual pages
+
+  --path=path                                             Path where the artifact should be generated (relative to
+                                                          project src/app)
+
+  --project=project                                       [default: arc] Angular project name (arc, arc-lib, arc-docs,
+                                                          saas-ui)
+
+  --skipTests                                             Skip generating test files
+
+  --standalone                                            Generate as a standalone component (Angular 14+)
+
+  --type=(component|service|module|directive|pipe|guard)  Type of artifact to generate
+```
+
+_See code: [src/commands/angular/generate.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/angular/generate.ts)_
+
+## `sl angular:info`
+
+Display Angular project information and statistics
+
+```
+USAGE
+  $ sl angular:info
+
+OPTIONS
+  --detailed  Show detailed statistics
+  --help      Show manual pages
+```
+
+_See code: [src/commands/angular/info.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/angular/info.ts)_
+
+## `sl angular:scaffold [NAME]`
+
+Scaffold a new Angular project from ARC boilerplate
+
+```
+USAGE
+  $ sl angular:scaffold [NAME]
+
+ARGUMENTS
+  NAME  Name of the project
+
+OPTIONS
+  --help                             Show manual pages
+  --installDeps                      Install dependencies after scaffolding
+  --localPath=localPath              Local path to template (for development)
+
+  --templateRepo=templateRepo        [default: sourcefuse/angular-boilerplate] Custom template repository (e.g.,
+                                     sourcefuse/angular-boilerplate)
+
+  --templateVersion=templateVersion  Template version/branch to use
+
+  --withAuth                         Include authentication module
+
+  --withBreadcrumbs                  Include breadcrumb navigation
+
+  --withI18n                         Include internationalization
+
+  --withThemes                       Include theme system
+```
+
+_See code: [src/commands/angular/scaffold.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/angular/scaffold.ts)_
+
 ## `sl autocomplete [SHELL]`
 
 display autocomplete installation instructions
@@ -193,6 +296,94 @@ OPTIONS
 
 _See code: [src/commands/microservice.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/microservice.ts)_
 
+## `sl react:config`
+
+Update React environment configuration
+
+```
+USAGE
+  $ sl react:config
+
+OPTIONS
+  --appApiBaseUrl=appApiBaseUrl                                Application API base URL
+  --authApiBaseUrl=authApiBaseUrl                              Authentication API base URL
+  --clientId=clientId                                          OAuth client ID
+  --enableSessionTimeout                                       Enable session timeout
+  --expiryTimeInMinute=expiryTimeInMinute                      Session timeout in minutes
+  --help                                                       Show manual pages
+  --promptTimeBeforeIdleInMinute=promptTimeBeforeIdleInMinute  Prompt time before idle in minutes
+  --regenerate                                                 Regenerate config.json after updating .env
+```
+
+_See code: [src/commands/react/config.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/react/config.ts)_
+
+## `sl react:generate [NAME]`
+
+Generate React components, hooks, contexts, pages, and other artifacts
+
+```
+USAGE
+  $ sl react:generate [NAME]
+
+ARGUMENTS
+  NAME  Name of the artifact to generate
+
+OPTIONS
+  --help                                                   Show manual pages
+  --path=path                                              Path where the artifact should be generated
+  --skipTests                                              Skip generating test files
+  --type=(component|hook|context|page|service|util|slice)  Type of artifact to generate
+```
+
+_See code: [src/commands/react/generate.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/react/generate.ts)_
+
+## `sl react:info`
+
+Display React project information and statistics
+
+```
+USAGE
+  $ sl react:info
+
+OPTIONS
+  --detailed  Show detailed statistics
+  --help      Show manual pages
+```
+
+_See code: [src/commands/react/info.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/react/info.ts)_
+
+## `sl react:scaffold [NAME]`
+
+Scaffold a new React project from ARC boilerplate
+
+```
+USAGE
+  $ sl react:scaffold [NAME]
+
+ARGUMENTS
+  NAME  Name of the project
+
+OPTIONS
+  --help                             Show manual pages
+  --installDeps                      Install dependencies after scaffolding
+  --localPath=localPath              Local path to template (for development)
+
+  --templateRepo=templateRepo        [default: sourcefuse/react-boilerplate-ts-ui] Custom template repository (e.g.,
+                                     sourcefuse/react-boilerplate-ts-ui)
+
+  --templateVersion=templateVersion  Template version/branch to use
+
+  --withAuth                         Include authentication module
+
+  --withRedux                        Include Redux Toolkit state management
+
+  --withRouting                      Include React Router
+
+  --withThemes                       Include Material-UI theme system
+```
+
+_See code: [src/commands/react/scaffold.ts](https://github.com/sourcefuse/loopback4-microservice-catalog/blob/v12.0.0/src/commands/react/scaffold.ts)_
+
 ## `sl scaffold [NAME]`
 
 Setup a ARC based monorepo using npm workspaces with an empty services, facades and packages folder