@codeyam/codeyam-cli 0.1.0-staging.28f73cf → 0.1.0-staging.323686

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,12 +150,12 @@ 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;
 };
 /**
@@ -80,39 +191,51 @@ const shouldBeMap = (mockKey, mergedDataStructure) => {
     return false;
 };
 /**
- * Normalize a function call key by stripping arguments and type parameters.
+ * 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<T>()::entityDiffFetcher" (PRESERVED)
  */
 const normalizeKey = (key) => {
-    if (key.endsWith(')') && key.includes('(')) {
-        // Strip arguments: "foo(a, b)" -> "foo()"
-        const normalized = key.split('(')[0] + '()';
-        // Strip type parameters: "foo<T>()" -> "foo()"
-        return cleanOutTypes(normalized);
-    }
-    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]);
+    // Check for variable qualifier (::variableName)
+    const qualifierMatch = key.match(/::[a-zA-Z_][a-zA-Z0-9_]*$/);
+    const qualifier = qualifierMatch ? qualifierMatch[0] : '';
+    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('(')) {
+        // 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.
@@ -131,11 +254,43 @@ function extractAllKeys(obj) {
     }
     return keys;
 }
+/**
+ * Bare type markers that indicate a function was detected but has no actual return data.
+ * 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 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.
+ *
+ * Also catches TypeScript union types containing function, like:
+ * - "function | null"
+ * - "function | undefined"
+ * - "async-function | null"
+ */
+const isBareTypeMarker = (value) => {
+    if (typeof value !== 'string')
+        return false;
+    // Check for exact bare type markers
+    if (BARE_TYPE_MARKERS.includes(value))
+        return true;
+    // Check for TypeScript union types containing function type markers
+    // e.g., "function | null", "function | undefined", "async-function | null"
+    if (value.includes('|')) {
+        const parts = value.split('|').map((p) => p.trim());
+        // If any part is a bare type marker, treat the whole thing as a type marker
+        return parts.some((part) => BARE_TYPE_MARKERS.includes(part));
+    }
+    return false;
+};
 /**
  * Normalize mock data by merging entries that have the same normalized function name.
  * e.g., "useLastLogLine(projectSlug, !!simulatingEntitySha)" and
  *       "useLastLogLine(projectSlug, currentRunActive)" both become "useLastLogLine()"
  * Their values are deep-merged to ensure all attributes are accounted for.
+ *
+ * Also filters out bare function type markers like "validateInputs()": "function"
+ * which are just type hints without actual mock data.
  */
 const normalizeMockData = (mockData) => {
     const normalized = {};
@@ -148,31 +303,64 @@ const normalizeMockData = (mockData) => {
         }
         keyMapping.get(normKey).push(key);
     }
+    // Helper to check if a value is an empty object
+    const isEmptyObject = (value) => {
+        return (value !== null &&
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            Object.keys(value).length === 0);
+    };
     // 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)
-            normalized[normKey] = mockData[originalKeys[0]];
+            // 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)) {
+                continue;
+            }
+            // Skip empty objects - these cause "Objects are not valid as a React child" errors
+            // when mock functions return them (e.g., CheckCircle2() from lucide-react)
+            if (isEmptyObject(value)) {
+                continue;
+            }
+            normalized[originalKeys[0]] = value;
         }
         else {
             // Multiple keys normalize to the same value - merge them
             let mergedValue = {};
             for (const origKey of originalKeys) {
                 const value = mockData[origKey];
+                // Skip bare type markers when merging
+                if (isBareTypeMarker(value)) {
+                    continue;
+                }
                 if (value &&
                     typeof value === 'object' &&
                     !Array.isArray(value) &&
                     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
                     mergedValue = value;
                 }
             }
-            normalized[normKey] = mergedValue;
+            // 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) &&
+                !(mergedValue !== null &&
+                    typeof mergedValue === 'object' &&
+                    Object.keys(mergedValue).length === 0)) {
+                normalized[normKey] = mergedValue;
+            }
         }
     }
     return normalized;
@@ -186,9 +374,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 {
@@ -203,9 +395,29 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
             // Track normalized function names to avoid duplicate keys in output
             // e.g., submit({ a }) and submit({ b }) should both become "submit" once
             const seenNormalizedFuncNames = new Set();
+            // Pre-scan to identify plain keys that have function-call versions
+            // These plain keys should be skipped because the function-call version
+            // will be normalized to the same key name
+            // e.g., if both "push" and "push(`/path`)" exist, skip the plain "push"
+            const plainKeysWithFunctionCallVersions = new Set();
+            for (const key of Object.keys(jsonObj)) {
+                if (key.includes('(') && key.endsWith(')')) {
+                    const funcName = key.split('(')[0];
+                    // Check if a plain key with this name exists
+                    if (funcName in jsonObj && !funcName.includes('(')) {
+                        plainKeysWithFunctionCallVersions.add(funcName);
+                    }
+                }
+            }
             for (const key of Object.keys(jsonObj)) {
-                if (jsonObj[key] === undefined || jsonObj[key] === null)
+                if (jsonObj[key] === undefined)
+                    continue;
+                // Preserve explicit null values - components check `value !== null`
+                // to distinguish "not loaded" (undefined) from "explicitly null"
+                if (jsonObj[key] === null) {
+                    keyStrings.push(`${levelSpacing}"${safeString(key, level)}": null`);
                     continue;
+                }
                 if (Array.isArray(jsonObj[key])) {
                     if (key === '~~codeyam-jsx~~') {
                         return `<>${jsonObj[key].join('')}</>`;
@@ -245,7 +457,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
@@ -292,24 +504,43 @@ 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)}`);
                         }
                     }
                     else {
+                        // Skip plain keys that have function-call versions (at deeper nesting levels)
+                        // e.g., if both "t" and "t('common.close')" exist, skip the plain "t" object
+                        // because the function-call version will be normalized to "t"
+                        if (level > 2 && plainKeysWithFunctionCallVersions.has(key)) {
+                            console.log(`CodeYam: Skipping plain object key "${key}" (has function-call version that will be normalized)`);
+                            continue;
+                        }
                         keyStrings.push(`${levelSpacing}"${safeString(key, level)}": ${jsonToCode(jsonObj[key], level + 1, mergedDataStructure)}`);
                     }
                 }
@@ -337,20 +568,54 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                     // Only apply at deeper nesting levels (level > 2)
                     if (key.includes('(') && key.endsWith(')') && level > 2) {
                         const funcName = key.split('(')[0];
+                        // Extract the function arguments to check if they're string literals
+                        const argsMatch = key.match(/\((.+)\)$/);
+                        const args = argsMatch ? argsMatch[1].trim() : '';
+                        // Check if the argument is a simple string literal like "common.close" or 'common.close'
+                        // These are static lookup keys (e.g., translation functions) and should NOT be normalized
+                        const isStringLiteralArg = /^["'][^"']*["']$/.test(args);
+                        if (isStringLiteralArg) {
+                            // DON'T normalize - preserve the full key for static lookups (e.g., translations)
+                            // This allows constructMockCode to generate a dispatch function that looks up by key
+                            keyStrings.push(`${levelSpacing}"${safeString(key, level)}": "${safeString(stringValue, level)}"`);
+                            console.log(`CodeYam: Preserving string-literal function key for lookup: "${key}": "${stringValue}"`);
+                            continue;
+                        }
                         // Skip if we've already added this normalized function name
                         if (seenNormalizedFuncNames.has(funcName)) {
                             continue;
                         }
+                        // Skip TypeScript union type markers like "function | null" - these are type hints
+                        // that would produce invalid JavaScript if output as-is.
+                        // Note: We only skip UNION types here (containing '|'), not bare 'function'
+                        // because bare 'function' is transformed to () => {} below.
+                        // Note: This must come BEFORE seenNormalizedFuncNames.add() so that
+                        // if another key with the same funcName has actual data, it can be used.
+                        if (stringValue.includes('|') && isBareTypeMarker(stringValue)) {
+                            continue;
+                        }
                         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');
                         // Handle special type indicators that need transformation
                         let outputValue;
-                        if (stringValue === 'promise') {
-                            outputValue = 'Promise.resolve()';
-                            console.log(`CodeYam: Nested func transform (string->Promise): "${key}" -> "${funcName}": Promise.resolve()`);
+                        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
+                            const promiseExpr = looksLikePromise
+                                ? stringValue
+                                : 'Promise.resolve()';
+                            outputValue = `() => ${promiseExpr}`;
+                            console.log(`CodeYam: Nested func transform (string->Promise): "${key}" -> "${funcName}": () => ${promiseExpr}`);
                         }
                         else if (stringValue === 'function') {
                             outputValue = '() => {}';
@@ -368,10 +633,29 @@ const jsonToCode = (json, level = 1, mergedDataStructure, currentKey) => {
                         keyStrings.push(`${levelSpacing}"${safeString(funcName, level)}": ${outputValue}`);
                     }
                     else {
+                        // Skip plain keys that have function-call versions (at the same nesting level where
+                        // function-call keys get normalized). The function-call version will be output instead.
+                        // e.g., if both "push" and "push(`/path`)" exist, skip "push" - the other normalizes to "push"
+                        if (level > 2 && plainKeysWithFunctionCallVersions.has(key)) {
+                            console.log(`CodeYam: Skipping plain key "${key}" (has function-call version that will be normalized)`);
+                            continue;
+                        }
+                        // Skip bare type markers like "function", "function | null", etc.
+                        // For plain keys (not function signatures), these are just type hints
+                        // that would produce invalid JavaScript if output as-is.
+                        if (isBareTypeMarker(stringValue)) {
+                            continue;
+                        }
                         keyStrings.push(`${levelSpacing}"${safeString(key, level)}": "${safeString(stringValue, level)}"`);
                     }
                 }
                 else {
+                    // Skip plain keys that have function-call versions (at the same nesting level where
+                    // function-call keys get normalized)
+                    if (level > 2 && plainKeysWithFunctionCallVersions.has(key)) {
+                        console.log(`CodeYam: Skipping plain key "${key}" (has function-call version that will be normalized)`);
+                        continue;
+                    }
                     keyStrings.push(`${levelSpacing}"${safeString(key, level)}": ${safeString(String(jsonObj[key]), level)}`);
                 }
             }
@@ -408,7 +692,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}
@@ -424,9 +711,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 {
@@ -437,16 +726,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')")
@@ -502,13 +795,44 @@ function serialize(obj) {
         
         // Handle functions
         if (typeof value === 'function') {
-            const fnStr = value.toString();
+            let fnStr;
+            try {
+                fnStr = value.toString();
+            } catch (toStringErr) {
+                console.warn('CodeYam: Function.toString() threw error:', toStringErr, 'function name:', value.name);
+                return {
+                    __type: TYPE_MARKERS.FUNCTION,
+                    value: '() => {}',
+                    name: value.name || 'anonymous'
+                };
+            }
+
+            // Defensive check: ensure fnStr is actually a string
+            if (typeof fnStr !== 'string') {
+                console.warn('CodeYam: Function.toString() returned non-string:', typeof fnStr, fnStr, 'function name:', value.name);
+                return {
+                    __type: TYPE_MARKERS.FUNCTION,
+                    value: '() => {}',
+                    name: value.name || 'anonymous'
+                };
+            }
+
             // Check if it's an arrow function
             if (fnStr.includes('=>')) {
+                const arrowIndex = fnStr.indexOf('=>');
+                // Extra safety: verify indexOf returned a valid index
+                if (arrowIndex === -1) {
+                    console.warn('CodeYam: Arrow function detection inconsistency - includes found => but indexOf returned -1. fnStr:', fnStr);
+                    return {
+                        __type: TYPE_MARKERS.FUNCTION,
+                        value: fnStr,
+                        name: value.name
+                    };
+                }
                 return {
                     __type: TYPE_MARKERS.ARROW_FUNCTION,
-                    params: fnStr.substring(0, fnStr.indexOf('=>')).trim(),
-                    body: fnStr.substring(fnStr.indexOf('=>') + 2).trim()
+                    params: fnStr.substring(0, arrowIndex).trim(),
+                    body: fnStr.substring(arrowIndex + 2).trim()
                 };
             }
             return {
@@ -602,17 +926,23 @@ function deserialize(jsonString) {
                 
             case TYPE_MARKERS.FUNCTION:
                 try {
-                    // Handle named functions
+                    // Handle named functions - extract params and body properly
                     if (value.name && value.name !== 'anonymous') {
-                        const functionBody = value.value.slice(value.value.indexOf('{') + 1, value.value.lastIndexOf('}'));
-                        return new Function(\`return function \${value.name}\${functionBody}\`)();
+                        const parenStart = value.value.indexOf('(');
+                        const braceStart = value.value.indexOf('{');
+                        if (parenStart !== -1 && braceStart !== -1 && parenStart < braceStart) {
+                            // Extract params (between first ( and the { that starts the body)
+                            const params = value.value.slice(parenStart, braceStart).trim();
+                            const functionBody = value.value.slice(braceStart + 1, value.value.lastIndexOf('}'));
+                            return new Function(\`return function \${value.name}\${params}{\${functionBody}}\`)();
+                        }
                     }
-                    // Handle anonymous functions
+                    // Handle anonymous functions or fallback
                     return new Function(\`return \${value.value}\`)();
                 } catch (e) {
                     console.warn('Error deserializing function:', e);
-                    return function() { 
-                        return 'Error: Function could not be deserialized'; 
+                    return function() {
+                        return 'Error: Function could not be deserialized';
                     };
                 }