@codeyam/codeyam-cli 0.1.0-staging.bbe4da9 → 0.1.0-staging.e38f7bd

package/analyzer-template/project/writeSimpleRoot.ts

@@ -221,6 +221,7 @@ export default async function writeSimpleRoot(
 
           // Find node module dependencies used by root.tsx that need mocking
           // These are typically Remix hooks like useLoaderData, useActionData, etc.
+          // IMPORTANT: Only mock dependencies that have isMocked: true in the entity's nodeModuleImports
           const nodeModulesToMock = [
             '@remix-run/react',
             '@remix-run/node',
@@ -228,11 +229,25 @@ export default async function writeSimpleRoot(
             'react-router-dom',
           ];
 
+          // Get nodeModuleImports from the entity to check isMocked flags
+          const entityNodeModuleImports =
+            options.entity?.metadata?.nodeModuleImports || {};
+
           for (const modulePath of nodeModulesToMock) {
             const moduleSchemas = dependencySchemas[modulePath];
             if (!moduleSchemas) continue;
 
+            // Get the imports for this module that have isMocked: true
+            const mockedImports = (entityNodeModuleImports[modulePath] || [])
+              .filter((imp: { isMocked?: boolean }) => imp.isMocked === true)
+              .map((imp: { name: string }) => imp.name);
+
             for (const entityName in moduleSchemas) {
+              // Only mock if this entity is marked as isMocked: true in nodeModuleImports
+              if (!mockedImports.includes(entityName)) {
+                continue;
+              }
+
               // Check if this entity is actually used in root.tsx
               const importRegex = new RegExp(
                 `import\\s+(?:{[^}]*\\b${entityName}\\b[^}]*}|\\b${entityName}\\b)\\s+from\\s+['"]${modulePath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}['"]`,
@@ -240,8 +255,82 @@ export default async function writeSimpleRoot(
 
               if (!newContent.match(importRegex)) continue;
 
-              // Generate mock code for this dependency
-              const mockCode = constructMockCode(entityName, dependencySchemas);
+              // Find the correct variable-qualified mock key for ROOT's usage
+              // The mock data is stored under keys like "variableName <- functionName"
+              // For root.tsx, we need to find the key that corresponds to ROOT's usage,
+              // NOT the route's (Settings') usage.
+              const dataForMocks =
+                options.routeAnalysis?.metadata?.scenariosDataStructure
+                  ?.dataForMocks;
+
+              // Find all keys that end with this entity name
+              const matchingKeys = dataForMocks
+                ? Object.keys(dataForMocks).filter((key) =>
+                    key.endsWith(` <- ${entityName}`),
+                  )
+                : [];
+
+              // If there are multiple keys (e.g., one for root.tsx and one for Settings),
+              // we need to find the one for ROOT, not the route being simulated.
+              // Strategy: Find which property names are used in root.tsx for this hook,
+              // then match to a key that uses one of those property names.
+              let mockKey: string | undefined;
+
+              if (matchingKeys.length > 1) {
+                // Parse root.tsx to find how this hook is used
+                // Look for patterns like: const { prop1, prop2 } = useLoaderData()
+                // or: const result = useLoaderData()
+                const hookUsageRegex = new RegExp(
+                  `(?:const|let|var)\\s+(?:\\{([^}]+)\\}|([a-zA-Z_][a-zA-Z0-9_]*))\\s*=\\s*${entityName}(?:<[^>]*>)?\\s*\\(`,
+                  'g',
+                );
+
+                const matches = [...newContent.matchAll(hookUsageRegex)];
+                const rootPropertyNames: string[] = [];
+
+                for (const match of matches) {
+                  if (match[1]) {
+                    // Destructured: { prop1, prop2, prop3: alias }
+                    const props = match[1]
+                      .split(',')
+                      .map((p) => p.trim().split(':')[0].trim())
+                      .filter(Boolean);
+                    rootPropertyNames.push(...props);
+                  } else if (match[2]) {
+                    // Simple assignment: const result = ...
+                    rootPropertyNames.push(match[2]);
+                  }
+                }
+
+                // Find a key that uses one of root's property names
+                mockKey = matchingKeys.find((key) => {
+                  const varName = key.split(' <- ')[0];
+                  return rootPropertyNames.includes(varName);
+                });
+
+                // Fallback: if no match found but there are multiple keys,
+                // exclude the route's key (which we can identify from mockedImports variable names)
+                if (!mockKey) {
+                  // The route's variable names would be in its own analysis
+                  // For simplicity, just use the first key that's different from the most common pattern
+                  mockKey = matchingKeys[0];
+                }
+              } else if (matchingKeys.length === 1) {
+                mockKey = matchingKeys[0];
+              }
+
+              // Generate simple mock code that uses the ORIGINAL function name
+              // (not a variable-qualified name like useLoaderData_loadError)
+              // This is important because root.tsx's code calls useLoaderData(),
+              // so our mock must also be named useLoaderData.
+              let mockCode: string | undefined;
+              if (mockKey) {
+                // Generate simple mock code with the original function name
+                mockCode = `const ${entityName}ReturnValue = scenarios().data()?.["${mockKey}"];\n\nfunction ${entityName}() {\n  return ${entityName}ReturnValue;\n}`;
+              } else {
+                // Fallback to constructMockCode for simple cases
+                mockCode = constructMockCode(entityName, dependencySchemas);
+              }
 
               if (mockCode) {
                 console.log(

package/background/src/lib/virtualized/common/execAsync.js

@@ -1,4 +1,4 @@
-import { loadBackgroundJob, updateBackgroundJobProgress, } from "../../../../../packages/supabase/index.js";
+import { loadBackgroundJob, updateBackgroundJobProgress, } from "../../../../../packages/database/index.js";
 import * as fs from 'fs';
 import { spawn } from 'child_process';
 import { loadEnv } from "../../../../../packages/utils/server.js";

package/background/src/lib/virtualized/project/LazyFileStore.js

@@ -1,4 +1,4 @@
-import { loadFiles, loadEntities, saveFiles, generateSha, } from "../../../../../packages/supabase/index.js";
+import { loadFiles, loadEntities, saveFiles, generateSha, } from "../../../../../packages/database/index.js";
 /**
  * LazyFileStore provides O(1) file lookups with on-demand content/entity loading.
  *

package/background/src/lib/virtualized/project/analyzeBaselineCommit.js

@@ -1,5 +1,5 @@
 import analyzeBranchCommit from "./analyzeBranchCommit.js";
-import { loadAnalysisBranches, upsertAnalysisBranches, updateCommitMetadata, updateProjectMetadata, } from "../../../../../packages/supabase/index.js";
+import { loadAnalysisBranches, upsertAnalysisBranches, updateCommitMetadata, updateProjectMetadata, } from "../../../../../packages/database/index.js";
 import { awsLog } from "../../../../../packages/utils/index.js";
 export default async function analyzeBaselineCommit({ project, projectAnalyzer, branchCommit, analysisIds, scenarioIds, context, steps, desiredAnalyses = [], force = false, fileStore, }) {
     awsLog('CodeYam: Analyze - branchCommit (baseline) path', {

package/background/src/lib/virtualized/project/analyzeBranchCommit.js

@@ -1,6 +1,6 @@
 import createEntitiesAndSortFiles from "./createEntitiesAndSortFiles.js";
 import { analyzeEntities, } from "../../../../../packages/analyze/index.js";
-import { loadAnalyses, loadFile, updateCommitMetadata, updateProjectMetadata, } from "../../../../../packages/supabase/index.js";
+import { loadAnalyses, loadFile, updateCommitMetadata, updateProjectMetadata, } from "../../../../../packages/database/index.js";
 import checkApprovedPath from "./checkApprovedPath.js";
 export default async function analyzeBranchCommit({ project, projectAnalyzer, branchCommit, analysisIds, context, steps, fileStore, }) {
     console.log('CodeYam: Starting Branch Commit Analysis', branchCommit.sha, {

package/background/src/lib/virtualized/project/analyzeFileEntities.js

@@ -1,6 +1,6 @@
 import { analyzeEntities, findOrCreateEntity, gatherEntityMap, setImportedExports, } from "../../../../../packages/analyze/index.js";
 import checkApprovedPath from "./checkApprovedPath.js";
-import { loadEntity, updateCommitMetadata, upsertCommits, } from "../../../../../packages/supabase/index.js";
+import { loadEntity, updateCommitMetadata, upsertCommits, } from "../../../../../packages/database/index.js";
 import { analyzeFileMocks } from "./mocks/analyzeFileMock.js";
 export default async function analyzeFileEntities({ project, projectAnalyzer, commit, branchId, entityShas, scenarioIds, analyzeMockName, steps, context, fileStore, }) {
     var _a;

package/background/src/lib/virtualized/project/analyzeRegularCommit.js

@@ -1,6 +1,6 @@
 import analyzeFileEntities from "./analyzeFileEntities.js";
 import analyzeAndGatherIndirectEntities from "./analyzeAndGatherIndirectEntities.js";
-import { loadAnalyses, loadAnalysisBranches, updateBackgroundJobProgress, updateCommitMetadata, upsertAnalysesWithScenarios, upsertAnalysisBranches, } from "../../../../../packages/supabase/index.js";
+import { loadAnalyses, loadAnalysisBranches, updateBackgroundJobProgress, updateCommitMetadata, upsertAnalysesWithScenarios, upsertAnalysisBranches, } from "../../../../../packages/database/index.js";
 import { awsLog, awsLogDebugLevel } from "../../../../../packages/utils/index.js";
 async function entitiesReadyToBeCaptured(entities, entityShas, context, analysisIds) {
     const readyToBeCaptured = [];

package/background/src/lib/virtualized/project/captureLibraryFunctionDirect.js

@@ -1,5 +1,5 @@
 import { awsLog } from "../../../../../packages/utils/index.js";
-import { updateFreshAnalysisStatus, updateFreshAnalysisStatusWithScenarios, loadAnalysis, } from "../../../../../packages/supabase/index.js";
+import { updateFreshAnalysisStatus, updateFreshAnalysisStatusWithScenarios, loadAnalysis, } from "../../../../../packages/database/index.js";
 import executeLibraryFunctionDirect from "./executeLibraryFunctionDirect.js";
 /**
  * Capture a library function by executing it directly (no browser, no screenshots).

package/background/src/lib/virtualized/project/constructMockCode.js

@@ -1,4 +1,26 @@
 import { joinParenthesesAndArrays, splitOutsideParenthesesAndArrays, functionArguments, cleanOutBoundary, fillInDirectSchemaGapsAndUnknowns, removeDuplicateFunctionCalls, } from "../../../../../packages/ai/index.js";
+/**
+ * Extract property names that are jsx-components and should be preserved from original.
+ * These are paths like "MockName.Provider()" where the value or functionCallReturnValue is 'jsx-component'.
+ */
+function getJsxComponentProperties(mockName, schema) {
+    const jsxProperties = [];
+    for (const [path, value] of Object.entries(schema ?? {})) {
+        // Look for paths like "MockName.PropertyName()" that are jsx-components
+        // Skip paths that have deeper nesting (e.g., "MockName.Foo.Bar()")
+        const match = path.match(new RegExp(`^${mockName}\\.([^.()]+)\\(\\)$`));
+        if (!match)
+            continue;
+        const propertyName = match[1];
+        // Check if this is a jsx-component (either directly or via functionCallReturnValue)
+        const isJsxComponent = value === 'jsx-component' ||
+            schema[path + '.functionCallReturnValue'] === 'jsx-component';
+        if (isJsxComponent && !jsxProperties.includes(propertyName)) {
+            jsxProperties.push(propertyName);
+        }
+    }
+    return jsxProperties;
+}
 /**
  * Check if a string is a literal (quoted string or number).
  * Returns the unquoted value if it's a literal, null otherwise.
@@ -110,14 +132,52 @@ function isValidKey(key) {
     return !/\s/.test(keyWithOutArguments);
 }
 export default function constructMockCode(mockName, dependencySchemas, entityType) {
-    const mockNameParts = splitOutsideParenthesesAndArrays(mockName);
+    // Check for variable-qualified mock name (e.g., "entityDiffFetcher <- useFetcher")
+    // Format: "variableName <- functionName" which reads naturally as "variableName receives from functionName"
+    const variableQualifierMatch = mockName.match(/^([a-zA-Z_][a-zA-Z0-9_]*)\s*<-\s*/);
+    let variableQualifier = variableQualifierMatch
+        ? variableQualifierMatch[1]
+        : null;
+    const baseMockName = variableQualifier
+        ? mockName.slice(variableQualifierMatch[0].length)
+        : mockName;
+    const mockNameParts = splitOutsideParenthesesAndArrays(baseMockName);
     let relevantReturnValueSchema;
     let dataStructurePath;
     let dataStructureValue;
+    let foundEntityWithSignature = false;
+    let signatureSchema;
     for (const filePath in dependencySchemas) {
         for (const entityName in dependencySchemas[filePath]) {
-            if (entityName !== mockNameParts[0])
+            // For variable-qualified mocks, look for the full qualified name first
+            // Format: "variableName <- functionName" (e.g., "entityDiffFetcher <- useFetcher")
+            const targetEntityName = variableQualifier
+                ? `${variableQualifier} <- ${baseMockName}`
+                : mockNameParts[0];
+            // Check for direct match
+            let matches = entityName === targetEntityName || entityName === mockNameParts[0];
+            // If no direct match and no qualifier was provided, check if the entity
+            // is stored under a variable-qualified key (e.g., "stateBadge <- getStateBadge")
+            // This handles the case where gatherDataForMocks stored the entity with a variable
+            // qualifier but writeScenarioComponents called constructMockCode without one.
+            if (!matches && !variableQualifier) {
+                const qualifiedKeyMatch = entityName.match(new RegExp(`^([a-zA-Z_][a-zA-Z0-9_]*)\\s*<-\\s*${mockNameParts[0]}$`));
+                if (qualifiedKeyMatch) {
+                    matches = true;
+                    // Extract the variable qualifier from the entity name so we can use
+                    // it for the data lookup key later
+                    variableQualifier = qualifiedKeyMatch[1];
+                }
+            }
+            if (!matches)
                 continue;
+            // Track if we found the entity and it has a signature (is a function)
+            const entitySchema = dependencySchemas[filePath][entityName];
+            if (entitySchema?.signatureSchema &&
+                Object.keys(entitySchema.signatureSchema).length > 0) {
+                foundEntityWithSignature = true;
+                signatureSchema = entitySchema.signatureSchema;
+            }
             dataStructurePath = Object.keys(dependencySchemas[filePath][entityName]?.returnValueSchema ?? {}).find((path) => {
                 if (path === 'returnValue')
                     return true;
@@ -140,8 +200,52 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
             }
         }
     }
-    if (!relevantReturnValueSchema || !dataStructurePath)
+    // Check if the return value schema only contains function type markers
+    // (e.g., "validateInputs()": "function") without actual return data
+    // (no functionCallReturnValue entries)
+    const hasMeaningfulReturnData = (schema) => {
+        if (!schema)
+            return false;
+        const keys = Object.keys(schema);
+        // Check if there are any functionCallReturnValue entries
+        // which indicate actual mock data, not just type markers
+        return keys.some((key) => key.includes('functionCallReturnValue') || key === 'returnValue');
+    };
+    // If we found the entity with a signature but no return value schema,
+    // OR the schema only has function type markers without actual return data,
+    // generate an empty mock function. This handles validation functions like
+    // validateInputs that are marked for mocking but have no meaningful return value.
+    // EXCEPTION: If entityType is 'class', we still need to generate the class.
+    // EXCEPTION: If no signature was found, let the normal code path handle it.
+    if (!relevantReturnValueSchema || !dataStructurePath) {
+        if (foundEntityWithSignature && signatureSchema) {
+            // Count the number of arguments from signature schema
+            const argCount = Object.keys(signatureSchema).filter((key) => key.startsWith('signature[')).length;
+            const args = Array.from({ length: argCount }, (_, i) => `arg${i + 1}`);
+            const argsString = args.join(', ');
+            // Generate empty mock function
+            return `function ${mockName}(${argsString}) {
+  // Empty mock - original function mocked out
+}`;
+        }
         return;
+    }
+    // Check if the schema only has function type markers without actual return data.
+    // Only apply this when we have a signature (i.e., it's explicitly a function)
+    // and it's not a class. This handles validation functions that should be
+    // empty mocks rather than returning meaningless "function" strings.
+    if (foundEntityWithSignature &&
+        signatureSchema &&
+        entityType !== 'class' &&
+        !hasMeaningfulReturnData(relevantReturnValueSchema)) {
+        const argCount = Object.keys(signatureSchema).filter((key) => key.startsWith('signature[')).length;
+        const args = Array.from({ length: argCount }, (_, i) => `arg${i + 1}`);
+        const argsString = args.join(', ');
+        // Generate empty mock function
+        return `function ${mockName}(${argsString}) {
+  // Empty mock - original function mocked out
+}`;
+    }
     const dataStructureName = dataStructurePath === 'returnValue'
         ? mockName
         : joinParenthesesAndArrays(splitOutsideParenthesesAndArrays(dataStructurePath).slice(0, mockNameParts.length));
@@ -166,13 +270,21 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
         if (root) {
             basePaths[0] = 'scenarios().data()';
         }
-        const optionalAccess = (name, stripArguments = false) => {
+        const optionalAccess = (name, stripArguments = false, isRootAccess = false) => {
             if (stripArguments && name.includes('(')) {
                 name = name.split('(')[0] + '()';
             }
             // Strip type parameters like <typeof loader> from function names
             // so "useLoaderData<typeof loader>()" becomes "useLoaderData()"
             name = cleanOutTypes(name);
+            // For variable-qualified mocks at root level, use the "variableName <- functionName" format
+            // This matches the format generated by gatherDataForMocks and is more intuitive for LLMs
+            // e.g., "useFetcher()" becomes "entityDiffFetcher <- useFetcher"
+            if (isRootAccess && variableQualifier) {
+                // Remove trailing () from the function name to match gatherDataForMocks key format
+                const baseName = name.replace(/\(\)$/, '');
+                name = `${variableQualifier} <- ${baseName}`;
+            }
             if (name.match(/\[\d+\]/)) {
                 return `?.${name}`;
             }
@@ -205,7 +317,8 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
             return basePaths
                 .flatMap((basePath) => {
                 if (!returnValue.args) {
-                    let dataPath = `${basePath}${optionalAccess(safeString(returnValue.name))}`;
+                    // Pass root as both stripArguments and isRootAccess for non-function paths
+                    let dataPath = `${basePath}${optionalAccess(safeString(returnValue.name), false, root)}`;
                     dataPath = addReturnValueFunctionAccessor(dataPath);
                     return dataPath;
                 }
@@ -213,7 +326,8 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
                     const signature = returnValue.name.match(/\[\d*\]$/)
                         ? returnValue.name
                         : `${returnValue.name}(${argSet.join(', ')})`;
-                    let dataPath = `${basePath}${optionalAccess(safeString(signature), root)}`;
+                    // Pass root as both stripArguments and isRootAccess
+                    let dataPath = `${basePath}${optionalAccess(safeString(signature), root, root)}`;
                     dataPath = addReturnValueFunctionAccessor(dataPath);
                     return dataPath;
                 });
@@ -538,10 +652,22 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
         // Exclude paths with functionCallReturnValue - those are handled by existing logic
         // Also check if there's a functionCallReturnValue path that extends this path
         const hasSignaturePath = parts.some((p) => p.startsWith('signature['));
+        // Skip signature paths entirely - they describe INPUT structure (function arguments),
+        // not OUTPUT (return values). This applies even if they contain functionCallReturnValue
+        // nested inside (e.g., methods on array elements passed as arguments).
+        if (hasSignaturePath)
+            continue;
         const hasExtendedFunctionCallReturnValue = Object.keys(relevantReturnValueSchema).some((k) => k.startsWith(key + '.') && k.includes(`.${RETURN_VALUE}`));
+        // Skip JSX components - they look like function calls (e.g., Context.Provider())
+        // but they're React components used in JSX, not functions that need mocking
+        // Check both the value type and whether the functionCallReturnValue is jsx-component
+        const isJsxComponent = value === 'jsx-component' ||
+            relevantReturnValueSchema[key + '.functionCallReturnValue'] ===
+                'jsx-component';
+        if (isJsxComponent)
+            continue;
         const isFunctionPath = ['function', 'async-function'].includes(value) &&
             parts[parts.length - 1].endsWith(')') &&
-            !hasSignaturePath &&
             !hasAnyFunctionCallReturnValue &&
             !hasExtendedFunctionCallReturnValue;
         if (!hasFunctionCallReturnValue && !isFunctionPath)
@@ -693,6 +819,11 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
                         if (['function', 'async-function'].includes(nextValue)) {
                             continue; // Continue to process the function property
                         }
+                        // If the next part is an object with nested content, continue processing
+                        // This handles paths like functionCallReturnValue.selectedOptions.elementOptions[]
+                        if (nextValue === 'object' || nextValue === 'array') {
+                            continue;
+                        }
                     }
                     break;
                 }
@@ -700,8 +831,29 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
             else if (isKeyWord) {
                 continue;
             }
+            // Handle parts that end with [] (e.g., "elementOptions[]")
+            // These should be treated as the base part + array accessor
+            const endsWithArrayAccessor = part.endsWith('[]') && part !== '[]';
+            const basePart = endsWithArrayAccessor ? part.slice(0, -2) : part;
             const withoutArgs = (p) => p.name.split('(')[0];
-            let relevantPart = returnValueSection.nested?.find((p) => withoutArgs(p) === withoutArgs({ name: part }));
+            let relevantPart = returnValueSection.nested?.find((p) => withoutArgs(p) === withoutArgs({ name: basePart }));
+            // If part ends with [], update the existing part to be an array
+            if (endsWithArrayAccessor && relevantPart) {
+                relevantPart.isArray = true;
+                relevantPart.isGenericArray = true;
+                // Create structural [0] element for nested content
+                relevantPart.nested || (relevantPart.nested = []);
+                if (!relevantPart.nested.find((p) => p.name === '[0]')) {
+                    relevantPart.nested.push({
+                        name: '[0]',
+                        nested: [],
+                        isStructural: true,
+                    });
+                }
+                // Move to the [0] element for processing subsequent parts
+                returnValueSection = relevantPart.nested.find((p) => p.name === '[0]');
+                continue;
+            }
             if (!relevantPart) {
                 const hasArguments = part.includes('(') && part.endsWith(')');
                 if (part === '[]') {
@@ -722,6 +874,29 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
                     }
                     continue;
                 }
+                // Handle parts that end with [] (e.g., "elementOptions[]") when base part doesn't exist
+                if (endsWithArrayAccessor) {
+                    // Create the base part with array properties
+                    relevantPart = {
+                        name: basePart,
+                        isArray: true,
+                        isGenericArray: true,
+                        nested: [],
+                    };
+                    returnValueSection.nested || (returnValueSection.nested = []);
+                    returnValueSection.nested.push(relevantPart);
+                    // Create structural [0] element for nested content
+                    if (partValue === 'object' && !isLastPart) {
+                        relevantPart.nested.push({
+                            name: '[0]',
+                            nested: [],
+                            isStructural: true,
+                        });
+                        // Move to the [0] element for processing subsequent parts
+                        returnValueSection = relevantPart.nested.find((p) => p.name === '[0]');
+                    }
+                    continue;
+                }
                 if (isLastPart &&
                     ['function', 'async-function'].includes(value) &&
                     !hasArguments) {
@@ -757,13 +932,19 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
                     returnValueSection.nested.push(relevantPart);
                 }
             }
-            else if (funcArgs(part).join(',') !== funcArgs(relevantPart.name).join(',')) {
+            else if (relevantPart.args &&
+                funcArgs(part).join(',') !== funcArgs(relevantPart.name).join(',')) {
                 const existingArgs = relevantPart.args.find((args) => args.join(',') === funcArgs(part).join(','));
                 if (!existingArgs) {
                     relevantPart.args || (relevantPart.args = []);
                     relevantPart.args.push(funcArgs(part));
                 }
             }
+            // If nextPart is [], update existing part to be a generic array
+            if (relevantPart && nextPart === '[]') {
+                relevantPart.isArray = true;
+                relevantPart.isGenericArray = true;
+            }
             if (!hasNestedFunction) {
                 // Before breaking, check if this function returns an array
                 // by looking for a functionCallReturnValue: 'array' entry in the schema
@@ -852,10 +1033,37 @@ export default function constructMockCode(mockName, dependencySchemas, entityTyp
   }
 }`;
         }
-        return `const ${mockName}ReturnValue = ${enhancedContents};\n\n${isRootAsyncFunction ? 'async ' : ''}function ${mockName}() {\n${indent(`return ${mockName}ReturnValue;`)}\n}`;
+        // For variable-qualified mocks, use underscore separator in the function name
+        // e.g., "entityDiffFetcher <- useFetcher" becomes "useFetcher_entityDiffFetcher"
+        const safeFunctionName = variableQualifier
+            ? `${baseMockName}_${variableQualifier}`
+            : mockName;
+        return `const ${safeFunctionName}ReturnValue = ${enhancedContents};\n\n${isRootAsyncFunction ? 'async ' : ''}function ${safeFunctionName}() {\n${indent(`return ${safeFunctionName}ReturnValue;`)}\n}`;
     }
     else {
-        return `const ${mockName} = ${contents}`;
+        // For variable-qualified mocks, use underscore separator in the const name
+        const safeName = variableQualifier
+            ? `${baseMockName}_${variableQualifier}`
+            : mockName;
+        // Get any jsx-component properties that need to be preserved from the original
+        const jsxProperties = getJsxComponentProperties(mockName, relevantReturnValueSchema);
+        // If there are jsx-component properties, add them as references to the original
+        if (jsxProperties.length > 0) {
+            const jsxPreservations = jsxProperties
+                .map((prop) => `${prop}: ${mockName}__cyOriginal.${prop}`)
+                .join(',\n');
+            if (contents.trim().startsWith('{')) {
+                // Contents is already an object - insert jsx preservations before the closing brace
+                const enhancedContents = contents.replace(/\}\s*$/, `,\n${indent(jsxPreservations)}\n}`);
+                return `const ${safeName} = ${enhancedContents}`;
+            }
+            else {
+                // Contents is a simple accessor (e.g., scenarios().data()?.["MockName"])
+                // Wrap it in an object with the jsx preservations
+                return `const ${safeName} = {\n${indent(`...${contents}`)},\n${indent(jsxPreservations)}\n}`;
+            }
+        }
+        return `const ${safeName} = ${contents}`;
     }
 }
 //# sourceMappingURL=constructMockCode.js.map