@codeyam/codeyam-cli 0.1.0-staging.b8a55ba → 0.1.0-staging.c90f8c9

package/analyzer-template/packages/ai/src/lib/dataStructure/equivalencyManagers/frameworks/JavascriptFrameworkManager.ts

@@ -518,8 +518,9 @@ export class JavascriptFrameworkManager implements EquivalencyManager {
 
     for (const [arrayPath, arrayInfo] of Object.entries(arrays)) {
       if (arrayInfo.paths.size > 1 && arrayInfo.values.size === 1) {
+        const elementType = Array.from(arrayInfo.values)[0];
         arrayInfo.paths.forEach((path) => delete scopeNode.schema[path]);
-        scopeNode.schema[`${arrayPath}[]`] = Array.from(arrayInfo.values)[0];
+        scopeNode.schema[`${arrayPath}[]`] = elementType;
       }
     }
   }

package/analyzer-template/packages/ai/src/lib/dataStructure/equivalencyManagers/frameworks/MuiManager.ts

@@ -39,6 +39,203 @@ export class MuiManager implements EquivalencyManager {
 
     // Also check if this scope is inside a DataGrid callback and propagate row property accesses
     this.propagateFromChildScope(scopeNode, scopeDataStructure);
+
+    // NOTE: processGridApiContext, processCreateTheme, and processGridSelector
+    // are now called from finalize() instead of here.
+    // This is because external function calls are only added AFTER postProcess()
+    // runs (in trackFunctionCalls), so getExternalFunctionCallInfo() would return
+    // undefined during postProcess(). See Issue 23.
+  }
+
+  /**
+   * Handle useGridApiContext() calls by adding the expected apiRef structure to the schema.
+   *
+   * useGridApiContext() returns an apiRef that has internal state used by useGridSelector.
+   * When useGridSelector(apiRef, selector) is called, it accesses apiRef.current.state
+   * to extract data like filterModel, sortModel, etc.
+   *
+   * We add the state structure directly to the external function call's schema
+   * to ensure mocks include the necessary paths.
+   */
+  private processGridApiContext(
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find the external function call for useGridApiContext
+    const gridApiContextCall =
+      scopeDataStructure.getExternalFunctionCallInfo('useGridApiContext');
+
+    if (!gridApiContextCall) {
+      return;
+    }
+
+    // Add the state structure that useGridSelector needs to the external function call's schema
+    // useGridSelector reads from apiRef.current.state internally
+    // gridFilterModelSelector reads state.filter.filterModel
+    const basePath = 'useGridApiContext().functionCallReturnValue.current';
+    const statePaths: Record<string, string> = {
+      [`${basePath}.state`]: 'object',
+      [`${basePath}.state.filter`]: 'object',
+      [`${basePath}.state.filter.filterModel`]: 'object',
+      [`${basePath}.state.filter.filterModel.items`]: 'array',
+      // Also add common state paths that might be needed by other selectors
+      [`${basePath}.state.sorting`]: 'object',
+      [`${basePath}.state.sorting.sortModel`]: 'array',
+      [`${basePath}.state.pagination`]: 'object',
+      [`${basePath}.state.pagination.paginationModel`]: 'object',
+      [`${basePath}.state.pagination.paginationModel.page`]: 'number',
+      [`${basePath}.state.pagination.paginationModel.pageSize`]: 'number',
+      [`${basePath}.state.rows`]: 'object',
+      [`${basePath}.state.rows.dataRowIds`]: 'array',
+      [`${basePath}.state.columns`]: 'object',
+      [`${basePath}.state.columns.all`]: 'array',
+    };
+
+    // Add each path to the external function call's schema if it doesn't exist
+    for (const [path, type] of Object.entries(statePaths)) {
+      if (!gridApiContextCall.schema[path]) {
+        gridApiContextCall.schema[path] = type;
+      }
+    }
+  }
+
+  /**
+   * Handle createTheme() calls by adding required MUI theme properties to the schema.
+   *
+   * MUI's ThemeProvider and related components check for specific properties:
+   * - `'$$material' in theme` - validates it's a MUI theme object
+   * - `'colorSchemes' in theme` - checks for color scheme support (MUI v6+)
+   *
+   * Without these properties, ThemeProvider throws:
+   * "TypeError: Cannot use 'in' operator to search for '$$material' in object"
+   * "TypeError: Cannot use 'in' operator to search for 'colorSchemes' in true"
+   *
+   * We add these properties to the createTheme return value schema
+   * to ensure mocks include the necessary properties.
+   */
+  private processCreateTheme(
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find the external function call for createTheme
+    const createThemeCall =
+      scopeDataStructure.getExternalFunctionCallInfo('createTheme');
+
+    if (!createThemeCall) {
+      return;
+    }
+
+    // Use the actual call signature to construct the path
+    // createTheme can be called with various arguments:
+    // - createTheme()
+    // - createTheme(options)
+    // - createTheme(getTheme(false), { components: {} })
+    const callSignature = createThemeCall.callSignature;
+    const basePath = `${callSignature}.functionCallReturnValue`;
+
+    // Add required MUI theme properties
+    const themeProperties: Record<string, string> = {
+      [`${basePath}.$$material`]: 'boolean',
+      [`${basePath}.colorSchemes`]: 'object',
+    };
+
+    for (const [path, type] of Object.entries(themeProperties)) {
+      if (!createThemeCall.schema[path]) {
+        createThemeCall.schema[path] = type;
+      }
+    }
+  }
+
+  /**
+   * Handle useGridSelector(apiRef, selector) calls by adding return value schema.
+   *
+   * useGridSelector is a MUI X Data Grid hook that extracts data from the grid's
+   * internal state using a selector function. It's unique because:
+   * 1. It takes arguments (apiRef and selector), so it's not automatically mocked
+   * 2. But its return value depends on which selector is used
+   * 3. The selector reads from apiRef.current.state
+   *
+   * Common selectors and their return types:
+   * - gridFilterModelSelector -> { items: GridFilterItem[] }
+   * - gridSortModelSelector -> GridSortItem[]
+   * - gridPaginationModelSelector -> { page: number, pageSize: number }
+   * - gridRowCountSelector -> number
+   *
+   * We detect which selector is used from the call signature and add the
+   * appropriate return value schema.
+   */
+  private processGridSelector(
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find external function calls for useGridSelector
+    const gridSelectorCall =
+      scopeDataStructure.getExternalFunctionCallInfo('useGridSelector');
+
+    if (!gridSelectorCall) {
+      return;
+    }
+
+    const callSignature = gridSelectorCall.callSignature;
+    const basePath = `${callSignature}.functionCallReturnValue`;
+
+    // Determine which selector is being used and add appropriate schema
+    if (callSignature.includes('gridFilterModelSelector')) {
+      // gridFilterModelSelector returns { items: GridFilterItem[] }
+      const filterPaths: Record<string, string> = {
+        [basePath]: 'object',
+        [`${basePath}.items`]: 'array',
+        [`${basePath}.items[]`]: 'object',
+        [`${basePath}.items[].field`]: 'string',
+        [`${basePath}.items[].operator`]: 'string',
+        [`${basePath}.items[].value`]: 'array',
+        [`${basePath}.items[].value[]`]: 'string',
+      };
+
+      for (const [path, type] of Object.entries(filterPaths)) {
+        if (!gridSelectorCall.schema[path]) {
+          gridSelectorCall.schema[path] = type;
+        }
+      }
+    } else if (callSignature.includes('gridSortModelSelector')) {
+      // gridSortModelSelector returns GridSortItem[]
+      const sortPaths: Record<string, string> = {
+        [basePath]: 'array',
+        [`${basePath}[]`]: 'object',
+        [`${basePath}[].field`]: 'string',
+        [`${basePath}[].sort`]: 'string',
+      };
+
+      for (const [path, type] of Object.entries(sortPaths)) {
+        if (!gridSelectorCall.schema[path]) {
+          gridSelectorCall.schema[path] = type;
+        }
+      }
+    } else if (callSignature.includes('gridPaginationModelSelector')) {
+      // gridPaginationModelSelector returns { page: number, pageSize: number }
+      const paginationPaths: Record<string, string> = {
+        [basePath]: 'object',
+        [`${basePath}.page`]: 'number',
+        [`${basePath}.pageSize`]: 'number',
+      };
+
+      for (const [path, type] of Object.entries(paginationPaths)) {
+        if (!gridSelectorCall.schema[path]) {
+          gridSelectorCall.schema[path] = type;
+        }
+      }
+    } else if (callSignature.includes('gridRowCountSelector')) {
+      // gridRowCountSelector returns number
+      if (!gridSelectorCall.schema[basePath]) {
+        gridSelectorCall.schema[basePath] = 'number';
+      }
+    } else {
+      // Unknown selector - add generic object return type
+      // This ensures the hook is at least mocked with some structure
+      if (!gridSelectorCall.schema[basePath]) {
+        gridSelectorCall.schema[basePath] = 'object';
+      }
+    }
   }
 
   private processDataGridCallbacks(
@@ -49,50 +246,107 @@ export class MuiManager implements EquivalencyManager {
     for (const [path, equivalencies] of Object.entries(
       scopeNode.equivalencies,
     )) {
-      // Look for DataGrid().signature[0].columns equivalency (DataGrid, DataGridPro, DataGridPremium)
+      // Case 1: Look for DataGrid().signature[0].columns equivalency pointing to a columns variable
       const dataGridMatch = path.match(
         /^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns$/,
       );
-      if (!dataGridMatch) continue;
-
-      const dataGridCall = dataGridMatch[1];
+      if (dataGridMatch) {
+        const dataGridCall = dataGridMatch[1];
 
-      // Find what columns is equivalent to (e.g., "columns" variable)
-      for (const equiv of equivalencies) {
-        const columnsVar = equiv.schemaPath;
+        // Find what columns is equivalent to (e.g., "columns" variable)
+        for (const equiv of equivalencies) {
+          const columnsVar = equiv.schemaPath;
 
-        // Find renderCell callbacks, following equivalency chains if needed
-        const callbackScopes = this.findRenderCellCallbacks(
-          columnsVar,
-          scopeNode,
-          new Set(),
-          scopeDataStructure,
-        );
+          // Find renderCell callbacks, following equivalency chains if needed
+          const callbackScopes = this.findRenderCellCallbacks(
+            columnsVar,
+            scopeNode,
+            new Set(),
+            scopeDataStructure,
+          );
 
-        for (const callbackScopeName of callbackScopes) {
-          // Get the callback scope node
-          const callbackScopeNode =
-            scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
-          if (!callbackScopeNode) {
-            continue;
+          for (const callbackScopeName of callbackScopes) {
+            this.addRowEquivalencyToCallback(
+              callbackScopeName,
+              dataGridCall,
+              scopeNode,
+              scopeDataStructure,
+            );
           }
+        }
+        continue;
+      }
 
-          // Add equivalency: signature[0].row ≡ DataGrid().signature[0].rows[]
-          const callbackParamRowPath = 'signature[0].row';
-          const rowsArrayElementPath = `${dataGridCall}.signature[0].rows[]`;
+      // Case 2: Look for inline array props where DataGrid().signature[0].columns[N].renderCell
+      // directly points to a callback scope (e.g., DataGrid().signature[0].columns[0].renderCell → cyScope1())
+      // Also handles columns[].renderCell for normalized paths
+      const inlineRenderCellMatch = path.match(
+        /^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns\[(?:\d+|)\]\.renderCell$/,
+      );
 
-          scopeDataStructure.addEquivalency(
-            callbackParamRowPath,
-            rowsArrayElementPath,
-            scopeNode.name,
-            callbackScopeNode as ScopeNode,
-            'MUI DataGrid renderCell params.row equivalency',
+      if (inlineRenderCellMatch) {
+        const dataGridCall = inlineRenderCellMatch[1];
+
+        for (const equiv of equivalencies) {
+          // Check if the equivalency points to a callback scope (cyScope*)
+          // Could be cyScope1() or cyScope1().functionCallReturnValue
+          const callbackMatch = equiv.schemaPath.match(
+            /^(cyScope[0-9A-Fa-f]+)\(\)(?:\.functionCallReturnValue)?$/,
           );
+          if (callbackMatch) {
+            // Try both naming conventions:
+            // 1. Just the cyScope name (e.g., "cyScope1")
+            // 2. Parent____cyScope name (e.g., "CustomersPage____cyScope1")
+            const callbackScopeName = callbackMatch[1];
+            const prefixedCallbackScopeName = `${scopeNode.name}____${callbackMatch[1]}`;
+            // Try unprefixed name first, then prefixed
+            this.addRowEquivalencyToCallback(
+              callbackScopeName,
+              dataGridCall,
+              scopeNode,
+              scopeDataStructure,
+            );
+            // Also try prefixed version in case it exists
+            this.addRowEquivalencyToCallback(
+              prefixedCallbackScopeName,
+              dataGridCall,
+              scopeNode,
+              scopeDataStructure,
+            );
+          }
         }
       }
     }
   }
 
+  /**
+   * Helper to add the signature[0].row → DataGrid().signature[0].rows[] equivalency
+   */
+  private addRowEquivalencyToCallback(
+    callbackScopeName: string,
+    dataGridCall: string,
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    const callbackScopeNode =
+      scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+    if (!callbackScopeNode) {
+      return;
+    }
+
+    // Add equivalency: signature[0].row ≡ DataGrid().signature[0].rows[]
+    const callbackParamRowPath = 'signature[0].row';
+    const rowsArrayElementPath = `${dataGridCall}.signature[0].rows[]`;
+
+    scopeDataStructure.addEquivalency(
+      callbackParamRowPath,
+      rowsArrayElementPath,
+      scopeNode.name,
+      callbackScopeNode as ScopeNode,
+      'MUI DataGrid renderCell params.row equivalency',
+    );
+  }
+
   /**
    * Process Autocomplete callbacks to link option parameters to options array.
    *
@@ -605,6 +859,14 @@ export class MuiManager implements EquivalencyManager {
   }
 
   finalize(_scopeNode: ScopeNode, scopeDataStructure: ScopeDataStructure) {
+    // Process external function call schemas ONCE (not per-scope) since they
+    // are global. These were moved from postProcess() because external function
+    // calls are only available AFTER postProcess() runs (in trackFunctionCalls).
+    // See Issue 23.
+    this.processGridApiContext(_scopeNode, scopeDataStructure);
+    this.processCreateTheme(_scopeNode, scopeDataStructure);
+    this.processGridSelector(_scopeNode, scopeDataStructure);
+
     // Iterate through all scopes (finalize is only called on root)
     for (const [scopeName, scopeNode] of Object.entries(
       scopeDataStructure.scopeNodes,
@@ -702,12 +964,11 @@ export class MuiManager implements EquivalencyManager {
     }
   }
 
-  internalFunctions: Set<string> = new Set([
-    'DataGrid',
-    'DataGridPro',
-    'DataGridPremium',
-    'Autocomplete',
-  ]);
+  // NOTE: We intentionally do NOT include DataGrid/Autocomplete in internalFunctions.
+  // While they're MUI components (not external data sources), we need them to remain
+  // in externalFunctionCalls so that data flow tracing works correctly.
+  // For example: DataGrid().signature[0].rows → data.items[] tracing
+  internalFunctions: Set<string> = new Set([]);
 
   toString() {
     return 'MuiManager';

package/analyzer-template/packages/ai/src/lib/dataStructure/equivalencyManagers/frameworks/ReactFrameworkManager.ts

@@ -239,10 +239,18 @@ export class ReactFrameworkManager implements EquivalencyManager {
             });
           }
 
+          // Get the initial value path (what signature[0] is equivalent to)
+          const initialValuePath = equivalentValues[0].schemaPath;
+          const initialValueScopeName = equivalentValues[0].scopeNodeName;
+
+          // Note: Callback scope tracing (for useState(() => { return prop; }))
+          // is handled in getEquivalentSignatureVariables() where the full
+          // equivalency database is available for deep tracing.
+
           scopeDataStructure.addEquivalency(
             relevantUseStateInfo.value,
-            equivalentValues[0].schemaPath,
-            scopeNode.name,
+            initialValuePath,
+            initialValueScopeName,
             scopeNode,
             'useState value equivalency',
           );
@@ -408,90 +416,126 @@ export class ReactFrameworkManager implements EquivalencyManager {
     let propagated = false;
     const functionCallSignature = getFunctionCallSignature(subPathParts);
 
-    const relevantUseStateInfo = this.findUseStateInfo(functionCallSignature);
+    let relevantUseStateInfo = this.findUseStateInfo(functionCallSignature);
+
+    // If we didn't find a useState call directly, check if the function being called
+    // is a setter variable (e.g., setWorkouts from useState)
+    if (!relevantUseStateInfo && functionCallSignature) {
+      // Extract the function name from the call (e.g., "setWorkouts" from "setWorkouts(data || [])")
+      const fnName = functionCallSignature.split('(')[0];
+      relevantUseStateInfo = this.useStateInfos.find(
+        (info) => info.setter === fnName,
+      );
+    }
 
     if (relevantUseStateInfo) {
       const pathParts = scopeDataStructure.splitPath(path);
-      if (pathParts.length < 3) return false;
 
-      const basePath = scopeDataStructure.joinPathParts([
-        ...pathParts.slice(0, 2),
-        pathParts[2],
-      ]);
+      // Check if this is a direct setter variable call (e.g., setWorkouts(data).signature[0])
+      // rather than a useState path (e.g., useState<X>().functionCallReturnValue[1].signature[0])
+      const fnName = functionCallSignature?.split('(')[0];
+      const isDirectSetterCall = fnName === relevantUseStateInfo.setter;
+
+      if (isDirectSetterCall && pathParts.length === 2) {
+        // Handle direct setter calls like setWorkouts(data || []).signature[0] = data
+        const lastPart = pathParts[1];
+        if (lastPart === 'signature[0]') {
+          // Get the value being passed to the setter from the equivalency
+          const originScopeInfoName =
+            equivalencyValueChain[0]?.currentPath?.scopeNodeName;
+          if (!originScopeInfoName) return propagated;
+
+          const originScope =
+            scopeDataStructure.getScopeOrFunctionCallInfo(originScopeInfoName);
+          const setterCallEquiv = originScope?.equivalencies?.[path];
+          if (!setterCallEquiv || setterCallEquiv.length === 0)
+            return propagated;
+
+          const argumentPath = setterCallEquiv[0].schemaPath;
+          const argumentScopeName = setterCallEquiv[0].scopeNodeName;
+
+          // Create equivalency: useState<X>().functionCallReturnValue[0] = argumentPath
+          propagated = true;
+          const valuePath = `${relevantUseStateInfo.useStateCall}.functionCallReturnValue[0]`;
+          const useStateScopeInfo =
+            scopeDataStructure.getScopeOrFunctionCallInfo(
+              relevantUseStateInfo.scopeNodeName,
+            ) as ScopeNode;
 
-      const expectedSetterBasePath = scopeDataStructure.joinPathParts([
-        functionCallSignature,
-        'functionCallReturnValue[1]',
-      ]);
+          scopeDataStructure.addEquivalency(
+            valuePath,
+            argumentPath,
+            argumentScopeName,
+            useStateScopeInfo,
+            'useState setter call equivalency (direct)',
+            equivalencyValueChain,
+            traceId,
+          );
+        }
+      } else if (pathParts.length >= 3) {
+        // Original logic for useState path patterns
+        const basePath = scopeDataStructure.joinPathParts([
+          ...pathParts.slice(0, 2),
+          pathParts[2],
+        ]);
 
-      // if (traceId) {
-      //   console.info(
-      //     'Debug Propagation: useState base path',
-      //     JSON.stringify(
-      //       {
-      //         traceId,
-      //         basePath,
-      //         expectedValueBasePath,
-      //         expectedSetterBasePath,
-      //       },
-      //       null,
-      //       2,
-      //     ),
-      //   );
-      // }
-
-      if (basePath === expectedSetterBasePath) {
-        const originScopeInfoName =
-          equivalencyValueChain[0].currentPath?.scopeNodeName;
-        const setterScope =
-          scopeDataStructure.getScopeOrFunctionCallInfo(originScopeInfoName);
-        const setterEquivalencyPath = Object.keys(
-          setterScope.equivalencies,
-        ).find((p) => {
-          if (!p.startsWith(relevantUseStateInfo.setter)) return false;
-          const pParts = scopeDataStructure.splitPath(p);
-
-          const valid = pathParts
-            .slice(3)
-            .reverse()
-            .every((part, index) => [...pParts].reverse()[index] === part);
-
-          // if (p.includes('.title') && valid)
-          //   console.info({ p, pParts, pathParts: pathParts.slice(3) });
-
-          return valid;
-        });
-
-        if (!setterEquivalencyPath) return;
-
-        const setterEquivalencyPathParts = scopeDataStructure.splitPath(
-          setterEquivalencyPath,
-        );
-        const setterEquivalentVariable =
-          setterScope.equivalencies[setterEquivalencyPath][0].schemaPath;
+        const expectedSetterBasePath = scopeDataStructure.joinPathParts([
+          functionCallSignature,
+          'functionCallReturnValue[1]',
+        ]);
 
-        if (setterEquivalentVariable === expectedSetterBasePath) return;
+        if (basePath === expectedSetterBasePath) {
+          const originScopeInfoName =
+            equivalencyValueChain[0].currentPath?.scopeNodeName;
+          const setterScope =
+            scopeDataStructure.getScopeOrFunctionCallInfo(originScopeInfoName);
+          const setterEquivalencyPath = Object.keys(
+            setterScope.equivalencies,
+          ).find((p) => {
+            if (!p.startsWith(relevantUseStateInfo.setter)) return false;
+            const pParts = scopeDataStructure.splitPath(p);
+
+            const valid = pathParts
+              .slice(3)
+              .reverse()
+              .every((part, index) => [...pParts].reverse()[index] === part);
+
+            return valid;
+          });
+
+          if (!setterEquivalencyPath) return propagated;
+
+          const setterEquivalencyPathParts = scopeDataStructure.splitPath(
+            setterEquivalencyPath,
+          );
+          const setterEquivalentVariable =
+            setterScope.equivalencies[setterEquivalencyPath][0].schemaPath;
 
-        propagated = true;
-        const valuePath = `${functionCallSignature}.functionCallReturnValue[0]`;
-        const useStateScopeInfo = scopeDataStructure.getScopeOrFunctionCallInfo(
-          relevantUseStateInfo.scopeNodeName,
-        ) as ScopeNode;
+          if (setterEquivalentVariable === expectedSetterBasePath)
+            return propagated;
 
-        const fullValuePath = scopeDataStructure.joinPathParts([
-          valuePath,
-          ...setterEquivalencyPathParts.slice(2),
-        ]);
+          propagated = true;
+          const valuePath = `${functionCallSignature}.functionCallReturnValue[0]`;
+          const useStateScopeInfo =
+            scopeDataStructure.getScopeOrFunctionCallInfo(
+              relevantUseStateInfo.scopeNodeName,
+            ) as ScopeNode;
+
+          const fullValuePath = scopeDataStructure.joinPathParts([
+            valuePath,
+            ...setterEquivalencyPathParts.slice(2),
+          ]);
 
-        scopeDataStructure.addEquivalency(
-          fullValuePath,
-          setterEquivalentVariable,
-          originScopeInfoName,
-          useStateScopeInfo,
-          'useState setter call equivalency',
-          equivalencyValueChain,
-          traceId,
-        );
+          scopeDataStructure.addEquivalency(
+            fullValuePath,
+            setterEquivalentVariable,
+            originScopeInfoName,
+            useStateScopeInfo,
+            'useState setter call equivalency',
+            equivalencyValueChain,
+            traceId,
+          );
+        }
       }
     }