@codeyam/codeyam-cli 0.1.0-staging.8aea589 → 0.1.0-staging.8df382d

package/analyzer-template/project/writeMockDataTsx.ts

@@ -9,6 +9,142 @@ import { safeFileName } from '~codeyam/utils';
 import { cleanOutBoundary } from '~codeyam/ai';
 import { reconcileMockDataKeys } from './reconcileMockDataKeys';
 
+/**
+ * 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: Record<string, unknown>,
+): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  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 as Record<string, unknown>;
+      // 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: Record<string, unknown>,
+): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  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 as Record<string, unknown>,
+      );
+    } 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 as Record<string, unknown>,
+          );
+        }
+        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: string,
+  key: string,
+): string[] | null {
+  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
@@ -47,15 +183,45 @@ const cleanOutTypes = (str: string) => {
 };
 
 const safeString = (s: string, level: number) => {
-  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: string): string | null => {
+  // 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:
@@ -101,47 +267,53 @@ const shouldBeMap = (mockKey: string, mergedDataStructure: any): boolean => {
 };
 
 /**
- * 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: string): string => {
-  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;
-};
+  // 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;
 
-/**
- * Deep merge two objects, with source values taking precedence.
- * Arrays are replaced, not merged.
- */
-const deepMergeObjects = (
-  target: Record<string, unknown>,
-  source: Record<string, unknown>,
-): Record<string, unknown> => {
-  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] as Record<string, unknown>,
-        source[key] as Record<string, unknown>,
-      );
-    } else {
-      result[key] = source[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;
+          }
+        }
+      }
+    }
+
+    // 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;
 };
 
 /**
@@ -162,11 +334,131 @@ function extractAllKeys(obj: JsonTypeDefinition | undefined): string[] {
   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 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: string): boolean => {
+  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.
+ *
+ * Also catches TypeScript union types containing function, like:
+ * - "function | null"
+ * - "function | undefined"
+ * - "async-function | null"
+ */
+const isBareTypeMarker = (value: unknown): boolean => {
+  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;
+};
+
+/**
+ * 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: string): string => {
+  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
  *       "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: Record<string, unknown>,
@@ -183,16 +475,44 @@ const normalizeMockData = (
     keyMapping.get(normKey)!.push(key);
   }
 
+  // Helper to check if a value is an empty object
+  const isEmptyObject = (value: unknown): boolean => {
+    return (
+      value !== null &&
+      typeof value === 'object' &&
+      !Array.isArray(value) &&
+      Object.keys(value as object).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: unknown = {};
       for (const origKey of originalKeys) {
         const value = mockData[origKey];
+        // Skip bare type markers when merging
+        if (isBareTypeMarker(value)) {
+          continue;
+        }
         if (
           value &&
           typeof value === 'object' &&
@@ -201,7 +521,7 @@ const normalizeMockData = (
           typeof mergedValue === 'object' &&
           !Array.isArray(mergedValue)
         ) {
-          mergedValue = deepMergeObjects(
+          mergedValue = deepMerge(
             mergedValue as Record<string, unknown>,
             value as Record<string, unknown>,
           );
@@ -210,7 +530,19 @@ const normalizeMockData = (
           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 as object).length === 0
+        )
+      ) {
+        normalized[normKey] = mergedValue;
+      }
     }
   }
 
@@ -232,8 +564,11 @@ const jsonToCode = (
     if (Array.isArray(json)) {
       const arrayStrings: string[] = [];
       for (const item of json) {
-        if (!item) continue;
-        if (typeof item === 'object') {
+        // Skip undefined but preserve null (important for ref props)
+        if (item === undefined) continue;
+        if (item === null) {
+          arrayStrings.push('null');
+        } else if (typeof item === 'object') {
           arrayStrings.push(jsonToCode(item, level + 1, mergedDataStructure));
         } else {
           arrayStrings.push(`"${safeString(item, level)}"`);
@@ -244,14 +579,75 @@ const jsonToCode = (
     } else {
       const keyStrings: string[] = [];
       const jsonObj = json as Record<string, unknown>;
+      // 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<string>();
 
+      // 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<string>();
       for (const key of Object.keys(jsonObj)) {
-        if (jsonObj[key] === undefined || jsonObj[key] === null) continue;
+        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) 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] as string[]).join('')}</>`;
           }
+
+          // Check if this is a nested function signature with array value
+          // e.g., "postMessage(message, '*')": ["mockMessageString", "*"]
+          // These need to be transformed into callable arrow functions
+          // Only apply at deeper nesting levels (level > 2) - top-level mock data keys
+          // (level 2) are return values that should preserve their data
+          // Skip when array contains objects (likely return data like getAll() returning [{name, value}])
+          const argsArray = jsonObj[key] as unknown[];
+          const isReturnData = argsArray.some(
+            (item) => item && typeof item === 'object' && !Array.isArray(item),
+          );
+          if (
+            key.includes('(') &&
+            key.endsWith(')') &&
+            level > 2 &&
+            !isReturnData
+          ) {
+            const funcName = key.split('(')[0];
+            // Skip if we've already added this normalized function name
+            if (seenNormalizedFuncNames.has(funcName)) {
+              continue;
+            }
+            seenNormalizedFuncNames.add(funcName);
+            const argsArray = jsonObj[key] as unknown[];
+            const argsString = argsArray
+              .map((_, i) => `arg${i + 1}`)
+              .join(', ');
+            console.log(
+              `CodeYam: Nested func transform (array): "${key}" -> "${funcName}"`,
+            );
+            keyStrings.push(
+              `${levelSpacing}"${safeString(funcName, level)}": (${argsString}) => {}`,
+            );
+            continue;
+          }
+
           const arrayString = jsonToCode(
             jsonObj[key],
             level + 1,
@@ -268,10 +664,39 @@ const jsonToCode = (
               `${levelSpacing}"${safeString(key, level)}": ${arrayString}`,
             );
           }
-        } else if (typeof jsonObj[key] === 'object') {
-          // Check if this object has a "functionCallReturnValue" key - if so, unwrap it
+        } else if (jsonObj[key] !== null && typeof jsonObj[key] === 'object') {
           const objKeys = Object.keys(jsonObj[key] as object);
+
+          // Check if this is a nested function signature (e.g., "postMessage(message, targetOrigin)": { signature: [...] })
+          // These need to be transformed into callable arrow functions
+          // Only apply at deeper nesting levels (level > 2) - top-level mock data keys
+          // (level 2) are return values that should preserve their data
           if (
+            key.includes('(') &&
+            key.endsWith(')') &&
+            level > 2 &&
+            objKeys.includes('signature') &&
+            Array.isArray((jsonObj[key] as Record<string, unknown>).signature)
+          ) {
+            const funcName = key.split('(')[0];
+            // Skip if we've already added this normalized function name
+            if (seenNormalizedFuncNames.has(funcName)) {
+              continue;
+            }
+            seenNormalizedFuncNames.add(funcName);
+            const signature = (jsonObj[key] as Record<string, unknown>)
+              .signature as string[];
+            const argsString = signature
+              .map((_, i) => `arg${i + 1}`)
+              .join(', ');
+            console.log(
+              `CodeYam: Nested func transform (signature): "${key}" -> "${funcName}"`,
+            );
+            keyStrings.push(
+              `${levelSpacing}"${safeString(funcName, level)}": (${argsString}) => {}`,
+            );
+          } else if (
+            // Check if this object has a "functionCallReturnValue" key - if so, unwrap it
             objKeys.length === 1 &&
             objKeys[0] === 'functionCallReturnValue'
           ) {
@@ -297,30 +722,53 @@ const jsonToCode = (
             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] as Record<string, unknown>)[
               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)}`,
             );
@@ -341,10 +789,186 @@ const jsonToCode = (
           }
           return keyValue;
         } else if (typeof jsonObj[key] === 'string') {
-          keyStrings.push(
-            `${levelSpacing}"${safeString(key, level)}": "${safeString(jsonObj[key] as string, level)}"`,
-          );
+          const stringValue = jsonObj[key] as string;
+
+          // Check if this is a nested function signature with string value
+          // e.g., "postMessage(message, '*')": "() => { console.log('postMessage called'); }"
+          // These need to have the key normalized to just the function name
+          // 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('=>') ||
+              /^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: string;
+            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.replace(/\n/g, '\\n')
+                : 'Promise.resolve()';
+              outputValue = `() => ${promiseExpr}`;
+              console.log(
+                `CodeYam: Nested func transform (string->Promise): "${key}" -> "${funcName}": () => ${promiseExpr}`,
+              );
+            } else if (stringValue === 'function') {
+              outputValue = '() => {}';
+              console.log(
+                `CodeYam: Nested func transform (string->function): "${key}" -> "${funcName}": () => {}`,
+              );
+            } else if (looksLikeFunction) {
+              // Check for "[native code]" in function body — this is what
+              // Function.prototype.toString() returns for built-in functions.
+              // The LLM sometimes generates "function () { [native code] }" which
+              // is not valid JavaScript (the "[" is parsed as array destructuring).
+              if (stringValue.includes('[native code]')) {
+                outputValue = '() => {}';
+                console.log(
+                  `CodeYam: Nested func transform (native-code->noop): "${key}" -> "${funcName}": () => {}`,
+                );
+              } else if (cleanMalformedFunctionValue(stringValue)) {
+                // Check for malformed LLM-generated function values like "(function)() => {}"
+                // These have an invalid "(function)" prefix that must be stripped
+                outputValue = cleanMalformedFunctionValue(stringValue)!;
+                console.log(
+                  `CodeYam: Nested func transform (malformed->clean): "${key}" -> "${funcName}": ${outputValue}`,
+                );
+              } 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
+              outputValue = `"${safeString(stringValue, level)}"`;
+              console.log(
+                `CodeYam: Nested func transform (string->quoted): "${key}" -> "${funcName}": "${stringValue}"`,
+              );
+            }
+
+            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;
+            }
+            // 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 {
+          // 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)}`,
           );
@@ -400,11 +1024,16 @@ export default async function writeMockDataTsx(
 
   // 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(
+  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}
@@ -422,10 +1051,13 @@ 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,
@@ -437,25 +1069,35 @@ import React from 'react';
     const rawScenarioMockData = {
       ...(mockScenario.metadata.data?.mockData ?? {}),
     };
+
     // Reconcile scenario-specific mock data keys as well
-    const scenarioMockData = reconcileMockDataKeys(
+    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 as Record<string, unknown>,
     );
+    // 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')")
@@ -517,13 +1159,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 {
@@ -617,17 +1290,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';
                     };
                 }