@codeyam/codeyam-cli 0.1.0-staging.28f73cf → 0.1.0-staging.842873f

package/analyzer-template/project/constructMockCode.ts

@@ -4,8 +4,9 @@ import {
   functionArguments,
   cleanOutBoundary,
   fillInDirectSchemaGapsAndUnknowns,
+  removeDuplicateFunctionCalls,
 } from '~codeyam/ai';
-import { DataStructure, DeepReadonly } from '~codeyam/types';
+import { DataStructure, DeepReadonly, EntityType } from '~codeyam/types';
 
 interface ReturnValuePart {
   name: string;
@@ -23,6 +24,47 @@ interface ReturnValuePart {
   argVariants?: Map<string, ReturnValuePart[]>;
 }
 
+/**
+ * Converts a variable qualifier to a safe identifier for use in function/const names.
+ * Handles indexed format like "data[1]" -> "data_1"
+ */
+function safeVariableQualifier(qualifier: string): string {
+  // Replace brackets with underscores for valid JS identifier
+  // "data[1]" -> "data_1"
+  return qualifier.replace(/\[(\d+)\]/g, '_$1');
+}
+
+/**
+ * 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: string,
+  schema: Record<string, string>,
+): string[] {
+  const jsxProperties: string[] = [];
+
+  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.
@@ -163,16 +205,68 @@ function isValidKey(key: string) {
 export default function constructMockCode(
   mockName: string,
   dependencySchemas: DeepReadonly<DataStructure['dependencySchemas']>,
+  entityType?: 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"
+  // Also handles indexed format: "data[1] <- useFetch" for disambiguating reused variable names
+  const variableQualifierMatch = mockName.match(
+    /^([a-zA-Z_][a-zA-Z0-9_]*(?:\[\d+\])?)\s*<-\s*/,
+  );
+  let variableQualifier = variableQualifierMatch
+    ? variableQualifierMatch[1]
+    : null;
+  const baseMockName = variableQualifier
+    ? mockName.slice(variableQualifierMatch[0].length)
+    : mockName;
+
+  const mockNameParts = splitOutsideParenthesesAndArrays(baseMockName);
 
   let relevantReturnValueSchema: DataStructure['returnValueSchema'] | undefined;
   let dataStructurePath: string | undefined;
   let dataStructureValue: string | undefined;
+  let foundEntityWithSignature = false;
+  let signatureSchema: DataStructure['signatureSchema'] | undefined;
 
   for (const filePath in dependencySchemas) {
     for (const entityName in dependencySchemas[filePath]) {
-      if (entityName !== mockNameParts[0]) continue;
+      // 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 ?? {},
@@ -194,16 +288,75 @@ export default function constructMockCode(
         relevantReturnValueSchema = fillInDirectSchemaGapsAndUnknowns({
           schema: dependencySchemas[filePath][entityName]?.returnValueSchema,
         });
-        // NOTE: Temporarily disabled clearAttributesFromMapping as it deletes
+        // NOTE: clearAttributesFromMapping is disabled because it deletes
         // method calls on arrays (like .eq() after functionCallReturnValue: 'array')
-        // clearAttributesFromMapping(relevantReturnValueSchema)
+        // However, we still need to remove duplicate function calls that create invalid syntax
+        removeDuplicateFunctionCalls(relevantReturnValueSchema);
         dataStructureValue = relevantReturnValueSchema?.[dataStructurePath];
         break;
       }
     }
   }
 
-  if (!relevantReturnValueSchema || !dataStructurePath) return;
+  // 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: DataStructure['returnValueSchema'] | undefined,
+  ): boolean => {
+    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'
@@ -246,7 +399,11 @@ export default function constructMockCode(
       basePaths[0] = 'scenarios().data()';
     }
 
-    const optionalAccess = (name: string, stripArguments = false) => {
+    const optionalAccess = (
+      name: string,
+      stripArguments = false,
+      isRootAccess = false,
+    ) => {
       if (stripArguments && name.includes('(')) {
         name = name.split('(')[0] + '()';
       }
@@ -255,7 +412,18 @@ export default function constructMockCode(
       // so "useLoaderData<typeof loader>()" becomes "useLoaderData()"
       name = cleanOutTypes(name);
 
-      if (name.match(/\[\d+\]/)) {
+      // 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}`;
+      }
+
+      // Only use unquoted array access syntax for pure array indices like [0], [1]
+      // NOT for variable-qualified names like "fetcher[1] <- useFetcher" which need quotes
+      if (name.match(/^\[\d+\]$/) && !name.includes(' <- ')) {
         return `?.${name}`;
       }
 
@@ -294,7 +462,8 @@ export default function constructMockCode(
       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;
           }
@@ -303,7 +472,8 @@ export default function constructMockCode(
               ? 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;
@@ -697,13 +867,28 @@ export default function constructMockCode(
     // 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) continue;
@@ -879,6 +1064,11 @@ export default function constructMockCode(
             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;
         }
@@ -886,11 +1076,35 @@ export default function constructMockCode(
         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: ReturnValuePart) => p.name.split('(')[0];
       let relevantPart = returnValueSection.nested?.find(
         (p: ReturnValuePart) =>
-          withoutArgs(p) === withoutArgs({ name: part } as ReturnValuePart),
+          withoutArgs(p) === withoutArgs({ name: basePart } as ReturnValuePart),
       );
+
+      // 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 ||= [];
+        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 === '[]') {
@@ -914,6 +1128,33 @@ export default function constructMockCode(
           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.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) &&
@@ -955,6 +1196,7 @@ export default function constructMockCode(
           returnValueSection.nested.push(relevantPart);
         }
       } else if (
+        relevantPart.args &&
         funcArgs(part).join(',') !== funcArgs(relevantPart.name).join(',')
       ) {
         const existingArgs = relevantPart.args.find(
@@ -967,6 +1209,12 @@ export default function constructMockCode(
         }
       }
 
+      // 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
@@ -1048,8 +1296,70 @@ export default function constructMockCode(
       // Insert before the closing brace (handle trailing whitespace)
       enhancedContents = contents.replace(/\}\s*$/, iteratorMethods + '\n}');
     }
-    return `const ${mockName}ReturnValue = ${enhancedContents};\n\n${isRootAsyncFunction ? 'async ' : ''}function ${mockName}() {\n${indent(`return ${mockName}ReturnValue;`)}\n}`;
+
+    // Classes need to be mocked as classes, not functions.
+    // They're used with `new ClassName(args)` which requires a proper constructor.
+    // A function mock like `function ClassName() { return value; }` doesn't work because
+    // `new ClassName("arg")` wouldn't create the expected instance.
+    // For Error subclasses (detected by name ending in "Error"), extend Error for proper error handling.
+    if (entityType === 'class') {
+      const isErrorSubclass = mockName.endsWith('Error');
+      const baseClass = isErrorSubclass ? 'Error' : 'Object';
+      const superCall = isErrorSubclass ? 'super(message);' : '';
+      const nameAssignment = isErrorSubclass
+        ? `this.name = '${mockName}';`
+        : '';
+
+      return `class ${mockName}${isErrorSubclass ? ' extends Error' : ''} {
+  constructor(message) {
+    ${superCall}
+    ${nameAssignment}
+    Object.assign(this, scenarios().data()?.["${mockName}()"] || {});
+  }
+}`;
+    }
+
+    // For variable-qualified mocks, use underscore separator in the function name
+    // e.g., "entityDiffFetcher <- useFetcher" becomes "useFetcher_entityDiffFetcher"
+    // For indexed qualifiers like "data[1]", convert to safe identifier: "useFetcher_data_1"
+    const safeFunctionName = variableQualifier
+      ? `${baseMockName}_${safeVariableQualifier(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
+    // For indexed qualifiers like "data[1]", convert to safe identifier: "useFetcher_data_1"
+    const safeName = variableQualifier
+      ? `${baseMockName}_${safeVariableQualifier(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}`;
   }
 }

package/analyzer-template/project/createEntitiesAndSortFiles.ts

@@ -11,9 +11,12 @@ import {
   updateCommitMetadata,
   upsertEntities,
   upsertEntityBranches,
-} from '~codeyam/supabase';
+} from '~codeyam/database';
 import { LazyFileStore } from './LazyFileStore';
 
+// Track files we've already warned about to avoid duplicate warnings
+const warnedMissingFiles = new Set<string>();
+
 export interface EntityWithImportCount extends Entity {
   importCount?: number;
   started?: string;
@@ -89,12 +92,17 @@ async function findAndGatherEntity({
         ? fileStore.getByPath(importedEntityFilePath)
         : project.files.find((f) => f.path === importedEntityFilePath);
       if (!entityFile) {
-        console.log(
-          'CodeYam Error: Entity file not found for create and sort entities',
-          importedEntityName,
-          importedEntityFilePath,
-        );
-        throw new Error('Entity file not found for create and sort entities');
+        // File not in project - likely a mocked dependency or external library
+        // Skip this import rather than throwing, similar to gatherEntityMap.ts
+        if (!warnedMissingFiles.has(importedEntityFilePath)) {
+          warnedMissingFiles.add(importedEntityFilePath);
+          console.log(
+            'CodeYam Warning: Skipping dependency in create and sort - file not in project.files:',
+            importedEntityName,
+            importedEntityFilePath,
+          );
+        }
+        continue;
       }
 
       const info = await findAndGatherEntity({

package/analyzer-template/project/getFilesWithEntitiesFromRepo.ts

@@ -3,7 +3,7 @@ import {
   saveFiles,
   generateSha,
   loadEntities,
-} from '~codeyam/supabase';
+} from '~codeyam/database';
 import { File, Project } from '~codeyam/types';
 import { ProjectAnalyzer } from '~codeyam/analyze';
 

package/analyzer-template/project/getScenarioUrl.ts

@@ -1,6 +1,17 @@
-import { Analysis, Project, ProjectFramework, Scenario, File } from '~codeyam/types';
+import {
+  Analysis,
+  Project,
+  ProjectFramework,
+  Scenario,
+  File,
+} from '~codeyam/types';
 import getScenarioPagePaths from './getScenarioPagePath';
-import { frameworkRouteFileNameToRoute, isFrameworkRoute, PROJECT_RELATIVE_PATH, getAppDirectoryForFile } from '~codeyam/utils';
+import {
+  frameworkRouteFileNameToRoute,
+  isFrameworkRoute,
+  PROJECT_RELATIVE_PATH,
+  getAppDirectoryForFile,
+} from '~codeyam/utils';
 
 export interface GetScenarioUrlArgs {
   project: Project;
@@ -10,6 +21,48 @@ export interface GetScenarioUrlArgs {
   framework: ProjectFramework;
 }
 
+/**
+ * Extract route params from scenario data for URL generation.
+ * Handles array values (for catch-all routes) by joining them.
+ *
+ * Scenario data can be stored in two locations:
+ * - scenario.data.argumentsData (primary)
+ * - scenario.metadata.data.argumentsData (fallback)
+ *
+ * @param scenario - The scenario containing mock data
+ * @returns A record of param names to string values, or undefined if no params
+ */
+function extractRouteParamsFromScenario(
+  scenario: Scenario,
+): Record<string, string | string[]> | undefined {
+  // Check both possible locations for argumentsData
+  const argumentsData =
+    scenario.data?.argumentsData ?? scenario.metadata?.data?.argumentsData;
+
+  if (!Array.isArray(argumentsData) || argumentsData.length === 0) {
+    return undefined;
+  }
+
+  const params = (argumentsData[0] as Record<string, unknown>)?.params;
+  if (!params || typeof params !== 'object') {
+    return undefined;
+  }
+
+  // Convert all values to strings or string arrays
+  const result: Record<string, string | string[]> = {};
+  for (const [key, value] of Object.entries(
+    params as Record<string, unknown>,
+  )) {
+    if (Array.isArray(value)) {
+      result[key] = value.map(String);
+    } else if (value !== null && value !== undefined) {
+      result[key] = String(value);
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
 /**
  * Get the URL path for a scenario (the path that goes in the iframe src)
  * This is the same logic used in generateCodeYamPage.ts to determine the iframe src
@@ -40,7 +93,10 @@ export default function getScenarioUrl({
     case ProjectFramework.Next:
       // the routePath looks like: relative/path/app/123/static/c054b7ee-3961-4697-8354-886062a95a9d/default/page.tsx
       // the path should look like: static/123/c054b7ee-3961-4697-8354-886062a95a9d/default/0
-      const appDirectory = getAppDirectoryForFile(file.path, project.metadata?.webapps);
+      const appDirectory = getAppDirectoryForFile(
+        file.path,
+        project.metadata?.webapps,
+      );
       path = routePath
         .replace(PROJECT_RELATIVE_PATH + '/' + appDirectory + '/', '')
         .split('/')
@@ -50,7 +106,10 @@ export default function getScenarioUrl({
     case ProjectFramework.NextPages:
       // the routePath looks like: relative/path/app/123/static/c054b7ee-3961-4697-8354-886062a95a9d/default/page.tsx
       // the path should look like: static/123/c054b7ee-3961-4697-8354-886062a95a9d/default/0
-      const pagesDirectory = getAppDirectoryForFile(file.path, project.metadata?.webapps);
+      const pagesDirectory = getAppDirectoryForFile(
+        file.path,
+        project.metadata?.webapps,
+      );
       path = routePath
         .replace(PROJECT_RELATIVE_PATH + '/' + pagesDirectory + '/', '')
         .split('/')
@@ -62,7 +121,16 @@ export default function getScenarioUrl({
   }
 
   if (isFrameworkRoute(file, analysis.entity, framework)) {
-    path = frameworkRouteFileNameToRoute(project.slug, file, analysis, framework, scenario.name);
+    // Extract route params from scenario mock data for URL generation
+    const routeParams = extractRouteParamsFromScenario(scenario);
+    path = frameworkRouteFileNameToRoute(
+      project.slug,
+      file,
+      analysis,
+      framework,
+      scenario.name,
+      routeParams,
+    );
   }
 
   return `/${path}`;