@veraxhq/verax 0.2.1 → 0.3.0

package/src/cli/util/angular-component-extractor.js

@@ -0,0 +1,179 @@
+/**
+ * PHASE 20 — Angular Component Extractor
+ * 
+ * Extracts component metadata, template, and class content from Angular TypeScript files.
+ * Handles @Component decorators, template files, and component class methods.
+ * Deterministic and robust (no external runtime execution).
+ */
+
+/**
+ * PHASE 20: Extract Angular component metadata
+ * 
+ * @param {string} content - Full .ts file content
+ * @param {string} filePath - Path to the .ts file (for context)
+ * @param {string} projectRoot - Project root directory
+ * @returns {Object} { componentClass: {content, startLine}, template: {content, path, isInline}, decorator: {content, startLine} }
+ */
+export function extractAngularComponent(content, filePath, projectRoot) {
+  const result = {
+    componentClass: null,
+    template: null,
+    decorator: null,
+  };
+  
+  try {
+    // Extract @Component decorator
+    const decoratorRegex = /@Component\s*\(\s*\{([\s\S]*?)\}\s*\)/;
+    const decoratorMatch = content.match(decoratorRegex);
+    
+    if (decoratorMatch) {
+      const decoratorContent = decoratorMatch[0];
+      const decoratorConfig = decoratorMatch[1];
+      const beforeDecorator = content.substring(0, decoratorMatch.index);
+      const decoratorStartLine = (beforeDecorator.match(/\n/g) || []).length + 1;
+      
+      result.decorator = {
+        content: decoratorConfig,
+        startLine: decoratorStartLine,
+      };
+      
+      // Extract template (inline or external file)
+      const templateMatch = decoratorConfig.match(/template\s*:\s*['"`]([\s\S]*?)['"`]/);
+      const templateUrlMatch = decoratorConfig.match(/templateUrl\s*:\s*['"`]([^'"`]+)['"`]/);
+      
+      if (templateMatch) {
+        // Inline template
+        result.template = {
+          content: templateMatch[1],
+          path: filePath,
+          isInline: true,
+        };
+      } else if (templateUrlMatch) {
+        // External template file
+        const templateUrl = templateUrlMatch[1];
+        const templatePath = resolveTemplatePath(templateUrl, filePath, projectRoot);
+        result.template = {
+          path: templatePath,
+          isInline: false,
+        };
+      }
+    }
+    
+    // Extract component class
+    const classRegex = /export\s+class\s+(\w+)\s*(?:extends\s+\w+)?\s*\{([\s\S]*?)\n\}/;
+    const classMatch = content.match(classRegex);
+    
+    if (classMatch) {
+      const beforeClass = content.substring(0, classMatch.index);
+      const classStartLine = (beforeClass.match(/\n/g) || []).length + 1;
+      
+      result.componentClass = {
+        content: classMatch[2],
+        className: classMatch[1],
+        startLine: classStartLine,
+      };
+    }
+  } catch (error) {
+    // Skip if extraction fails
+  }
+  
+  return result;
+}
+
+/**
+ * Resolve template path from templateUrl
+ * 
+ * @param {string} templateUrl - Template URL from decorator
+ * @param {string} componentPath - Path to component file
+ * @param {string} projectRoot - Project root directory
+ * @returns {string} Resolved template path
+ */
+function resolveTemplatePath(templateUrl, componentPath, projectRoot) {
+  const { join, dirname, resolve } = require('path');
+  
+  if (templateUrl.startsWith('./') || templateUrl.startsWith('../')) {
+    // Relative path
+    return resolve(dirname(componentPath), templateUrl);
+  } else {
+    // Absolute path from project root
+    return resolve(projectRoot, templateUrl);
+  }
+}
+
+/**
+ * Extract template bindings from Angular template
+ * Detects event handlers, property bindings, and structural directives
+ * 
+ * @param {string} templateContent - Template content
+ * @returns {Object} { eventHandlers: [], propertyBindings: [], structuralDirectives: [] }
+ */
+export function extractTemplateBindings(templateContent) {
+  const eventHandlers = [];
+  const propertyBindings = [];
+  const structuralDirectives = [];
+  
+  // Extract event handlers: (click)="handler()", (submit)="onSubmit()"
+  const eventHandlerRegex = /\((\w+)\)\s*=\s*["']([^"']+)["']/g;
+  let handlerMatch;
+  while ((handlerMatch = eventHandlerRegex.exec(templateContent)) !== null) {
+    eventHandlers.push({
+      event: handlerMatch[1],
+      handler: handlerMatch[2],
+      line: (templateContent.substring(0, handlerMatch.index).match(/\n/g) || []).length + 1,
+    });
+  }
+  
+  // Extract property bindings: [property]="value", [disabled]="isDisabled"
+  const propertyBindingRegex = /\[(\w+)\]\s*=\s*["']([^"']+)["']/g;
+  let bindingMatch;
+  while ((bindingMatch = propertyBindingRegex.exec(templateContent)) !== null) {
+    propertyBindings.push({
+      property: bindingMatch[1],
+      value: bindingMatch[2],
+      line: (templateContent.substring(0, bindingMatch.index).match(/\n/g) || []).length + 1,
+    });
+  }
+  
+  // Extract structural directives: *ngIf="condition", *ngFor="item of items"
+  const structuralDirectiveRegex = /\*ng(If|For|Switch)\s*=\s*["']([^"']+)["']/g;
+  let directiveMatch;
+  while ((directiveMatch = structuralDirectiveRegex.exec(templateContent)) !== null) {
+    structuralDirectives.push({
+      directive: directiveMatch[1],
+      expression: directiveMatch[2],
+      line: (templateContent.substring(0, directiveMatch.index).match(/\n/g) || []).length + 1,
+    });
+  }
+  
+  return {
+    eventHandlers,
+    propertyBindings,
+    structuralDirectives,
+  };
+}
+
+/**
+ * Map template handlers to component class methods
+ * 
+ * @param {Array} eventHandlers - Event handlers from template
+ * @param {string} classContent - Component class content
+ * @returns {Array} Mapped handlers with method references
+ */
+export function mapTemplateHandlersToClass(eventHandlers, classContent) {
+  return eventHandlers.map(handler => {
+    // Extract method name from handler expression
+    const methodName = handler.handler.split('(')[0].trim();
+    
+    // Try to find method definition in class
+    const methodRegex = new RegExp(`(?:public|private|protected)?\\s*(?:async\\s+)?${methodName}\\s*\\(`, 'g');
+    const methodMatch = methodRegex.exec(classContent);
+    
+    return {
+      ...handler,
+      methodName,
+      methodFound: !!methodMatch,
+      methodLine: methodMatch ? (classContent.substring(0, methodMatch.index).match(/\n/g) || []).length + 1 : null,
+    };
+  });
+}
+

package/src/cli/util/angular-navigation-detector.js

@@ -0,0 +1,141 @@
+/**
+ * PHASE 20 — Angular Navigation Detector
+ * 
+ * Detects navigation promises in Angular applications:
+ * - routerLink directive in templates
+ * - Router.navigate() calls in component methods
+ * - ActivatedRoute navigation
+ */
+
+import { extractAngularComponent, extractTemplateBindings, mapTemplateHandlersToClass } from './angular-component-extractor.js';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import { readFileSync, existsSync } from 'fs';
+
+/**
+ * Detect navigation promises in Angular component
+ * 
+ * @param {string} filePath - Path to .ts file
+ * @param {string} content - Full file content
+ * @param {string} projectRoot - Project root directory
+ * @returns {Array} Array of navigation expectations
+ */
+export function detectAngularNavigation(filePath, content, projectRoot) {
+  const expectations = [];
+  
+  try {
+    const component = extractAngularComponent(content, filePath, projectRoot);
+    
+    // Extract navigation from template (routerLink)
+    if (component.template) {
+      let templateContent = null;
+      
+      if (component.template.isInline) {
+        templateContent = component.template.content;
+      } else if (existsSync(component.template.path)) {
+        templateContent = readFileSync(component.template.path, 'utf8');
+      }
+      
+      if (templateContent) {
+        const templateBindings = extractTemplateBindings(templateContent);
+        
+        // Extract routerLink directives
+        const routerLinkRegex = /routerLink\s*=\s*["']([^"']+)["']/g;
+        let linkMatch;
+        while ((linkMatch = routerLinkRegex.exec(templateContent)) !== null) {
+          const href = linkMatch[1];
+          // Skip external links and hash-only links
+          if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('#')) {
+            continue;
+          }
+          
+          const beforeMatch = templateContent.substring(0, linkMatch.index);
+          const line = (beforeMatch.match(/\n/g) || []).length + 1;
+          
+          expectations.push({
+            type: 'navigation',
+            target: href,
+            context: 'template',
+            sourceRef: {
+              file: component.template.isInline ? filePath : component.template.path,
+              line,
+              snippet: linkMatch[0],
+            },
+            proof: 'PROVEN_EXPECTATION',
+            metadata: {
+              navigationType: 'routerLink',
+            },
+          });
+        }
+      }
+    }
+    
+    // Extract navigation from component class (Router.navigate())
+    if (component.componentClass && component.componentClass.content) {
+      try {
+        const ast = parse(component.componentClass.content, {
+          sourceType: 'module',
+          plugins: ['typescript', 'decorators-legacy', 'classProperties'],
+        });
+        
+        traverse.default(ast, {
+          CallExpression(path) {
+            const { node } = path;
+            
+            // Detect router.navigate() calls
+            if (
+              node.callee.type === 'MemberExpression' &&
+              node.callee.property.name === 'navigate' &&
+              node.arguments.length > 0
+            ) {
+              const arg = node.arguments[0];
+              let target = null;
+              
+              if (arg.type === 'StringLiteral') {
+                target = arg.value;
+              } else if (arg.type === 'ArrayExpression' && arg.elements.length > 0) {
+                // Router.navigate(['/path']) or Router.navigate(['/path', param])
+                const firstElement = arg.elements[0];
+                if (firstElement.type === 'StringLiteral') {
+                  target = firstElement.value;
+                }
+              } else if (arg.type === 'TemplateLiteral' && arg.quasis.length === 1) {
+                target = arg.quasis[0].value.raw;
+              }
+              
+              if (target && !target.startsWith('http://') && !target.startsWith('https://') && !target.startsWith('#')) {
+                const location = node.loc;
+                const line = component.componentClass.startLine + (location ? location.start.line - 1 : 0);
+                
+                expectations.push({
+                  type: 'navigation',
+                  target,
+                  context: 'router-navigate',
+                  sourceRef: {
+                    file: filePath,
+                    line,
+                    snippet: component.componentClass.content.substring(
+                      node.start - (ast.program.body[0]?.start || 0),
+                      node.end - (ast.program.body[0]?.start || 0)
+                    ),
+                  },
+                  proof: arg.type === 'StringLiteral' ? 'PROVEN_EXPECTATION' : 'LIKELY_EXPECTATION',
+                  metadata: {
+                    navigationType: 'router-navigate',
+                  },
+                });
+              }
+            }
+          },
+        });
+      } catch (parseError) {
+        // Skip if parsing fails
+      }
+    }
+  } catch (error) {
+    // Skip if extraction fails
+  }
+  
+  return expectations;
+}
+

package/src/cli/util/angular-network-detector.js

@@ -0,0 +1,161 @@
+/**
+ * PHASE 20 — Angular Network Detector
+ * 
+ * Detects network calls (HttpClient, fetch) in Angular component methods and services.
+ * Reuses AST network detector but ensures it works with Angular TypeScript files.
+ */
+
+import { extractAngularComponent, extractTemplateBindings, mapTemplateHandlersToClass } from './angular-component-extractor.js';
+import { detectNetworkCallsAST } from './ast-network-detector.js';
+import { relative } from 'path';
+import { readFileSync, existsSync } from 'fs';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+
+/**
+ * Detect network promises in Angular component
+ * 
+ * @param {string} filePath - Path to .ts file
+ * @param {string} content - Full file content
+ * @param {string} projectRoot - Project root directory
+ * @returns {Array} Array of network expectations
+ */
+export function detectAngularNetwork(filePath, content, projectRoot) {
+  const expectations = [];
+  
+  try {
+    const component = extractAngularComponent(content, filePath, projectRoot);
+    
+    // Extract event handlers from template to identify UI-bound handlers
+    let templateBindings = null;
+    if (component.template) {
+      let templateContent = null;
+      
+      if (component.template.isInline) {
+        templateContent = component.template.content;
+      } else if (existsSync(component.template.path)) {
+        templateContent = readFileSync(component.template.path, 'utf8');
+      }
+      
+      if (templateContent) {
+        templateBindings = extractTemplateBindings(templateContent);
+      }
+    }
+    
+    const mappedHandlers = component.componentClass && templateBindings
+      ? mapTemplateHandlersToClass(templateBindings.eventHandlers, component.componentClass.content)
+      : [];
+    
+    const uiBoundHandlers = new Set(mappedHandlers.map(h => h.methodName));
+    
+    // Process component class
+    if (component.componentClass && component.componentClass.content) {
+      // Use AST network detector on class content
+      const networkCalls = detectNetworkCallsAST(component.componentClass.content, filePath, relative(projectRoot, filePath));
+      
+      // Also detect HttpClient calls specifically
+      const httpClientCalls = detectHttpClientCalls(component.componentClass.content, component.componentClass.startLine);
+      
+      // Combine and filter network calls
+      const allNetworkCalls = [...networkCalls, ...httpClientCalls];
+      
+      for (const networkCall of allNetworkCalls) {
+        // Check if this is in a UI-bound handler
+        const isUIBound = networkCall.context && uiBoundHandlers.has(networkCall.context);
+        
+        // Skip analytics-only calls (filtered by guardrails later)
+        if (networkCall.target && (
+          networkCall.target.includes('/api/analytics') ||
+          networkCall.target.includes('/api/track') ||
+          networkCall.target.includes('/api/beacon')
+        )) {
+          continue;
+        }
+        
+        expectations.push({
+          type: 'network',
+          target: networkCall.target || networkCall.url,
+          method: networkCall.method || 'GET',
+          context: networkCall.context || 'component',
+          sourceRef: {
+            file: filePath,
+            line: networkCall.line || component.componentClass.startLine,
+            snippet: networkCall.snippet || '',
+          },
+          proof: networkCall.proof || 'LIKELY_EXPECTATION',
+          metadata: {
+            isUIBound,
+            handlerContext: networkCall.context,
+            networkKind: networkCall.kind || 'http',
+          },
+        });
+      }
+    }
+  } catch (error) {
+    // Skip if extraction fails
+  }
+  
+  return expectations;
+}
+
+/**
+ * Detect HttpClient calls (get, post, put, delete, etc.)
+ * 
+ * @param {string} classContent - Component class content
+ * @param {number} startLine - Starting line number
+ * @returns {Array} Array of network call detections
+ */
+function detectHttpClientCalls(classContent, startLine) {
+  const calls = [];
+  
+  try {
+    const ast = parse(classContent, {
+      sourceType: 'module',
+      plugins: ['typescript', 'decorators-legacy', 'classProperties'],
+    });
+    
+    traverse.default(ast, {
+      CallExpression(path) {
+        const { node } = path;
+        
+        // Detect http.get(), http.post(), etc.
+        if (
+          node.callee.type === 'MemberExpression' &&
+          ['get', 'post', 'put', 'delete', 'patch'].includes(node.callee.property.name)
+        ) {
+          const method = node.callee.property.name.toUpperCase();
+          const firstArg = node.arguments[0];
+          let url = null;
+          
+          if (firstArg && firstArg.type === 'StringLiteral') {
+            url = firstArg.value;
+          } else if (firstArg && firstArg.type === 'TemplateLiteral' && firstArg.quasis.length === 1) {
+            url = firstArg.quasis[0].value.raw;
+          }
+          
+          if (url) {
+            const location = node.loc;
+            const line = startLine + (location ? location.start.line - 1 : 0);
+            
+            calls.push({
+              target: url,
+              method,
+              line,
+              snippet: classContent.substring(
+                node.start - (ast.program.body[0]?.start || 0),
+                node.end - (ast.program.body[0]?.start || 0)
+              ),
+              kind: 'httpClient',
+              proof: firstArg.type === 'StringLiteral' ? 'PROVEN_EXPECTATION' : 'LIKELY_EXPECTATION',
+            });
+          }
+        }
+      },
+    });
+  } catch (parseError) {
+    // Skip if parsing fails
+  }
+  
+  return calls;
+}
+

package/src/cli/util/angular-state-detector.js

@@ -0,0 +1,162 @@
+/**
+ * PHASE 20 — Angular State Detector
+ * 
+ * Detects state mutations (component properties, services) in Angular components.
+ * Only emits state promises if state is user-visible (used in template bindings).
+ */
+
+import { extractAngularComponent, extractTemplateBindings } from './angular-component-extractor.js';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import { readFileSync, existsSync } from 'fs';
+
+/**
+ * Detect state promises in Angular component
+ * 
+ * @param {string} filePath - Path to .ts file
+ * @param {string} content - Full file content
+ * @param {string} projectRoot - Project root directory
+ * @returns {Array} Array of state expectations
+ */
+export function detectAngularState(filePath, content, projectRoot) {
+  const expectations = [];
+  
+  try {
+    const component = extractAngularComponent(content, filePath, projectRoot);
+    
+    // Extract template bindings to identify user-visible state
+    let templateBindings = null;
+    let templateContent = null;
+    
+    if (component.template) {
+      if (component.template.isInline) {
+        templateContent = component.template.content;
+      } else if (existsSync(component.template.path)) {
+        templateContent = readFileSync(component.template.path, 'utf8');
+      }
+      
+      if (templateContent) {
+        templateBindings = extractTemplateBindings(templateContent);
+      }
+    }
+    
+    // Collect all state variables used in template
+    const templateStateVars = new Set();
+    
+    // From property bindings: [property]="value"
+    if (templateBindings) {
+      templateBindings.propertyBindings.forEach(binding => {
+        templateStateVars.add(binding.value);
+      });
+      
+      // From structural directives: *ngIf="condition"
+      templateBindings.structuralDirectives.forEach(directive => {
+        // Extract variable names from expressions
+        const varMatch = directive.expression.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+        if (varMatch) {
+          templateStateVars.add(varMatch[1]);
+        }
+      });
+    }
+    
+    // From template interpolation: {{ variable }}
+    if (templateContent) {
+      const interpolationRegex = /\{\{\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\}\}/g;
+      let varMatch;
+      while ((varMatch = interpolationRegex.exec(templateContent)) !== null) {
+        templateStateVars.add(varMatch[1]);
+      }
+    }
+    
+    // Process component class to find state mutations
+    if (component.componentClass && component.componentClass.content) {
+      try {
+        const ast = parse(component.componentClass.content, {
+          sourceType: 'module',
+          plugins: ['typescript', 'decorators-legacy', 'classProperties'],
+        });
+        
+        traverse.default(ast, {
+          // Detect property assignments: this.property = value
+          AssignmentExpression(path) {
+            const { node } = path;
+            
+            if (
+              node.left.type === 'MemberExpression' &&
+              node.left.object.type === 'ThisExpression' &&
+              node.left.property.type === 'Identifier'
+            ) {
+              const propertyName = node.left.property.name;
+              
+              // Only emit if property is used in template
+              if (templateStateVars.has(propertyName)) {
+                const location = node.loc;
+                const line = component.componentClass.startLine + (location ? location.start.line - 1 : 0);
+                
+                expectations.push({
+                  type: 'state',
+                  expectedTarget: propertyName,
+                  context: 'property-assignment',
+                  sourceRef: {
+                    file: filePath,
+                    line,
+                    snippet: component.componentClass.content.substring(
+                      node.start - (ast.program.body[0]?.start || 0),
+                      node.end - (ast.program.body[0]?.start || 0)
+                    ),
+                  },
+                  proof: 'PROVEN_EXPECTATION',
+                  metadata: {
+                    templateUsage: Array.from(templateStateVars).filter(v => v === propertyName).length,
+                    stateType: 'component-property',
+                  },
+                });
+              }
+            }
+          },
+          
+          // Detect property declarations: property: type = value
+          ClassProperty(path) {
+            const { node } = path;
+            
+            if (node.key.type === 'Identifier') {
+              const propertyName = node.key.name;
+              
+              // Only emit if property is used in template and has initializer
+              if (templateStateVars.has(propertyName) && node.value) {
+                const location = node.loc;
+                const line = component.componentClass.startLine + (location ? location.start.line - 1 : 0);
+                
+                expectations.push({
+                  type: 'state',
+                  expectedTarget: propertyName,
+                  context: 'property-declaration',
+                  sourceRef: {
+                    file: filePath,
+                    line,
+                    snippet: component.componentClass.content.substring(
+                      node.start - (ast.program.body[0]?.start || 0),
+                      node.end - (ast.program.body[0]?.start || 0)
+                    ),
+                  },
+                  proof: 'PROVEN_EXPECTATION',
+                  metadata: {
+                    templateUsage: Array.from(templateStateVars).filter(v => v === propertyName).length,
+                    stateType: 'component-property',
+                  },
+                });
+              }
+            }
+          },
+        });
+      } catch (parseError) {
+        // Skip if parsing fails
+      }
+    }
+  } catch (error) {
+    // Skip if extraction fails
+  }
+  
+  return expectations;
+}
+