@codeyam/codeyam-cli 0.1.0-staging.76566f9 → 0.1.0-staging.78c1cad

package/analyzer-template/project/writeMockDataTsx.ts

@@ -8,6 +8,7 @@ import type { AnyNode } from 'domhandler';
 import { safeFileName } from '~codeyam/utils';
 import { cleanOutBoundary } from '~codeyam/ai';
 import { reconcileMockDataKeys } from './reconcileMockDataKeys';
+import coerceObjectsToPrimitivesBySchema from '~codeyam/ai/src/lib/dataStructure/helpers/coerceObjectsToPrimitivesBySchema';
 
 /**
  * Normalize useParams mock data by fixing the React Router splat param (*).
@@ -43,6 +44,108 @@ function normalizeParamsMockData(
   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
@@ -90,6 +193,36 @@ const safeString = (s: string, level: number) => {
   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:
@@ -208,6 +341,38 @@ function extractAllKeys(obj: JsonTypeDefinition | undefined): string[] {
  */
 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.
@@ -234,6 +399,59 @@ const isBareTypeMarker = (value: unknown): boolean => {
   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
@@ -314,10 +532,12 @@ const normalizeMockData = (
         }
       }
       // 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
         )
@@ -445,7 +665,7 @@ const jsonToCode = (
               `${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] as object);
 
           // Check if this is a nested function signature (e.g., "postMessage(message, targetOrigin)": { signature: [...] })
@@ -630,13 +850,19 @@ const jsonToCode = (
               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
+                ? stringValue.replace(/\n/g, '\\n')
                 : 'Promise.resolve()';
               outputValue = `() => ${promiseExpr}`;
               console.log(
@@ -648,10 +874,49 @@ const jsonToCode = (
                 `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)}...`,
-              );
+              // 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)}"`;
@@ -679,9 +944,22 @@ const jsonToCode = (
             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 {
           // Skip plain keys that have function-call versions (at the same nesting level where
@@ -747,11 +1025,24 @@ 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,
   );
 
+  // Coerce objects/arrays to primitives when the schema expects a primitive type.
+  // Defense-in-depth: the generation pipeline already runs this coercion, but
+  // data in the DB may have wrong types from older code versions or edge cases.
+  // This prevents runtime errors like "TypeError: body.match is not a function".
+  if (dataForMocks) {
+    coerceObjectsToPrimitivesBySchema(reconciledMockData, dataForMocks);
+  }
+
+  // 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}
@@ -789,11 +1080,24 @@ import React from 'react';
     };
 
     // Reconcile scenario-specific mock data keys as well
-    const scenarioMockData = reconcileMockDataKeys(
+    const reconciledScenarioMockData = reconcileMockDataKeys(
       rawScenarioMockData,
       expectedKeys,
     );
 
+    // Coerce objects/arrays to primitives for non-default scenario data too
+    if (dataForMocks) {
+      coerceObjectsToPrimitivesBySchema(
+        reconciledScenarioMockData,
+        dataForMocks,
+      );
+    }
+
+    // Convert comma-separated strings to arrays for scenario data
+    const scenarioMockData = convertCommaSeparatedStringsToArrays(
+      reconciledScenarioMockData,
+    );
+
     const mergedArguments = defaultArguments.map((defaultArg, index) => {
       return deepMerge(defaultArg, scenarioArguments[index]);
     });

package/analyzer-template/project/writeScenarioClientWrapper.ts

@@ -0,0 +1,21 @@
+import { writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import type { Scenario } from '~codeyam/types';
+import { generateScenarioClientWrapper } from '~codeyam/generate';
+
+/**
+ * Writes the ScenarioClientWrapper component to the mocks directory.
+ * This client component is used by Server Component pages to handle
+ * interactive features (iframe messaging, console interception, etc.)
+ */
+export default async function writeScenarioClientWrapper(
+  scenario: Scenario,
+  mocksDir: string,
+): Promise<string> {
+  const content = generateScenarioClientWrapper(scenario);
+  const filePath = join(mocksDir, 'ScenarioClientWrapper.tsx');
+
+  await writeFile(filePath, content);
+
+  return filePath;
+}