@codeyam/codeyam-cli 0.1.0-staging.b8a55ba → 0.1.0-staging.b8b17a5

package/analyzer-template/packages/database/src/lib/updateFreshAnalysisStatusWithScenarios.ts

@@ -16,79 +16,95 @@ export default async function updateFreshAnalysisStatusWithScenarios(
   ) => void,
   source = 'capture',
 ): Promise<{ status: AnalysisStatus; scenarios: Scenario[] } | null> {
-  try {
-    return await getDatabase()
-      .transaction()
-      .execute(async (trx) => {
-        // Load analysis
-        const dbAnalysis = await trx
-          .selectFrom('analyses')
-          .selectAll()
-          .where('id', '=', id)
-          .executeTakeFirst();
+  const MAX_RETRIES = 4;
+  const BASE_DELAY_MS = 250;
 
-        if (!dbAnalysis) {
-          awsLog(
-            `CodeYam Error: updateFreshAnalysisStatusWithScenarios(): Analysis ${id} not found (source: ${source})`,
-            null,
-            { analysisId: id, source },
-          );
-          return null;
-        }
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await getDatabase()
+        .transaction()
+        .execute(async (trx) => {
+          // Load analysis
+          const dbAnalysis = await trx
+            .selectFrom('analyses')
+            .selectAll()
+            .where('id', '=', id)
+            .executeTakeFirst();
 
-        // Load scenarios for this analysis
-        const dbScenarios = await trx
-          .selectFrom('scenarios')
-          .selectAll()
-          .where('analysis_id', '=', id)
-          .execute();
+          if (!dbAnalysis) {
+            awsLog(
+              `CodeYam Error: updateFreshAnalysisStatusWithScenarios(): Analysis ${id} not found (source: ${source})`,
+              null,
+              { analysisId: id, source },
+            );
+            return null;
+          }
+
+          // Load scenarios for this analysis
+          const dbScenarios = await trx
+            .selectFrom('scenarios')
+            .selectAll()
+            .where('analysis_id', '=', id)
+            .execute();
 
-        const analysis = dbToAnalysis(dbAnalysis);
+          const analysis = dbToAnalysis(dbAnalysis);
 
-        // Convert DB scenarios to Scenario type
-        const scenarios: Scenario[] = dbScenarios.map((s) => ({
-          id: s.id,
-          projectId: s.project_id,
-          analysisId: s.analysis_id,
-          name: s.name,
-          description: s.description,
-          metadata: s.metadata || {},
-          previousVersionId: s.previous_version_id,
-        }));
+          // Convert DB scenarios to Scenario type
+          const scenarios: Scenario[] = dbScenarios.map((s) => ({
+            id: s.id,
+            projectId: s.project_id,
+            analysisId: s.analysis_id,
+            name: s.name,
+            description: s.description,
+            metadata: s.metadata || {},
+            previousVersionId: s.previous_version_id,
+          }));
 
-        fn(analysis.status, scenarios, analysis);
+          fn(analysis.status, scenarios, analysis);
 
-        // Update analysis status
-        await trx
-          .updateTable('analyses')
-          .set({ status: JSON.stringify(analysis.status) })
-          .where('id', '=', id)
-          .execute();
+          // Update analysis status
+          await trx
+            .updateTable('analyses')
+            .set({ status: JSON.stringify(analysis.status) })
+            .where('id', '=', id)
+            .execute();
 
-        // Update scenarios if they were modified
-        for (const scenario of scenarios) {
-          if (scenario.id) {
-            await trx
-              .updateTable('scenarios')
-              .set({
-                name: scenario.name,
-                description: scenario.description,
-                metadata: JSON.stringify(scenario.metadata),
-                previous_version_id: scenario.previousVersionId,
-              })
-              .where('id', '=', scenario.id)
-              .execute();
+          // Update scenarios if they were modified
+          for (const scenario of scenarios) {
+            if (scenario.id) {
+              await trx
+                .updateTable('scenarios')
+                .set({
+                  name: scenario.name,
+                  description: scenario.description,
+                  metadata: JSON.stringify(scenario.metadata),
+                  previous_version_id: scenario.previousVersionId,
+                })
+                .where('id', '=', scenario.id)
+                .execute();
+            }
           }
-        }
 
-        return { status: analysis.status, scenarios };
-      });
-  } catch (error) {
-    awsLog(
-      `CodeYam Error: updateFreshAnalysisStatusWithScenarios(): Transaction failed for analysis ${id} (source: ${source})`,
-      error,
-      { analysisId: id, source },
-    );
-    return null;
+          return { status: analysis.status, scenarios };
+        });
+    } catch (error) {
+      const isBusy =
+        error instanceof Error && error.message.includes('database is locked');
+
+      if (isBusy && attempt < MAX_RETRIES) {
+        const delay = BASE_DELAY_MS * Math.pow(2, attempt);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        continue;
+      }
+
+      awsLog(
+        `CodeYam Error: updateFreshAnalysisStatusWithScenarios(): Transaction failed for analysis ${id} (source: ${source})${isBusy ? ` after ${attempt + 1} attempts` : ''}`,
+        error,
+        { analysisId: id, source },
+      );
+      return null;
+    }
   }
+
+  return null;
 }

package/analyzer-template/packages/database/src/lib/userScenarioToDb.ts

@@ -1,7 +1,7 @@
 import { UserScenario } from '~codeyam/types';
 import { Insertable } from 'kysely';
 import { UserScenariosTable } from './kysely/tables/userScenariosTable';
-import { randomUUID } from 'crypto';
+const randomUUID = () => crypto.randomUUID();
 
 export default function userScenarioToDb(
   userScenario: UserScenario,

package/analyzer-template/packages/generate/index.ts

@@ -1,6 +1,8 @@
 export { default as getComponentImportStatements } from './src/lib/getComponentImportStatements';
 export { default as componentScenarioPageRemix } from './src/lib/componentScenarioPage/componentScenarioPageRemix';
 export { default as componentScenarioPageNext } from './src/lib/componentScenarioPage/componentScenarioPageNext';
+export { default as generateScenarioServerComponent } from './src/lib/componentScenarioPage/generateScenarioServerComponent';
+export { default as generateScenarioClientWrapper } from './src/lib/componentScenarioPage/generateScenarioClientWrapper';
 export { default as getComponentScenarioPath } from './src/lib/getComponentScenarioPath';
 export { default as libDemoComponent } from './src/lib/libDemoComponent';
 export { default as directExecutionScript } from './src/lib/directExecutionScript';
@@ -9,4 +11,5 @@ export { default as safeFolder } from './src/lib/safeFolder';
 export { default as deepMerge } from './src/lib/deepMerge';
 export { default as simpleRootRemix } from './src/lib/simpleRootRemix';
 export { default as mergeRootRemix } from './src/lib/mergeRootRemix';
+export { default as scenarioComponentForServer } from './src/lib/scenarioComponentForServer';
 export { PLACEHOLDER_IMAGE_SRC } from './src/lib/constants';

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/componentScenarioPageNext.ts

@@ -6,6 +6,7 @@ import escapeQuotes from '../escapeQuotes';
 import getIFrameMessageListenerCode from './getIFrameMessageListenerCode';
 import getImageReplacementCode from './getImageReplacementCode';
 import getNextJsErrorClosingCode from './getNextJsErrorClosingCode';
+import generateScenarioServerComponent from './generateScenarioServerComponent';
 
 const VERSION = '0.5.1';
 
@@ -28,6 +29,21 @@ export default function componentScenarioPageNext({
 }) {
   const fileName = file.name.split('.')[0];
 
+  // For async components (Server Components), generate a Server Component page
+  // that uses a separate client wrapper for interactive features
+  if (entity.metadata?.isAsync) {
+    return generateScenarioServerComponent({
+      file,
+      entity,
+      analysis,
+      currentPath,
+      appPath,
+      scenario,
+      relativeMocksDir,
+    });
+  }
+
+  // For non-async components, use the existing client component approach
   return `/* eslint-disable */
   "use client";
   import {
@@ -58,7 +74,7 @@ ${getComponentImportStatement({
 ${getImageReplacementCode()}
 
 function Scenario({ name, width, height, children }: { name: string, width: string, height: string, children: ReactNode }) {
-  
+
   useEffect(() => {
     if (typeof window === 'undefined') return;
 

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/generateScenarioClientWrapper.ts

@@ -0,0 +1,221 @@
+import type { Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import getImageReplacementCode from './getImageReplacementCode';
+import getNextJsErrorClosingCode from './getNextJsErrorClosingCode';
+
+/**
+ * Generates the ScenarioClientWrapper component code.
+ * This is a Client Component that handles all the interactive features
+ * (iframe messaging, console interception, error closing, etc.)
+ * while allowing the actual page to be a Server Component.
+ */
+export default function generateScenarioClientWrapper(
+  scenario: Scenario,
+): string {
+  const safeScenarioName = safeFileName(scenario.name);
+
+  return `"use client";
+/* eslint-disable */
+// ScenarioClientWrapper - Client Component for interactive features
+// This wraps Server Components to add client-side interactivity
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import { scenarios } from "./MockData_${safeScenarioName}";
+
+// Inject image interception code at module level
+${getImageReplacementCode()}
+
+interface ScenarioClientWrapperProps {
+  scenarioName: string;
+  fileName: string;
+  version: string;
+  children: ReactNode;
+}
+
+export function ScenarioClientWrapper({
+  scenarioName,
+  fileName,
+  version,
+  children,
+}: ScenarioClientWrapperProps) {
+  const [internalVersion, setInternalVersion] = useState(1);
+  const [searchParams] = useState(() =>
+    typeof window !== 'undefined'
+      ? new URLSearchParams(window.location.search)
+      : new URLSearchParams()
+  );
+  const widthOverride = searchParams.get('width');
+  const heightOverride = searchParams.get('height') || 'auto';
+
+  // Set page metadata
+  useEffect(() => {
+    document.title = \`\${fileName}: \${scenarioName} CodeYam Demo v\${version}\`;
+    let metaDesc = document.querySelector('meta[name="description"]');
+    if (!metaDesc) {
+      metaDesc = document.createElement('meta');
+      metaDesc.setAttribute('name', 'description');
+      document.head.appendChild(metaDesc);
+    }
+    metaDesc.setAttribute('content', \`This is a demo of the \${fileName} component\`);
+  }, [fileName, scenarioName, version]);
+
+  // Message posting helper
+  const respond = useCallback((message: any) => {
+    try {
+      window.parent.postMessage({
+        type: 'codeyam-update',
+        name: scenarioName,
+        message,
+      }, '*');
+    } catch (e) {
+      console.warn('Error posting message to parent', message, e);
+    }
+  }, [scenarioName]);
+
+  // Handle data override messages from parent
+  useEffect(() => {
+    const eventListener = (event: MessageEvent) => {
+      if (event.data.type === 'codeyam-override-data') {
+        const parsedData = JSON.parse(event.data.data);
+        console.log("Override data received");
+        respond("Set override data to " + JSON.stringify(parsedData, null, 2));
+        scenarios().updateData(scenarioName, parsedData);
+        setInternalVersion(prev => prev + 1);
+      }
+    };
+    window.addEventListener('message', eventListener);
+    return () => window.removeEventListener('message', eventListener);
+  }, [respond, scenarioName]);
+
+  // Console interception and client error reporting
+  useEffect(() => {
+    function _codeyamReportToServer(type: string, message: string, stack?: string) {
+      try {
+        const body = JSON.stringify({
+          type,
+          message: String(message).slice(0, 2000),
+          stack: stack ? String(stack).slice(0, 3000) : undefined,
+          scenario: scenarioName,
+          url: window.location.href,
+        });
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon('/api/client-log', new Blob([body], { type: 'application/json' }));
+        } else {
+          fetch('/api/client-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }).catch(() => {});
+        }
+      } catch (e) {}
+    }
+
+    const oldConsoleLog = console.log;
+    console.log = function(...args: any[]) {
+      oldConsoleLog(...args);
+      try {
+        window.parent.postMessage({
+          type: 'codeyam-log',
+          name: scenarioName,
+          data: {
+            log: {
+              name: "console.log",
+              args
+            }
+          }
+        }, '*');
+      } catch (e) {
+        oldConsoleLog('Error posting message to parent', e);
+      }
+    };
+
+    const oldConsoleError = console.error;
+    console.error = function(...args: any[]) {
+      oldConsoleError(...args);
+      window.parent.postMessage({
+        type: 'codeyam-log',
+        name: scenarioName,
+        data: {
+          log: {
+            name: "console.error",
+            args
+          }
+        }
+      }, '*');
+      const message = args.map((a: any) => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
+      _codeyamReportToServer('console.error', message);
+    };
+
+    window.addEventListener('error', function(event: ErrorEvent) {
+      _codeyamReportToServer('error', event.message, (event.error as any)?.stack);
+    });
+
+    window.addEventListener('unhandledrejection', function(event: PromiseRejectionEvent) {
+      const reason = event.reason;
+      _codeyamReportToServer('unhandledrejection', reason?.message || String(reason), reason?.stack);
+    });
+
+    return () => {
+      console.log = oldConsoleLog;
+      console.error = oldConsoleError;
+    };
+  }, [scenarioName]);
+
+  // Next.js error closing
+  ${getNextJsErrorClosingCode()}
+
+  // Height calculation and resize messaging
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const calculateHeight = () => {
+      const bodyHeight = document.body.offsetHeight;
+      const htmlHeight = document.documentElement.offsetHeight;
+      const scrollHeight = Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.offsetHeight,
+        document.body.clientHeight,
+        document.documentElement.clientHeight
+      );
+      return Math.max(100, bodyHeight, htmlHeight, scrollHeight);
+    };
+
+    const calculatedHeight = calculateHeight();
+    parent.postMessage({ type: 'codeyam-resize', name: scenarioName, height: calculatedHeight }, '*');
+
+    const eventListener = (event: MessageEvent) => {
+      if (event.data.name === scenarioName) {
+        if (event.data.type === 'codeyam-respond') {
+          const calculatedHeight = calculateHeight();
+          parent.postMessage({ type: 'codeyam-resize', name: scenarioName, height: calculatedHeight }, '*');
+        }
+      }
+    };
+
+    window.addEventListener('message', eventListener);
+    return () => window.removeEventListener('message', eventListener);
+  }, [scenarioName]);
+
+  const width = widthOverride || 'auto';
+
+  return (
+    <div className='flex flex-col justify-center items-center h-screen' data-version={internalVersion}>
+      <div className='w-full flex items-center justify-center'>
+        <div id='component' style={{
+          minWidth: width !== 'auto' ? \`min(\${width}, 100vw)\` : undefined,
+          height: heightOverride !== 'auto' ? heightOverride : undefined,
+          minHeight: heightOverride !== 'auto' ? heightOverride : undefined,
+          display: 'block',
+          padding: '6px'
+        }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/generateScenarioServerComponent.ts

@@ -0,0 +1,73 @@
+import { Entity, Analysis, type File, type Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import getComponentImportStatement from '../getComponentImportStatement';
+import scenarioComponentForServer from '../scenarioComponentForServer';
+
+const VERSION = '0.5.1';
+
+/**
+ * Generates a Server Component page for async components (Server Components in Next.js).
+ *
+ * This is needed because:
+ * 1. Async components use await, which only works in Server Components
+ * 2. Client Components ("use client") don't support async/await in the component body
+ * 3. We use Next.js composition pattern: Server Component page renders the async component,
+ *    then wraps it in a Client Component (ScenarioClientWrapper) for interactive features
+ */
+export default function generateScenarioServerComponent({
+  file,
+  entity,
+  analysis,
+  currentPath,
+  appPath,
+  scenario,
+  relativeMocksDir,
+}: {
+  file: File;
+  entity: Entity;
+  analysis: Analysis;
+  currentPath: string;
+  appPath: string;
+  scenario: Scenario;
+  relativeMocksDir: string;
+}) {
+  const fileName = file.name.split('.')[0];
+  const safeScenarioName = safeFileName(scenario.name);
+
+  return `/* eslint-disable */
+// Server Component page for async component: ${entity.name}
+// This page does NOT have "use client" - it runs on the server
+import { ScenarioClientWrapper } from "${relativeMocksDir}/ScenarioClientWrapper";
+${analysis.scenarios?.length > 0 ? `import { scenarios } from "${relativeMocksDir}/MockData_${safeScenarioName}";` : ''}
+${getComponentImportStatement({
+  file,
+  entity,
+  analysis,
+  currentPath,
+  appPath,
+  scenario,
+  primary: true,
+  namedExport:
+    entity.name !== 'default' &&
+    (entity.metadata?.notExported || entity.metadata?.namedExport) &&
+    entity.entityType !== 'library',
+})}
+
+function getScenarioProps({ argumentIndex, propName }: { argumentIndex: number, propName?: string }) {
+  const data = scenarios().data();
+  const argument = data['arguments'][argumentIndex];
+  return propName ? argument[propName] : argument;
+}
+
+export default async function Index() {
+  return (
+    <ScenarioClientWrapper
+      scenarioName="${scenario.name}"
+      fileName="${fileName}"
+      version="${VERSION}"
+    >
+      ${scenarioComponentForServer(entity, analysis, scenario)}
+    </ScenarioClientWrapper>
+  );
+}`;
+}

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/getIFrameMessageListenerCode.ts

@@ -43,6 +43,23 @@ export default function getIFrameMessageListenerCode({
   }, [respond])
   
   useEffect(() => {
+    function _codeyamReportToServer(type, message, stack) {
+      try {
+        const body = JSON.stringify({
+          type,
+          message: String(message).slice(0, 2000),
+          stack: stack ? String(stack).slice(0, 3000) : undefined,
+          scenario: '${escapedScenarioName}',
+          url: window.location.href,
+        });
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon('/api/client-log', new Blob([body], { type: 'application/json' }));
+        } else {
+          fetch('/api/client-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }).catch(() => {});
+        }
+      } catch (e) {}
+    }
+
     const oldConsoleLog = console.log;
     console.log = function(...args) {
       oldConsoleLog(...args);
@@ -53,13 +70,13 @@ export default function getIFrameMessageListenerCode({
           data: {
             log: {
               name: "console.log",
-              args 
-            } 
+              args
+            }
           }
         }, '*');
       } catch (e) {
         oldConsoleLog('Error posting message to parent', e);
-      }      
+      }
     }
 
     const oldConsoleError = console.error;
@@ -71,12 +88,23 @@ export default function getIFrameMessageListenerCode({
         data: {
           log: {
             name: "console.log",
-            args 
-          } 
+            args
+          }
         }
       }, '*');
+      const message = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
+      _codeyamReportToServer('console.error', message);
     }
 
+    window.addEventListener('error', function(event) {
+      _codeyamReportToServer('error', event.message, event.error?.stack);
+    });
+
+    window.addEventListener('unhandledrejection', function(event) {
+      const reason = event.reason;
+      _codeyamReportToServer('unhandledrejection', reason?.message || String(reason), reason?.stack);
+    });
+
     return () => {
       console.log = oldConsoleLog;
       console.error = oldConsoleError;