@codeyam/codeyam-cli 0.1.0-staging.d3e886e → 0.1.0-staging.d57a578

package/analyzer-template/playwright/captureFromUrl.ts

@@ -22,6 +22,7 @@ interface CaptureArgs {
   projectId: string;
   projectRoot: string;
   viewportWidth?: number;
+  captureCurrentUrl?: boolean;
 }
 
 async function main() {
@@ -100,71 +101,6 @@ async function main() {
   }
   const projectSlug = project.slug;
 
-  // Regenerate MockData.tsx to ensure dev server has the latest scenario data
-  // This is critical for recapture to show updated data
-  console.log(
-    `[Capture] Regenerating MockData.tsx for scenario: ${scenario.name}`,
-  );
-
-  try {
-    // Load config to find which webapp this analysis belongs to
-    const configPath = path.join(projectRoot, '.codeyam', 'config.json');
-    const configData = await fs.readFile(configPath, 'utf-8');
-    const projectConfig = JSON.parse(configData);
-
-    const filePath = analysis.file.path;
-    console.log(`[Capture] Analysis file path: ${filePath}`);
-
-    // Find which webapp this file belongs to
-    const webapp = projectConfig.webapps?.find((w: { path: string }) =>
-      filePath.startsWith(w.path),
-    );
-
-    if (webapp) {
-      console.log(`[Capture] Found webapp: ${webapp.path}`);
-
-      // Construct the mocksDir path in the local dev environment
-      const localDevProjectPath = `/tmp/codeyam/local-dev/${projectSlug}/project`;
-      const mocksDir = path.join(
-        localDevProjectPath,
-        webapp.path,
-        webapp.appDirectory || 'app',
-        '__codeyamMocks__',
-      );
-
-      console.log(`[Capture] MockData.tsx directory: ${mocksDir}`);
-
-      // Ensure the analysis has its scenarios attached
-      const analysisWithScenarios = {
-        ...analysis,
-        scenarios: analysis.scenarios || [scenario],
-      };
-
-      // If the current scenario isn't in the scenarios array, add it
-      if (!analysisWithScenarios.scenarios.find((s) => s.id === scenario.id)) {
-        analysisWithScenarios.scenarios.push(scenario);
-      }
-
-      await writeMockDataTsx(analysisWithScenarios, scenario, mocksDir);
-      console.log(`[Capture] MockData.tsx regenerated successfully`);
-
-      // Give the dev server time to hot-reload the updated MockData.tsx
-      console.log(`[Capture] Waiting for dev server to reload...`);
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      console.log(`[Capture] Proceeding with screenshot capture`);
-    } else {
-      console.log(
-        `[Capture] WARNING: Could not find webapp for file ${filePath}, skipping MockData.tsx regeneration`,
-      );
-    }
-  } catch (mockError) {
-    console.error(
-      `[Capture] WARNING: Failed to regenerate MockData.tsx:`,
-      mockError,
-    );
-    // Continue with screenshot capture even if MockData regeneration fails
-  }
-
   // Screenshot path convention: {slug}/{fileId}/{analysisId}/{scenarioName}.png
   // This matches the original capture system in capture.ts
   const sanitizedName = scenario.name
@@ -186,27 +122,98 @@ async function main() {
 
   await fs.mkdir(capturesDir, { recursive: true });
 
-  // Take screenshot
-  console.log(`[Capture] Taking screenshot of: ${url}`);
+  // Helper: take screenshot and verify
+  const captureScreenshot = async () => {
+    console.log(`[Capture] Taking screenshot of: ${url}`);
+
+    const result = await takeElementScreenshot({
+      url,
+      selector: '#component',
+      screenshotPath,
+      viewportWidth,
+      blockPatterns: ['fonts.googleapis.com', 'fonts.gstatic.com'],
+    });
+
+    if (!result.screenshotTaken) {
+      console.error(`[Capture] ERROR: Screenshot was not taken`);
+      process.exit(1);
+    }
 
-  const result = await takeElementScreenshot({
-    url,
-    selector: '#component',
-    screenshotPath,
-    viewportWidth,
-    blockPatterns: ['fonts.googleapis.com', 'fonts.gstatic.com'],
-  });
+    console.log(`[Capture] Screenshot taken successfully`);
 
-  if (!result.screenshotTaken) {
-    console.error(`[Capture] ERROR: Screenshot was not taken`);
-    process.exit(1);
-  }
+    const stats = await fs.stat(screenshotPath);
+    console.log(`[Capture] File saved: ${stats.size} bytes`);
+  };
+
+  // Helper: regenerate MockData.tsx
+  const regenerateMockData = async () => {
+    console.log(
+      `[Capture] Regenerating MockData.tsx for scenario: ${scenario.name}`,
+    );
 
-  console.log(`[Capture] Screenshot taken successfully`);
+    try {
+      const configPath = path.join(projectRoot, '.codeyam', 'config.json');
+      const configData = await fs.readFile(configPath, 'utf-8');
+      const projectConfig = JSON.parse(configData);
 
-  // Verify file was written
-  const stats = await fs.stat(screenshotPath);
-  console.log(`[Capture] File saved: ${stats.size} bytes`);
+      const filePath = analysis.file!.path;
+      console.log(`[Capture] Analysis file path: ${filePath}`);
+
+      const webapp = projectConfig.webapps?.find((w: { path: string }) =>
+        filePath.startsWith(w.path),
+      );
+
+      if (webapp) {
+        console.log(`[Capture] Found webapp: ${webapp.path}`);
+
+        const localDevProjectPath = `/tmp/codeyam/local-dev/${projectSlug}/project`;
+        const mocksDir = path.join(
+          localDevProjectPath,
+          webapp.path,
+          webapp.appDirectory || 'app',
+          '__codeyamMocks__',
+        );
+
+        console.log(`[Capture] MockData.tsx directory: ${mocksDir}`);
+
+        const analysisWithScenarios = {
+          ...analysis,
+          scenarios: analysis.scenarios || [scenario],
+        };
+
+        if (
+          !analysisWithScenarios.scenarios.find((s) => s.id === scenario.id)
+        ) {
+          analysisWithScenarios.scenarios.push(scenario);
+        }
+
+        await writeMockDataTsx(analysisWithScenarios, scenario, mocksDir);
+        console.log(`[Capture] MockData.tsx regenerated successfully`);
+      } else {
+        console.log(
+          `[Capture] WARNING: Could not find webapp for file ${filePath}, skipping MockData.tsx regeneration`,
+        );
+      }
+    } catch (mockError) {
+      console.error(
+        `[Capture] WARNING: Failed to regenerate MockData.tsx:`,
+        mockError,
+      );
+    }
+  };
+
+  if (config.captureCurrentUrl) {
+    // Capture what's currently displayed first, then create MockData for future use
+    await captureScreenshot();
+    await regenerateMockData();
+  } else {
+    // Default: regenerate first, wait for HMR, then capture
+    await regenerateMockData();
+    console.log(`[Capture] Waiting for dev server to reload...`);
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    console.log(`[Capture] Proceeding with screenshot capture`);
+    await captureScreenshot();
+  }
 
   // Update scenario metadata with new screenshot path
   const updatedMetadata = {

package/analyzer-template/project/constructMockCode.ts

@@ -341,6 +341,7 @@ export default function constructMockCode(
   let dataStructureValue: string | undefined;
   let foundEntityWithSignature = false;
   let signatureSchema: DataStructure['signatureSchema'] | undefined;
+  let baseSchemaHasMethodCalls = false;
 
   entitySearch: for (const filePath in dependencySchemas) {
     for (const entityName in dependencySchemas[filePath]) {
@@ -378,8 +379,53 @@ export default function constructMockCode(
       });
 
       if (dataStructurePath) {
+        // Start with the base entity's return value schema
+        const baseReturnValueSchema =
+          dependencySchemas[filePath][entityName]?.returnValueSchema;
+        const mergedSchema = {
+          ...baseReturnValueSchema,
+        };
+
+        // Check if the base schema has method-call entries (e.g., .map().functionCallReturnValue)
+        // When it does, the scenario data is stored as an object with method keys, and
+        // array prototype methods need mock implementations. When it doesn't, the data
+        // is a raw array and native methods like .includes() work directly.
+        if (baseReturnValueSchema) {
+          baseSchemaHasMethodCalls = Object.keys(baseReturnValueSchema).some(
+            (k) =>
+              k.startsWith(baseMockName + '.') &&
+              k.includes('(') &&
+              k.includes('.functionCallReturnValue'),
+          );
+        }
+
+        // Merge in method-call dependencies that are separate entries.
+        // e.g., "activityTypes.find((a) => a.value === type)" is a separate dependency
+        // for a .find() call on activityTypes. We need to include these with a
+        // .functionCallReturnValue path so constructMockCode generates callable mock methods.
+        for (const otherEntityName in dependencySchemas[filePath]) {
+          if (otherEntityName === entityName) continue;
+          if (
+            otherEntityName.startsWith(baseMockName + '.') &&
+            otherEntityName.includes('(')
+          ) {
+            // Add a functionCallReturnValue entry for this method call.
+            // This ensures constructMockCode treats it as a function that returns data,
+            // generating a proper mock method with data lookup.
+            const fcrvPath = `${otherEntityName}.functionCallReturnValue`;
+            if (!mergedSchema[fcrvPath]) {
+              // Infer the return type from the method-call dependency's schema
+              const otherSchema =
+                dependencySchemas[filePath][otherEntityName]?.returnValueSchema;
+              // Look for element type (baseMockName[]) or fall back to 'unknown'
+              const elementType = otherSchema?.[`${baseMockName}[]`];
+              mergedSchema[fcrvPath] = elementType || 'unknown';
+            }
+          }
+        }
+
         relevantReturnValueSchema = fillInDirectSchemaGapsAndUnknowns({
-          schema: dependencySchemas[filePath][entityName]?.returnValueSchema,
+          schema: mergedSchema,
         });
         // NOTE: clearAttributesFromMapping is disabled because it deletes
         // method calls on arrays (like .eq() after functionCallReturnValue: 'array')
@@ -462,7 +508,10 @@ export default function constructMockCode(
       const argsString = args.join(', ');
 
       // Generate empty mock function
-      return `function ${mockName}(${argsString}) {
+      // Use baseMockName (not mockName) because mockName may contain a full call
+      // signature with argument expressions (e.g., "logSignOutAction(sessionUser.id, ...)")
+      // which would produce invalid syntax as function parameter names.
+      return `function ${baseMockName}(${argsString}) {
   // Empty mock - original function mocked out
 }`;
     }
@@ -510,13 +559,13 @@ export default function constructMockCode(
 
     if (firstArgIsFunctionOrUnknown && returnsFunction) {
       // HOC pattern detected - return the first argument
-      return `function ${mockName}(${argsString}) {
+      return `function ${baseMockName}(${argsString}) {
   return arg1;
 }`;
     }
 
     // Generate empty mock function
-    return `function ${mockName}(${argsString}) {
+    return `function ${baseMockName}(${argsString}) {
   // Empty mock - original function mocked out
 }`;
   }
@@ -697,10 +746,6 @@ export default function constructMockCode(
       }
 
       const addReturnValueFunctionAccessor = (dataPath: string) => {
-        // Add function call accessor if:
-        // - There are actual arguments, OR
-        // - This is a callable (not a method that returns an array directly)
-        // For methods like getAll() that return arrays, the data is at ["getAll()"] not ["getAll()"]["()"]
         if (
           returnValue.returnsFunctionArgs &&
           (returnValue.returnsFunctionArgs.length > 0 ||
@@ -709,7 +754,17 @@ export default function constructMockCode(
           if (returnValue.isArray) {
             dataPath = `${dataPath}${optionalAccess('[0]')}`;
           }
-          dataPath = `${dataPath}${optionalAccess(`(${safeString(returnValue.returnsFunctionArgs.join(', '))})`)}`;
+          // Only add the function call accessor ?.["(args)"] when there are actual
+          // arguments. When returnsFunctionArgs is empty [] (function-returns-function
+          // with no specific arg patterns), skip the ?.["()"] because:
+          // 1. preprocessSchemaForMocks collapses nested functionCallReturnValue chains
+          //    into flat entries (e.g., getTranslate() = string, not {(): string})
+          // 2. The mock data is a flat value, so ?.["()"] on a string returns undefined
+          // 3. constructContent still wraps the return in a function (via returnsFunctionArgs)
+          //    so the function-returns-function behavior is preserved without data nesting
+          if (returnValue.returnsFunctionArgs.length > 0) {
+            dataPath = `${dataPath}${optionalAccess(`(${safeString(returnValue.returnsFunctionArgs.join(', '))})`)}`;
+          }
         }
         return dataPath;
       };
@@ -750,29 +805,6 @@ export default function constructMockCode(
         hasNoReturnData,
       } = returnValue;
 
-      // When an array has differentiated indices ([0], [1], etc.), filter out any
-      // non-index items from nested. These non-index items come from generic [] paths
-      // like [].filter or [].sort, which describe element properties, not array elements.
-      // Including them would generate invalid syntax like "sort: ..." inside an array literal.
-      const hasDifferentiatedIndices =
-        isArray &&
-        nested &&
-        nested.some((n) => n.name.match(/^\[\d+\]$/) && n.name !== '[0]');
-      const filteredNested =
-        hasDifferentiatedIndices && nested
-          ? nested.filter((n) => n.name.match(/^\[\d+\]$/))
-          : nested;
-
-      const nestedContent: (string | undefined)[] = (filteredNested ?? []).map(
-        (nestedItem) => {
-          const nestedContent = constructReturnValueString(
-            nestedItem,
-            dataPaths,
-          );
-          return nestedContent;
-        },
-      );
-
       // Array prototype methods that should be ignored when building mocks
       // (these work on any array - we don't need to mock them)
       const ARRAY_PROTOTYPE_METHODS = new Set([
@@ -817,6 +849,48 @@ export default function constructMockCode(
         'length',
       ]);
 
+      // When an array has differentiated indices ([0], [1], etc.), filter out any
+      // non-index items from nested. These non-index items come from generic [] paths
+      // like [].filter or [].sort, which describe element properties, not array elements.
+      // Including them would generate invalid syntax like "sort: ..." inside an array literal.
+      const hasDifferentiatedIndices =
+        isArray &&
+        nested &&
+        nested.some((n) => n.name.match(/^\[\d+\]$/) && n.name !== '[0]');
+      let filteredNested =
+        hasDifferentiatedIndices && nested
+          ? nested.filter((n) => n.name.match(/^\[\d+\]$/))
+          : nested;
+
+      // When a variable IS an array (not a function returning an array),
+      // filter out array prototype methods like .includes(), .filter(), etc.
+      // ONLY when the base schema has no method-call entries. When the base
+      // schema has methods (e.g., .map().functionCallReturnValue), the scenario
+      // data is stored as an object with method-call keys, and ALL methods
+      // need mock implementations. When the base schema has no methods, the
+      // data is a raw array and native methods like .includes() work directly.
+      if (
+        isArray &&
+        !returnsFunctionArray &&
+        !baseSchemaHasMethodCalls &&
+        filteredNested
+      ) {
+        filteredNested = filteredNested.filter((n) => {
+          const methodName = n.name.replace(/[<(].*$/, '');
+          return !ARRAY_PROTOTYPE_METHODS.has(methodName);
+        });
+      }
+
+      const nestedContent: (string | undefined)[] = (filteredNested ?? []).map(
+        (nestedItem) => {
+          const nestedContent = constructReturnValueString(
+            nestedItem,
+            dataPaths,
+          );
+          return nestedContent;
+        },
+      );
+
       const levelContentItems = [];
       // Add spread for data paths when:
       // - Not a function returning an array, OR function returns array with custom methods
@@ -1636,19 +1710,38 @@ export default function constructMockCode(
             fallbackContent;
           content = `${cleanOutTypes(name)}: ${isAsyncFunction ? 'async ' : ''}(${argsString}) => {\n${indent(funcContents)}\n}`;
         } else {
-          // No argument variants - use existing behavior
-          // But if there's nested content, we need to include it in the return object
-          // (similar to how argument variant branches handle this at line 1070-1072)
-          const hasNestedContent = validNestedContent.length > 0;
-          let funcReturnContents: string;
-          if (hasNestedContent && levelContentItems.length > 1) {
-            // Include both spread and nested content in the return
-            funcReturnContents = `{\n${indent(levelContents)}\n}`;
+          // No argument variants
+          // Check if this is an array method callback containing JSX.
+          // JSX can't be serialized to JSON, so the LLM generates [{}] as data.
+          // Instead of returning that unusable data, generate a passthrough that
+          // calls the real callback on the best available array data from siblings.
+          const containsJsx = dataPaths.some((p) => /<[A-Z]/.test(p));
+          const isArrayMethod = ARRAY_PROTOTYPE_METHODS.has(name);
+
+          if (containsJsx && isArrayMethod && dataPaths.length > 0) {
+            // Extract parent data path by removing the last ?.["..."] segment
+            const parentPath = dataPaths[0].replace(/\?\.\["[^"]*"\]$/, '');
+            const funcLines = [
+              `const _d = ${parentPath};`,
+              `const _a = Object.values(_d || {}).filter(v => Array.isArray(v) && v.length > 0 && v.some(i => i && typeof i === "object" && Object.keys(i).length > 0)).sort((a, b) => b.length - a.length);`,
+              `return _a[0] ? _a[0].${name}(${argsString}) : []`,
+            ];
+            const funcContents = funcLines.join('\n');
+            content = `${cleanOutTypes(name)}: ${isAsyncFunction ? 'async ' : ''}(${argsString}) => {\n${indent(funcContents)}\n}`;
           } else {
-            funcReturnContents = returnValueContents;
+            // But if there's nested content, we need to include it in the return object
+            // (similar to how argument variant branches handle this at line 1070-1072)
+            const hasNestedContent = validNestedContent.length > 0;
+            let funcReturnContents: string;
+            if (hasNestedContent && levelContentItems.length > 1) {
+              // Include both spread and nested content in the return
+              funcReturnContents = `{\n${indent(levelContents)}\n}`;
+            } else {
+              funcReturnContents = returnValueContents;
+            }
+            const funcContents = `return ${funcReturnContents}`;
+            content = `${cleanOutTypes(name)}: ${isAsyncFunction ? 'async ' : ''}(${argsString}) => {\n${indent(funcContents)}\n}`;
           }
-          const funcContents = `return ${funcReturnContents}`;
-          content = `${cleanOutTypes(name)}: ${isAsyncFunction ? 'async ' : ''}(${argsString}) => {\n${indent(funcContents)}\n}`;
         }
       } else {
         if (!isValidKey(name)) {
@@ -2288,6 +2381,23 @@ export default function constructMockCode(
     }
   }
 
+  // Post-processing: When the root functionCallReturnValue is typed as "function" but the
+  // return value also has nested properties (methods like .from(), .auth, etc.), it's actually
+  // an object, not a function to be called. Clear returnsFunctionArgs to prevent double-wrapping
+  // (adding an extra () => { return { ... } } wrapper and ["()"] data paths).
+  // This handles cases like Supabase's createClient() which returns an object with methods.
+  // Only applied to the root level - nested parts that are functions with methods (like
+  // useSearchParams()[1] which is a setter function with .set() and .delete()) should keep
+  // their returnsFunctionArgs since they genuinely ARE functions.
+  if (
+    returnValueParts.returnsFunctionArgs &&
+    returnValueParts.returnsFunctionArgs.length === 0 &&
+    returnValueParts.nested &&
+    returnValueParts.nested.length > 0
+  ) {
+    returnValueParts.returnsFunctionArgs = undefined;
+  }
+
   const contents = constructReturnValueString(returnValueParts);
 
   if (mockNameParts.length > 1) {
@@ -2360,16 +2470,26 @@ export default function constructMockCode(
       const nameAssignment = isErrorSubclass
         ? `this.name = '${baseMockName}';`
         : '';
-      // Use the safe function name for the class definition
-      const className = mockNameIsCallSignature
-        ? derivedFunctionName
-        : baseMockName;
+      // Use the base class name for the class definition, not the call-signature-derived name.
+      // When mockName is "StatsCalculator(supabase)", baseMockName is "StatsCalculator"
+      // and derivedFunctionName would be "StatsCalculator_supabase" which is wrong.
+      // Classes are instantiated with `new ClassName(args)` so the name must match the original.
+      const className = baseMockName;
+
+      // Use the already-generated contents (which has proper function wrappers for methods)
+      // instead of raw scenarios().data() which would create non-callable string-keyed properties.
+      // For classes with methods like calculateStats(), the contents will have:
+      //   { calculateStats: (...args) => scenarios().data()?.["key"]?.["calculateStats(...)"], ... }
+      // which makes methods callable on the instance.
+      const classContents = enhancedContents.trim().startsWith('{')
+        ? enhancedContents
+        : `scenarios().data()?.${quotePropertyKey(dataKey)} || {}`;
 
       return `class ${className}${isErrorSubclass ? ' extends Error' : ''} {
   constructor(message) {
     ${superCall}
     ${nameAssignment}
-    Object.assign(this, scenarios().data()?.${quotePropertyKey(dataKey)} || {});
+    Object.assign(this, ${classContents});
   }
 }`;
     }

package/analyzer-template/project/orchestrateCapture.ts

@@ -32,7 +32,10 @@ import type {
 } from './orchestrateCapture/taskRunner';
 import KyselyAnalysisLoader from './orchestrateCapture/KyselyAnalysisLoader';
 
-const MAX_BATCH_SIZE = 6;
+// Temporarily set to 1 (effectively disabling batching) to work around reliability
+// issues where multi-analysis batches cause cascading failures. Revisit once we
+// reassess the SQS protocol and worker error handling.
+const MAX_BATCH_SIZE = 1;
 const POLLING_INTERVAL = 30 * 1000; // 30 seconds
 const TASK_HEALTH_CHECK_INTERVAL = 60 * 1000; // 1 minute
 const ANALYSIS_TIMEOUT = 20 * 60 * 1000;

package/analyzer-template/project/reconcileMockDataKeys.ts

@@ -26,22 +26,21 @@ export function reconcileMockDataKeys(
         ? reconcileMockDataKeys(value as Record<string, unknown>, expectedKeys)
         : value;
 
-    // Check if key matches an expected key exactly
-    if (expectedKeys.includes(key)) {
-      result[key] = reconciledValue;
-      continue;
-    }
-
-    // Check if this is a flat dotted key that should be converted to nested structure
-    // e.g., "trpc.fastener.getAttributeValues.useQuery({ ... })"
+    // Check if this is a flat dotted key (method chain) that should be nested.
+    // e.g., "ZId.safeParse(params.surveyId)" → { ZId: { "safeParse(params.surveyId)": ... } }
+    // e.g., "trpc.fastener.getAttributeValues.useQuery({ ... })" → nested structure
+    // constructMockCode generates nested lookups like data["ZId"]["safeParse(...)"]
+    // for method chains, so the data must be nested to match.
     const flatKeyParts = parseFlatDottedKey(key);
     if (flatKeyParts && flatKeyParts.length > 1) {
-      // Check if the parts match expected keys (indicating this should be nested)
-      const partsMatchExpected = flatKeyParts.some((part) =>
-        expectedKeys.includes(part),
-      );
-      if (partsMatchExpected) {
-        // Convert flat key to nested structure and merge
+      // Nest when:
+      // 1. The full key matches an expected key exactly (e.g., "ZId.safeParse(params.surveyId)")
+      // 2. OR individual parts match expected keys (e.g., "trpc" is an expected key)
+      //    This handles LLM-generated flat keys that should be nested (Issue 8)
+      const shouldNest =
+        expectedKeys.includes(key) ||
+        flatKeyParts.some((part) => expectedKeys.includes(part));
+      if (shouldNest) {
         deepMergeIntoResult(
           result,
           flatKeyParts,
@@ -52,6 +51,12 @@ export function reconcileMockDataKeys(
       }
     }
 
+    // Check if key matches an expected key exactly (for non-dotted keys)
+    if (expectedKeys.includes(key)) {
+      result[key] = reconciledValue;
+      continue;
+    }
+
     // Try to find closest match using existing logic
     const closestKey = findClosestKey(key, expectedKeys);
     if (closestKey) {

package/analyzer-template/project/start.ts

@@ -313,6 +313,9 @@ async function main({
               : envConfig.entityShas,
           full: orchestrateCapture === 'local-sequential',
           taskRunner,
+          // Poll faster in local mode - no DB load concerns like in cloud
+          pollingInterval:
+            orchestrateCapture === 'local-sequential' ? 5 * 1000 : undefined,
           // Always track capture progress on the commit, even when not filtering by it.
           metadataCommit: sharedContext.commit ?? sharedContext.branchCommit,
         });

package/analyzer-template/project/startScenarioCapture.ts

@@ -6,6 +6,7 @@ import writeUniversalMocks from './writeUniversalMocks';
 import writeScenario from './writeScenario';
 import writeSimpleRoot from './writeSimpleRoot';
 import writeCodeYamPage from './writeCodeYamPage';
+import writeClientLogRoute from './writeClientLogRoute';
 import {
   runMultiScenarioServer,
   ScenarioToCapture,
@@ -497,6 +498,14 @@ export async function startScenarioCapture({
       );
       allGeneratedFiles.push(codeyamPagePath);
 
+      // Write client-log API route so client-side errors appear in the server log
+      const clientLogPath = await writeClientLogRoute(
+        project,
+        framework,
+        analysis.filePath,
+      );
+      if (clientLogPath) allGeneratedFiles.push(clientLogPath);
+
       // Persist file tracking for crash/debug recovery
       writeTrackingFile(allGeneratedFiles, backupFiles);
     }