@codeyam/codeyam-cli 0.1.0-staging.596f0eb → 0.1.0-staging.62d4615

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

@@ -6,6 +6,117 @@ import { parseDocument } from 'htmlparser2';
 import { safeFileName } from "../../../../../packages/utils/index.js";
 import { cleanOutBoundary } from "../../../../../packages/ai/index.js";
 import { reconcileMockDataKeys } from "./reconcileMockDataKeys.js";
+/**
+ * Normalize useParams mock data by fixing the React Router splat param (*).
+ * The LLM often generates random string values for `*` (the splat param),
+ * but this param represents the URL path suffix after the matched route
+ * and should typically be empty string for default scenarios.
+ *
+ * Example: For route `/entity/:sha/*`, the `*` param contains everything
+ * after `/entity/:sha/`. An empty string means the default tab/view.
+ */
+function normalizeParamsMockData(mockData) {
+    const result = {};
+    for (const [key, value] of Object.entries(mockData)) {
+        // Check if this is a useParams mock data entry
+        if (key.includes('useParams') && value && typeof value === 'object') {
+            const paramsObj = value;
+            // If there's a `*` key (splat param), default it to empty string
+            // The splat param represents URL path suffix and is typically empty for default views
+            if ('*' in paramsObj) {
+                result[key] = {
+                    ...paramsObj,
+                    '*': '', // Default splat to empty string for default tab/view
+                };
+                continue;
+            }
+        }
+        result[key] = value;
+    }
+    return result;
+}
+/**
+ * Convert comma-separated string values to arrays when they look like array data.
+ * This handles cases where the LLM generates strings like "color,size" instead
+ * of arrays like ["color", "size"] due to schema type misdetection.
+ */
+function convertCommaSeparatedStringsToArrays(mockData) {
+    const result = {};
+    for (const [key, value] of Object.entries(mockData)) {
+        if (typeof value === 'string') {
+            const asArray = parseCommaSeparatedStringAsArray(value, key);
+            if (asArray !== null) {
+                result[key] = asArray;
+                console.log(`CodeYam: Converted comma-separated string to array for key "${key}": "${value}" -> [${asArray.map((s) => `"${s}"`).join(', ')}]`);
+            }
+            else {
+                result[key] = value;
+            }
+        }
+        else if (value !== null &&
+            typeof value === 'object' &&
+            !Array.isArray(value)) {
+            // Recursively process nested objects
+            result[key] = convertCommaSeparatedStringsToArrays(value);
+        }
+        else if (Array.isArray(value)) {
+            // Recursively process arrays (each element could be an object)
+            result[key] = value.map((item) => {
+                if (item !== null && typeof item === 'object' && !Array.isArray(item)) {
+                    return convertCommaSeparatedStringsToArrays(item);
+                }
+                return item;
+            });
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Detect if a string looks like a comma-separated list that should be an array.
+ */
+function parseCommaSeparatedStringAsArray(value, key) {
+    if (!value.includes(',')) {
+        return null;
+    }
+    // Heuristic: if the key name suggests it's an array field, convert it
+    // Check this FIRST before sentence detection, since "color, size" looks like
+    // a sentence but should be converted to ["color", "size"] for _attributes fields
+    const arrayFieldPatterns = [
+        /_attributes$/i,
+        /_ids$/i,
+        /_items$/i,
+        /_tags$/i,
+        /_values$/i,
+        /_types$/i,
+        /_names$/i,
+        /_keys$/i,
+        /^attributes$/i,
+        /^items$/i,
+        /^tags$/i,
+        /^values$/i,
+    ];
+    const looksLikeArrayField = arrayFieldPatterns.some((pattern) => pattern.test(key));
+    if (looksLikeArrayField) {
+        // For array-like fields, only reject if it contains newlines (likely prose)
+        if (value.includes('\n')) {
+            return null;
+        }
+        const parts = value.split(',').map((s) => s.trim());
+        return parts.filter((s) => s.length > 0);
+    }
+    // For non-array-named fields, apply stricter sentence detection
+    // Looks like a sentence: "Hello, world"
+    if (/,\s+[a-z]/.test(value)) {
+        return null;
+    }
+    if (value.includes('\n')) {
+        return null;
+    }
+    return null;
+}
 /**
  * Return true when `markup` contains 0 or >1 meaningful
  * top-level nodes (element *or* non-blank text), so React
@@ -39,14 +150,41 @@ const cleanOutTypes = (str) => {
     return cleanOutBoundary(str, '<', '>').replace(/<>/g, '');
 };
 const safeString = (s, level) => {
-    if (s?.endsWith && s.endsWith(')') && (level === 1 || level === 2)) {
-        // remove arguments from top level functions
-        s = s.split('(')[0] + '()';
-        // strip type parameters like <typeof loader>
-        s = cleanOutTypes(s);
-    }
+    // NOTE: We no longer strip arguments from top-level function keys (level 2)
+    // because normalizeMockData now handles merging duplicate keys while preserving
+    // original keys when there's only one call site. This ensures constructMockCode
+    // can look up data with the full key (e.g., "useCustomSizes(projectSlug)").
+    //
+    // Only escape quotes and newlines for safe string output.
     return s?.replace ? s.replace(/"/g, "'").replace(/\n/g, '\\n') : s;
 };
+/**
+ * Clean up malformed LLM-generated function values.
+ * The LLM sometimes generates function values with an invalid "(function)" prefix like:
+ * - "(function)() => {}"
+ * - "(function)(event) => {}"
+ * - "(function)(id) => {}"
+ *
+ * This strips the prefix and adds TypeScript `any` type annotations to parameters.
+ * Returns null if the value doesn't match the malformed pattern.
+ */
+const cleanMalformedFunctionValue = (value) => {
+    // Match "(function)" followed by optional params in parens, then "=>"
+    const match = value.match(/^\(function\)(\([^)]*\))\s*=>\s*(.*)$/);
+    if (!match)
+        return null;
+    const [, paramsWithParens, body] = match;
+    // Extract parameter names and add `: any` type annotation
+    // e.g., "(event)" -> "(event: any)", "()" -> "()"
+    const params = paramsWithParens.slice(1, -1).trim(); // Remove outer parens
+    const typedParams = params
+        ? params
+            .split(',')
+            .map((p) => `${p.trim()}: any`)
+            .join(', ')
+        : '';
+    return `(${typedParams}) => ${body}`;
+};
 /**
  * Check if a mock key's schema indicates it should be instantiated as a Map.
  * A Map is indicated by:
@@ -80,12 +218,14 @@ const shouldBeMap = (mockKey, mergedDataStructure) => {
     return false;
 };
 /**
- * Normalize a function call key by stripping arguments and type parameters,
- * but preserving variable qualifiers (::variableName suffix).
+ * Normalize a function call key by stripping arguments but PRESERVING type parameters.
+ * Type parameters like <typeof loader> are important for disambiguation.
+ * Variable qualifiers (::variableName suffix) are also preserved.
+ *
  * e.g., "useLastLogLine(projectSlug, !!simulatingEntitySha)" -> "useLastLogLine()"
- * e.g., "useLoaderData<typeof loader>()" -> "useLoaderData()"
+ * e.g., "useLoaderData<typeof loader>()" -> "useLoaderData<typeof loader>()" (PRESERVED)
  * e.g., "useFetcher()::entityDiffFetcher" -> "useFetcher()::entityDiffFetcher" (preserved)
- * e.g., "useFetcher<T>()::entityDiffFetcher" -> "useFetcher()::entityDiffFetcher"
+ * e.g., "useFetcher<T>()::entityDiffFetcher" -> "useFetcher<T>()::entityDiffFetcher" (PRESERVED)
  */
 const normalizeKey = (key) => {
     // Check for variable qualifier (::variableName)
@@ -94,33 +234,35 @@ const normalizeKey = (key) => {
     const keyWithoutQualifier = qualifier ? key.slice(0, -qualifier.length) : key;
     // Check if key ends with ) - indicating a function call (after removing qualifier)
     if (keyWithoutQualifier.endsWith(')') && keyWithoutQualifier.includes('(')) {
-        // Strip arguments: "foo(a, b)" -> "foo()"
-        const normalized = keyWithoutQualifier.split('(')[0] + '()';
-        // Strip type parameters: "foo<T>()" -> "foo()"
-        return cleanOutTypes(normalized) + qualifier;
-    }
-    return key;
-};
-/**
- * Deep merge two objects, with source values taking precedence.
- * Arrays are replaced, not merged.
- */
-const deepMergeObjects = (target, source) => {
-    const result = { ...target };
-    for (const key of Object.keys(source)) {
-        if (source[key] &&
-            typeof source[key] === 'object' &&
-            !Array.isArray(source[key]) &&
-            target[key] &&
-            typeof target[key] === 'object' &&
-            !Array.isArray(target[key])) {
-            result[key] = deepMergeObjects(target[key], source[key]);
+        // Find the opening paren that matches the closing paren (accounting for nested parens and generics)
+        // We want to strip arguments but preserve type parameters
+        // e.g., "useLoaderData<typeof loader>(arg1, arg2)" -> "useLoaderData<typeof loader>()"
+        // e.g., "foo(a, b)" -> "foo()"
+        // Find where type parameters end (if any) by finding matching < >
+        let typeParamEnd = 0;
+        if (keyWithoutQualifier.includes('<')) {
+            let depth = 0;
+            for (let i = 0; i < keyWithoutQualifier.length; i++) {
+                if (keyWithoutQualifier[i] === '<')
+                    depth++;
+                if (keyWithoutQualifier[i] === '>') {
+                    depth--;
+                    if (depth === 0) {
+                        typeParamEnd = i + 1;
+                        break;
+                    }
+                }
+            }
         }
-        else {
-            result[key] = source[key];
+        // Find the opening paren for function arguments (after type params)
+        const argsStart = keyWithoutQualifier.indexOf('(', typeParamEnd);
+        if (argsStart !== -1) {
+            // Preserve everything up to and including the opening paren, then close it
+            const normalized = keyWithoutQualifier.slice(0, argsStart) + '()';
+            return normalized + qualifier;
         }
     }
-    return result;
+    return key;
 };
 /**
  * Extract all keys from a JsonTypeDefinition recursively.
@@ -144,6 +286,34 @@ function extractAllKeys(obj) {
  * These should be filtered out of mock data output since they're just type hints.
  */
 const BARE_TYPE_MARKERS = ['function', 'async-function'];
+/**
+ * Check if a string is a TypeScript arrow function type annotation rather than
+ * a valid JavaScript arrow function expression.
+ *
+ * TypeScript arrow types look like function expressions (they contain '=>') but
+ * their "body" is a type name, not a JS expression:
+ * - "() => void"
+ * - "(event: MouseEvent) => void"
+ * - "() => string"
+ * - "() => Promise<void>"
+ * - "(id: string, name: string) => boolean"
+ *
+ * Valid JS arrow functions have actual expression bodies:
+ * - "() => {}"
+ * - "() => 'hello'"
+ * - "(x) => x + 1"
+ * - "() => { console.log('hi'); }"
+ */
+const ARROW_TYPE_RETURN_TYPES = /^(void|string|number|boolean|any|unknown|never|null|undefined|object|Date|Promise<\w+>)$/i;
+const isArrowFunctionTypeAnnotation = (value) => {
+    const arrowIndex = value.indexOf('=>');
+    if (arrowIndex === -1)
+        return false;
+    const body = value.slice(arrowIndex + 2).trim();
+    // A real JS function would have {}, an expression, a string literal, etc.
+    // A type annotation has a bare type keyword as the "body".
+    return ARROW_TYPE_RETURN_TYPES.test(body);
+};
 /**
  * Check if a value is a bare function type marker that should be filtered out.
  * These markers indicate the LLM detected a function but couldn't generate meaningful mock data.
@@ -168,6 +338,57 @@ const isBareTypeMarker = (value) => {
     }
     return false;
 };
+/**
+ * Escape newlines that appear inside string literals within a code string,
+ * while preserving structural newlines (those between statements/lines of code).
+ *
+ * This handles cases where LLM generates function bodies like:
+ * - "() => { console.log('line1\nline2'); }" - escape the \n inside the string
+ * - "() => {\n  console.log('x');\n}" - preserve structural \n between statements
+ * - "() => Promise.resolve('a\nb')" - escape the \n inside the string argument
+ *
+ * The algorithm tracks whether we're inside a string literal (single, double, or
+ * backtick quotes) and only escapes newlines that appear within quotes.
+ */
+const escapeNewlinesInStringLiterals = (code) => {
+    let result = '';
+    let inString = false;
+    let stringChar = ''; // The quote character that started the current string
+    for (let i = 0; i < code.length; i++) {
+        const char = code[i];
+        const prevChar = i > 0 ? code[i - 1] : '';
+        // Check for string literal boundaries (single, double, or backtick quotes)
+        // Skip escaped quotes (preceded by backslash)
+        if ((char === '"' || char === "'" || char === '`') && prevChar !== '\\') {
+            if (!inString) {
+                // Starting a string literal
+                inString = true;
+                stringChar = char;
+            }
+            else if (char === stringChar) {
+                // Ending the current string literal
+                inString = false;
+                stringChar = '';
+            }
+            // If char is a different quote type while in a string, it's just a character
+        }
+        // Escape newlines only when inside a string literal
+        if (char === '\n') {
+            if (inString) {
+                // Inside a string literal - escape the newline
+                result += '\\n';
+            }
+            else {
+                // Outside string - keep the structural newline
+                result += char;
+            }
+        }
+        else {
+            result += char;
+        }
+    }
+    return result;
+};
 /**
  * Normalize mock data by merging entries that have the same normalized function name.
  * e.g., "useLastLogLine(projectSlug, !!simulatingEntitySha)" and
@@ -198,7 +419,11 @@ const normalizeMockData = (mockData) => {
     // Second pass: merge values for duplicate normalized keys
     for (const [normKey, originalKeys] of keyMapping) {
         if (originalKeys.length === 1) {
-            // No duplicates, use the original key (may be normalized or not based on safeString)
+            // No duplicates - PRESERVE the original key with arguments
+            // This is critical because constructMockCode generates code that accesses
+            // data with the FULL key (e.g., scenarios().data()?.["useCustomSizes(projectSlug)"])
+            // If we normalize to "useCustomSizes()" but code looks for "useCustomSizes(projectSlug)",
+            // the lookup fails and returns undefined, causing runtime errors.
             const value = mockData[originalKeys[0]];
             // Skip bare type markers like "function" or "async-function"
             if (isBareTypeMarker(value)) {
@@ -209,7 +434,7 @@ const normalizeMockData = (mockData) => {
             if (isEmptyObject(value)) {
                 continue;
             }
-            normalized[normKey] = value;
+            normalized[originalKeys[0]] = value;
         }
         else {
             // Multiple keys normalize to the same value - merge them
@@ -226,7 +451,7 @@ const normalizeMockData = (mockData) => {
                     mergedValue &&
                     typeof mergedValue === 'object' &&
                     !Array.isArray(mergedValue)) {
-                    mergedValue = deepMergeObjects(mergedValue, value);
+                    mergedValue = deepMerge(mergedValue, value);
                 }
                 else {
                     // For non-objects or arrays, later values take precedence
@@ -234,9 +459,11 @@ const normalizeMockData = (mockData) => {
                 }
             }
             // Only add if we have actual data (not just filtered type markers)
+            // Note: typeof null === 'object' in JS, so we must check for null explicitly
             if (mergedValue !== undefined &&
                 !isBareTypeMarker(mergedValue) &&
-                !(typeof mergedValue === 'object' &&
+                !(mergedValue !== null &&
+                    typeof mergedValue === 'object' &&
                     Object.keys(mergedValue).length === 0)) {
                 normalized[normKey] = mergedValue;
             }
@@ -253,9 +480,13 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
         if (Array.isArray(json)) {
             const arrayStrings = [];
             for (const item of json) {
-                if (!item)
+                // Skip undefined but preserve null (important for ref props)
+                if (item === undefined)
                     continue;
-                if (typeof item === 'object') {
+                if (item === null) {
+                    arrayStrings.push('null');
+                }
+                else if (typeof item === 'object') {
                     arrayStrings.push(jsonToCode(item, level + 1, mergedDataStructure));
                 }
                 else {
@@ -332,7 +563,7 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                         keyStrings.push(`${levelSpacing}"${safeString(key, level)}": ${arrayString}`);
                     }
                 }
-                else if (typeof jsonObj[key] === 'object') {
+                else if (jsonObj[key] !== null && typeof jsonObj[key] === 'object') {
                     const objKeys = Object.keys(jsonObj[key]);
                     // Check if this is a nested function signature (e.g., "postMessage(message, targetOrigin)": { signature: [...] })
                     // These need to be transformed into callable arrow functions
@@ -379,20 +610,32 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                         objKeys[0].startsWith('(') &&
                         objKeys[0].endsWith(')')) {
                         const signatureKey = objKeys[0];
-                        // Extract arguments without parentheses for the combined key
+                        // Extract arguments without parentheses for the function name
                         const args = signatureKey.slice(1, -1);
-                        const flattenedKey = `${key}(${args})`;
                         const unwrappedValue = jsonObj[key][signatureKey];
-                        if (typeof unwrappedValue === 'string') {
+                        // Handle null values - generate arrow function stubs for function signatures with null
+                        if (unwrappedValue === null) {
+                            const funcName = key;
+                            const argsString = args
+                                .split(',')
+                                .map((arg, i) => `${arg.trim()}: any`)
+                                .join(', ');
+                            keyStrings.push(`${levelSpacing}"${safeString(funcName, level)}": (${argsString}) => {}`);
+                        }
+                        else if (typeof unwrappedValue === 'string') {
+                            const flattenedKey = `${key}(${args})`;
                             keyStrings.push(`${levelSpacing}"${safeString(flattenedKey, level)}": "${safeString(unwrappedValue, level)}"`);
                         }
                         else if (typeof unwrappedValue === 'object') {
+                            const flattenedKey = `${key}(${args})`;
                             keyStrings.push(`${levelSpacing}"${safeString(flattenedKey, level)}": ${jsonToCode(unwrappedValue, level + 1, mergedDataStructure)}`);
                         }
                         else if (typeof unwrappedValue === 'boolean') {
+                            const flattenedKey = `${key}(${args})`;
                             keyStrings.push(`${levelSpacing}"${safeString(flattenedKey, level)}": ${unwrappedValue}`);
                         }
                         else {
+                            const flattenedKey = `${key}(${args})`;
                             keyStrings.push(`${levelSpacing}"${safeString(flattenedKey, level)}": ${safeString(String(unwrappedValue), level)}`);
                         }
                     }
@@ -459,20 +702,28 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                         }
                         seenNormalizedFuncNames.add(funcName);
                         // Check if the string value looks like a function expression
+                        // Be careful not to match descriptive strings like "function listening" -
+                        // a valid function expression must have parentheses like function(), function name(), or function (
                         const looksLikeFunction = stringValue.includes('=>') ||
-                            stringValue.startsWith('function') ||
-                            stringValue.startsWith('async');
+                            /^function\s*[\w]*\s*\(/.test(stringValue) ||
+                            /^async\s+function\s*[\w]*\s*\(/.test(stringValue) ||
+                            /^async\s*\(/.test(stringValue);
                         // Check if the string value looks like a Promise expression
                         // e.g., "Promise.resolve()", "new Promise(...)", etc.
                         const looksLikePromise = stringValue.startsWith('Promise.') ||
                             stringValue.startsWith('new Promise');
+                        // Check if the string contains newlines (potential issue for string literals)
+                        const hasNewlines = stringValue.includes('\n');
                         // Handle special type indicators that need transformation
                         let outputValue;
                         if (stringValue === 'promise' || looksLikePromise) {
                             // The key is a function call (e.g., "revalidate()"), so output a function
                             // that returns a Promise, not the Promise itself
+                            // Important: Escape newlines inside Promise expressions to avoid
+                            // "unterminated string literal" errors when the Promise contains
+                            // multi-line string arguments like Promise.resolve('line1\nline2')
                             const promiseExpr = looksLikePromise
-                                ? stringValue
+                                ? stringValue.replace(/\n/g, '\\n')
                                 : 'Promise.resolve()';
                             outputValue = `() => ${promiseExpr}`;
                             console.log(`CodeYam: Nested func transform (string->Promise): "${key}" -> "${funcName}": () => ${promiseExpr}`);
@@ -482,8 +733,38 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                             console.log(`CodeYam: Nested func transform (string->function): "${key}" -> "${funcName}": () => {}`);
                         }
                         else if (looksLikeFunction) {
-                            outputValue = stringValue;
-                            console.log(`CodeYam: Nested func transform (string): "${key}" -> "${funcName}": ${stringValue.substring(0, 30)}...`);
+                            // First, check for malformed LLM-generated function values like "(function)() => {}"
+                            // These have an invalid "(function)" prefix that must be stripped
+                            const cleanedFn = cleanMalformedFunctionValue(stringValue);
+                            if (cleanedFn) {
+                                outputValue = cleanedFn;
+                                console.log(`CodeYam: Nested func transform (malformed->clean): "${key}" -> "${funcName}": ${cleanedFn}`);
+                            }
+                            else if (isArrowFunctionTypeAnnotation(stringValue)) {
+                                // TypeScript arrow function type annotations like "() => void",
+                                // "(event: MouseEvent) => void", "() => Promise<void>" contain '=>'
+                                // so they pass the looksLikeFunction check, but they are TYPE syntax,
+                                // not valid JavaScript expressions. Convert to a no-op function.
+                                outputValue = '() => {}';
+                                console.log(`CodeYam: Nested func transform (type-annotation->function): "${key}" -> "${funcName}": () => {}`);
+                            }
+                            else {
+                                // Handle newlines in function expressions:
+                                // - Newlines inside string literals must be escaped to avoid
+                                //   "unterminated string literal" errors
+                                // - Structural newlines (between statements) should be kept as-is
+                                //   to produce valid multi-line JavaScript
+                                //
+                                // We escape ONLY newlines that appear inside string literals (single,
+                                // double, or template quotes). Structural newlines are preserved.
+                                if (hasNewlines) {
+                                    outputValue = escapeNewlinesInStringLiterals(stringValue);
+                                }
+                                else {
+                                    outputValue = stringValue;
+                                }
+                                console.log(`CodeYam: Nested func transform (string): "${key}" -> "${funcName}": ${stringValue.substring(0, 30)}...`);
+                            }
                         }
                         else {
                             // Plain string value - must be quoted
@@ -506,7 +787,17 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                         if (isBareTypeMarker(stringValue)) {
                             continue;
                         }
-                        keyStrings.push(`${levelSpacing}"${safeString(key, level)}": "${safeString(stringValue, level)}"`);
+                        // Check for malformed LLM-generated function values like "(function)(id) => {}"
+                        // These can appear on plain keys (e.g., "closeToast") and need to be output as
+                        // actual functions, not quoted strings
+                        const cleanedPlainKeyFn = cleanMalformedFunctionValue(stringValue);
+                        if (cleanedPlainKeyFn) {
+                            keyStrings.push(`${levelSpacing}"${safeString(key, level)}": ${cleanedPlainKeyFn}`);
+                            console.log(`CodeYam: Plain key func transform (malformed->clean): "${key}": ${cleanedPlainKeyFn}`);
+                        }
+                        else {
+                            keyStrings.push(`${levelSpacing}"${safeString(key, level)}": "${safeString(stringValue, level)}"`);
+                        }
                     }
                 }
                 else {
@@ -552,7 +843,10 @@ export default async function writeMockDataTsx(analysis, mockScenario, mockDataP
     const expectedKeys = extractAllKeys(dataForMocks);
     // Reconcile mock data keys to match expected keys from dataForMocks
     // This handles cases where LLM generated literal values instead of variable references
-    const defaultMockData = reconcileMockDataKeys(rawDefaultMockData, expectedKeys);
+    const reconciledMockData = reconcileMockDataKeys(rawDefaultMockData, expectedKeys);
+    // Convert comma-separated strings to arrays for fields that should be arrays
+    // This handles cases where LLM generates "color,size" instead of ["color", "size"]
+    const defaultMockData = convertCommaSeparatedStringsToArrays(reconciledMockData);
     const mockDataComment = `// This file is auto-generated by CodeYam. Do not edit this file manually.
 // This file contains mock data required for:
 // Scenario: ${mockScenario.id} - ${mockScenario.name}
@@ -568,9 +862,11 @@ import React from 'react';
     if (mockScenario.name === DEFAULT_SCENARIO_NAME) {
         // Normalize mock data to merge entries with same normalized function name
         const normalizedMockData = normalizeMockData(defaultMockData);
+        // Fix useParams splat param (*) to default to empty string
+        const paramsNormalizedMockData = normalizeParamsMockData(normalizedMockData);
         dataCode = jsonToCode({
             arguments: defaultArguments,
-            ...normalizedMockData,
+            ...paramsNormalizedMockData,
         }, 2, mergedDataStructure);
     }
     else {
@@ -581,16 +877,20 @@ import React from 'react';
             ...(mockScenario.metadata.data?.mockData ?? {}),
         };
         // Reconcile scenario-specific mock data keys as well
-        const scenarioMockData = reconcileMockDataKeys(rawScenarioMockData, expectedKeys);
+        const reconciledScenarioMockData = reconcileMockDataKeys(rawScenarioMockData, expectedKeys);
+        // Convert comma-separated strings to arrays for scenario data
+        const scenarioMockData = convertCommaSeparatedStringsToArrays(reconciledScenarioMockData);
         const mergedArguments = defaultArguments.map((defaultArg, index) => {
             return deepMerge(defaultArg, scenarioArguments[index]);
         });
         const mergedMockData = deepMerge(defaultMockData, scenarioMockData);
         // Normalize mock data to merge entries with same normalized function name
         const normalizedMockData = normalizeMockData(mergedMockData);
+        // Fix useParams splat param (*) to default to empty string
+        const paramsNormalizedMockData = normalizeParamsMockData(normalizedMockData);
         const mergedData = {
             arguments: mergedArguments,
-            ...normalizedMockData,
+            ...paramsNormalizedMockData,
         };
         // Use level=2 (same as default scenario) for consistent key formatting.
         // This ensures nested function arguments are kept (e.g., "from('workouts')")