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

package/analyzer-template/packages/ai/src/lib/generateExecutionFlowsFromJsxUsages.ts

@@ -0,0 +1,239 @@
+/**
+ * Generates execution flows from JSX rendering usages.
+ *
+ * This module creates variation flows for arrays and strings that are rendered
+ * directly in JSX, even without explicit conditionals:
+ * - Arrays rendered via .map() → empty, few, many flows
+ * - Strings rendered via interpolation → normal, long flows
+ *
+ * Only controllable paths (from props, hooks, or external data) produce flows.
+ */
+
+import type { ExecutionFlow } from '~codeyam/types';
+import type { JsxRenderingUsage } from './astScopes/types';
+import resolvePathToControllable from './resolvePathToControllable';
+
+export interface GenerateFlowsFromJsxUsagesArgs {
+  /** JSX rendering usages extracted from AST analysis */
+  jsxRenderingUsages: JsxRenderingUsage[];
+  /** Map of controllable paths to their types */
+  attributesMap: Record<string, string>;
+  /** Map from local variable names to data sources */
+  equivalentSignatureVariables: Record<string, string | string[]>;
+  /** Map from full paths to short paths */
+  fullToShortPathMap: Record<string, string>;
+  /** Structure map for type lookup */
+  structure: Record<string, string>;
+}
+
+/**
+ * Generate a slug from a path for use in exclusive groups
+ */
+function pathToSlug(path: string): string {
+  return path
+    .replace(/\[\d+\]/g, '')
+    .replace(/\[\]/g, '')
+    .replace(/\(\)/g, '')
+    .replace(/\.functionCallReturnValue/g, '')
+    .replace(/[<>]/g, '')
+    .replace(/\./g, '-')
+    .toLowerCase();
+}
+
+/**
+ * Generate a human-readable name from a path.
+ */
+function generateNameFromPath(path: string): string {
+  const cleanPath = path
+    .replace(/\(\)/g, '')
+    .replace(/\.functionCallReturnValue/g, '');
+  const parts = cleanPath.split('.');
+  const lastPart = parts[parts.length - 1];
+
+  // Convert camelCase to Title Case
+  return lastPart
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim();
+}
+
+/**
+ * Generate execution flows from JSX rendering usages.
+ *
+ * For arrays: generates empty (0), few (1-3), many (10+) flows
+ * For strings: generates normal and long text flows
+ */
+export default function generateExecutionFlowsFromJsxUsages(
+  args: GenerateFlowsFromJsxUsagesArgs,
+): ExecutionFlow[] {
+  const {
+    jsxRenderingUsages,
+    attributesMap,
+    equivalentSignatureVariables,
+    fullToShortPathMap,
+  } = args;
+
+  const flows: ExecutionFlow[] = [];
+  const seenPaths = new Set<string>();
+
+  for (const usage of jsxRenderingUsages) {
+    // Resolve the path to a controllable data source
+    const resolution = resolvePathToControllable(
+      usage.path,
+      attributesMap,
+      equivalentSignatureVariables,
+      fullToShortPathMap,
+    );
+
+    if (!resolution.isControllable || !resolution.resolvedPath) {
+      // Path is not controllable - skip
+      continue;
+    }
+
+    const resolvedPath = resolution.resolvedPath;
+
+    // Deduplicate by resolved path + rendering type
+    const dedupeKey = `${resolvedPath}:${usage.renderingType}`;
+    if (seenPaths.has(dedupeKey)) {
+      continue;
+    }
+    seenPaths.add(dedupeKey);
+
+    const baseName = generateNameFromPath(resolvedPath);
+    const pathSlug = pathToSlug(resolvedPath);
+
+    if (usage.renderingType === 'array-map') {
+      // Generate 3 mutually exclusive flows for array sizes
+      const exclusiveGroup = `array-length-${pathSlug}`;
+
+      // Empty array flow
+      flows.push({
+        id: `${pathSlug}-empty-array`,
+        name: `${baseName} Empty`,
+        description: `When ${baseName.toLowerCase()} array is empty`,
+        requiredValues: [
+          {
+            attributePath: resolvedPath,
+            value: '0',
+            comparison: 'length<',
+            valueType: 'array',
+          },
+        ],
+        impact: 'medium',
+        exclusiveGroup,
+        sourceLocation: usage.sourceLocation
+          ? {
+              lineNumber: usage.sourceLocation.lineNumber,
+              column: usage.sourceLocation.column,
+            }
+          : undefined,
+        codeSnippet: usage.sourceLocation?.codeSnippet,
+      });
+
+      // Few items flow (1-3)
+      flows.push({
+        id: `${pathSlug}-few-items`,
+        name: `${baseName} Few Items`,
+        description: `When ${baseName.toLowerCase()} array has 1-3 items`,
+        requiredValues: [
+          {
+            attributePath: resolvedPath,
+            value: '3',
+            comparison: 'length<',
+            valueType: 'array',
+          },
+        ],
+        impact: 'low', // Baseline case
+        exclusiveGroup,
+        sourceLocation: usage.sourceLocation
+          ? {
+              lineNumber: usage.sourceLocation.lineNumber,
+              column: usage.sourceLocation.column,
+            }
+          : undefined,
+        codeSnippet: usage.sourceLocation?.codeSnippet,
+      });
+
+      // Many items flow (10+)
+      flows.push({
+        id: `${pathSlug}-many-items`,
+        name: `${baseName} Many Items`,
+        description: `When ${baseName.toLowerCase()} array has 10+ items`,
+        requiredValues: [
+          {
+            attributePath: resolvedPath,
+            value: '10',
+            comparison: 'length>',
+            valueType: 'array',
+          },
+        ],
+        impact: 'medium',
+        exclusiveGroup,
+        sourceLocation: usage.sourceLocation
+          ? {
+              lineNumber: usage.sourceLocation.lineNumber,
+              column: usage.sourceLocation.column,
+            }
+          : undefined,
+        codeSnippet: usage.sourceLocation?.codeSnippet,
+      });
+    } else if (
+      usage.renderingType === 'text-interpolation' &&
+      usage.valueType === 'string'
+    ) {
+      // Only generate text flows for strings (not numbers or other types)
+      // Generate 2 mutually exclusive flows for text lengths
+      const exclusiveGroup = `text-length-${pathSlug}`;
+
+      // Normal text flow
+      flows.push({
+        id: `${pathSlug}-normal-text`,
+        name: `${baseName} Normal`,
+        description: `When ${baseName.toLowerCase()} has normal length text`,
+        requiredValues: [
+          {
+            attributePath: resolvedPath,
+            value: 'normal',
+            comparison: 'equals',
+            valueType: 'string',
+          },
+        ],
+        impact: 'low',
+        exclusiveGroup,
+        sourceLocation: usage.sourceLocation
+          ? {
+              lineNumber: usage.sourceLocation.lineNumber,
+              column: usage.sourceLocation.column,
+            }
+          : undefined,
+        codeSnippet: usage.sourceLocation?.codeSnippet,
+      });
+
+      // Long text flow
+      flows.push({
+        id: `${pathSlug}-long-text`,
+        name: `${baseName} Long Text`,
+        description: `When ${baseName.toLowerCase()} has long text that might overflow`,
+        requiredValues: [
+          {
+            attributePath: resolvedPath,
+            value: 'long',
+            comparison: 'equals',
+            valueType: 'string',
+          },
+        ],
+        impact: 'low',
+        exclusiveGroup,
+        sourceLocation: usage.sourceLocation
+          ? {
+              lineNumber: usage.sourceLocation.lineNumber,
+              column: usage.sourceLocation.column,
+            }
+          : undefined,
+        codeSnippet: usage.sourceLocation?.codeSnippet,
+      });
+    }
+  }
+
+  return flows;
+}

package/analyzer-template/packages/ai/src/lib/guessScenarioDataFromDescription.ts

@@ -2,13 +2,13 @@ import { saveLlmCall } from '~codeyam/aws/dynamodb';
 import { ScenariosDataStructure, Scenario } from '~codeyam/types';
 import completionCall from './completionCall';
 import guessNewScenarioDataFromDescriptionGenerator, {
-  KeyAttributeSelection,
+  ExecutionFlowSelection,
 } from './promptGenerators/guessNewScenarioDataFromDescriptionGenerator';
 import guessEditScenarioDataFromDescriptionGenerator from './promptGenerators/guessEditScenarioDataFromDescriptionGenerator';
 import { AI, DEFAULT_LARGER_MODEL } from '~codeyam/ai';
 import { parseJsonSafe } from './parsers/parseJsonSafe';
 
-export type { KeyAttributeSelection };
+export type { ExecutionFlowSelection };
 
 export interface GuessScenarioDataFromDescriptionArgs {
   description: string;
@@ -16,7 +16,7 @@ export interface GuessScenarioDataFromDescriptionArgs {
   editingMockData?: { [key: string]: unknown };
   existingScenarios: Scenario[];
   scenariosDataStructure: ScenariosDataStructure;
-  keyAttributeSelections?: KeyAttributeSelection[];
+  flowSelections?: ExecutionFlowSelection[];
   model?: AI.Model;
 }
 
@@ -26,7 +26,7 @@ export default async function generateEntityScenarios({
   editingMockData,
   existingScenarios,
   scenariosDataStructure,
-  keyAttributeSelections,
+  flowSelections,
   model,
 }: GuessScenarioDataFromDescriptionArgs): Promise<
   Scenario['metadata']['data'] | null
@@ -43,7 +43,7 @@ export default async function generateEntityScenarios({
         description,
         existingScenarios,
         scenariosDataStructure,
-        keyAttributeSelections,
+        flowSelections,
       });
 
   const response = await completionCall({

package/analyzer-template/packages/ai/src/lib/isolateScopes.ts

@@ -119,6 +119,16 @@ function processScope({
   }
   const childScopesRanges: ChildRange[] = [];
 
+  // Extract gating conditions BEFORE any JSX is extracted into child scopes
+  // This ensures we capture conditions like {cond && <ChildComponent />}
+  // before the JSX is replaced with placeholders.
+  // Only extract when maxJSXLimit > 0 (i.e., when JSX will actually be extracted).
+  const extractedGatingConditions: ScopeInfo['extractedGatingConditions'] = {};
+
+  if (maxJSXLimit > 0) {
+    extractGatingConditionsFromJsx(node, sourceFile, extractedGatingConditions);
+  }
+
   const addChildScopesRange = ({
     start,
     end,
@@ -726,9 +736,55 @@ function processScope({
     text: modifiedText,
     variables: Array.from(variables),
     childScopes,
+    // Include gating conditions if any were found
+    ...(Object.keys(extractedGatingConditions).length > 0 && {
+      extractedGatingConditions,
+    }),
   };
 }
 
+/**
+ * Check if a code string contains only type declarations (type aliases, interfaces, etc.)
+ * that don't contribute to runtime behavior. This is used to determine if the root scope
+ * should be considered "empty" for scope extraction purposes.
+ */
+function containsOnlyTypeDeclarations(code: string): boolean {
+  try {
+    const sourceFile = ts.createSourceFile(
+      'temp.ts',
+      code,
+      ts.ScriptTarget.Latest,
+      true,
+      ts.ScriptKind.TS,
+    );
+
+    // Check each statement - if any is NOT a type-only declaration, return false
+    for (const statement of sourceFile.statements) {
+      if (
+        ts.isTypeAliasDeclaration(statement) ||
+        ts.isInterfaceDeclaration(statement) ||
+        ts.isEnumDeclaration(statement) ||
+        // Import declarations that are type-only
+        (ts.isImportDeclaration(statement) &&
+          statement.importClause?.isTypeOnly) ||
+        // Export declarations that are type-only
+        (ts.isExportDeclaration(statement) && statement.isTypeOnly)
+      ) {
+        // This is a type-only declaration, continue checking
+        continue;
+      }
+      // Found a non-type statement
+      return false;
+    }
+
+    // All statements are type-only (or there are no statements)
+    return sourceFile.statements.length > 0;
+  } catch {
+    // If parsing fails, assume it's not type-only
+    return false;
+  }
+}
+
 /**
  * Main entry point.
  *
@@ -772,11 +828,21 @@ export default function isolateScopes(
   // }
   // logChildIds(isolatedScopes);
 
-  processJSXForScope(isolatedScopes, generateSyntheticName);
-
-  // If the root scope text is empty and there's only one child scope,
-  // return that child scope as the root scope
-  if (isolatedScopes.text.trim().length === 0) {
+  // Process JSX for the root scope only (not child scopes)
+  // Child scopes contain callback functions that should preserve their JSX
+  // for analysis - gating conditions are now detected in processScope BEFORE extraction
+  const jsxLimit = options?.jsxLimit ?? 10;
+  processJSXForScope(isolatedScopes, generateSyntheticName, jsxLimit);
+
+  // If the root scope text is empty (or only contains type declarations) and there's
+  // only one child scope, return that child scope as the root scope.
+  // Type declarations (type aliases, interfaces) don't contribute to runtime behavior,
+  // so we treat them as "empty" for scope extraction purposes.
+  const rootTextIsEffectivelyEmpty =
+    isolatedScopes.text.trim().length === 0 ||
+    containsOnlyTypeDeclarations(isolatedScopes.text);
+
+  if (rootTextIsEffectivelyEmpty) {
     const childScopeArray = Object.values(isolatedScopes.childScopes);
     if (childScopeArray.length === 1) {
       return childScopeArray[0];
@@ -800,9 +866,224 @@ export default function isolateScopes(
  * Any errors during parsing are caught and logged, ensuring robust handling
  * of invalid or unexpected input.
  */
+/**
+ * Helper to get the component name from a JSX element (returns null for intrinsic elements like 'div')
+ */
+function getJsxComponentName(
+  node: ts.JsxElement | ts.JsxSelfClosingElement,
+  sourceFile: ts.SourceFile,
+): string | null {
+  let tagName: string;
+  if (ts.isJsxElement(node)) {
+    tagName = node.openingElement.tagName.getText(sourceFile);
+  } else {
+    tagName = node.tagName.getText(sourceFile);
+  }
+  // Intrinsic elements start with lowercase
+  if (tagName[0] === tagName[0].toLowerCase()) {
+    return null;
+  }
+  return tagName;
+}
+
+/**
+ * Helper to extract a simple path string from an expression (for gating conditions)
+ */
+function getSimplePathFromExpression(
+  expr: ts.Expression,
+  sourceFile: ts.SourceFile,
+): string | null {
+  // Unwrap parentheses
+  while (ts.isParenthesizedExpression(expr)) {
+    expr = expr.expression;
+  }
+
+  if (ts.isIdentifier(expr)) {
+    return expr.text;
+  }
+  if (ts.isPropertyAccessExpression(expr)) {
+    const base = getSimplePathFromExpression(expr.expression, sourceFile);
+    if (base) {
+      return `${base}.${expr.name.text}`;
+    }
+  }
+  if (ts.isBinaryExpression(expr)) {
+    // For comparisons like `x === 'value'`, return the left side path
+    if (
+      expr.operatorToken.kind === ts.SyntaxKind.EqualsEqualsEqualsToken ||
+      expr.operatorToken.kind === ts.SyntaxKind.ExclamationEqualsEqualsToken
+    ) {
+      return getSimplePathFromExpression(expr.left, sourceFile);
+    }
+    // For && chains, try to get a path from either side
+    if (expr.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
+      return (
+        getSimplePathFromExpression(expr.left, sourceFile) ||
+        getSimplePathFromExpression(expr.right, sourceFile)
+      );
+    }
+  }
+  return null;
+}
+
+/**
+ * Extracts gating conditions from JSX before it's extracted into child scopes.
+ * This detects patterns like:
+ * - {condition && <Component />}
+ * - {condition ? <ComponentA /> : <ComponentB />}
+ * - {a ? <A/> : b ? <B/> : <C/>} (chained ternaries)
+ */
+function extractGatingConditionsFromJsx(
+  node: ts.Node,
+  sourceFile: ts.SourceFile,
+  gatingConditions: ScopeInfo['extractedGatingConditions'],
+): void {
+  // Process JSX expression children like {condition && <Component />}
+  const processJsxExpression = (expr: ts.Expression): void => {
+    // Unwrap parentheses
+    while (ts.isParenthesizedExpression(expr)) {
+      expr = expr.expression;
+    }
+
+    // Handle && chains: {condition && <Component />}
+    if (
+      ts.isBinaryExpression(expr) &&
+      expr.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+    ) {
+      // The right side might be JSX or another && expression
+      let rightExpr = expr.right;
+      while (ts.isParenthesizedExpression(rightExpr)) {
+        rightExpr = rightExpr.expression;
+      }
+
+      if (ts.isJsxElement(rightExpr) || ts.isJsxSelfClosingElement(rightExpr)) {
+        const componentName = getJsxComponentName(rightExpr, sourceFile);
+        if (componentName) {
+          // Extract all conditions from the && chain
+          const extractConditions = (e: ts.Expression): string[] => {
+            while (ts.isParenthesizedExpression(e)) {
+              e = e.expression;
+            }
+            if (
+              ts.isBinaryExpression(e) &&
+              e.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+            ) {
+              // Check if right side is JSX (terminal) or more conditions
+              let right = e.right;
+              while (ts.isParenthesizedExpression(right)) {
+                right = right.expression;
+              }
+              if (ts.isJsxElement(right) || ts.isJsxSelfClosingElement(right)) {
+                // Right is JSX, so left contains all conditions
+                return extractConditions(e.left);
+              }
+              // Both sides are conditions
+              return [
+                ...extractConditions(e.left),
+                ...extractConditions(e.right),
+              ];
+            }
+            const path = getSimplePathFromExpression(e, sourceFile);
+            return path ? [path] : [];
+          };
+
+          const conditions = extractConditions(expr.left);
+          if (!gatingConditions![componentName]) {
+            gatingConditions![componentName] = [];
+          }
+          for (const path of conditions) {
+            gatingConditions![componentName].push({
+              path,
+              conditionType: 'truthiness',
+              location: 'logical-and',
+            });
+          }
+        }
+      }
+    }
+
+    // Handle ternaries: {condition ? <A /> : <B />}
+    if (ts.isConditionalExpression(expr)) {
+      processConditionalExpression(expr, sourceFile, gatingConditions, false);
+    }
+  };
+
+  // Recursive function to handle chained ternaries
+  const processConditionalExpression = (
+    expr: ts.ConditionalExpression,
+    sf: ts.SourceFile,
+    gc: ScopeInfo['extractedGatingConditions'],
+    parentConditionNegated: boolean,
+  ): void => {
+    const conditionPath = getSimplePathFromExpression(expr.condition, sf);
+
+    // Process whenTrue branch
+    let whenTrue = expr.whenTrue;
+    while (ts.isParenthesizedExpression(whenTrue)) {
+      whenTrue = whenTrue.expression;
+    }
+    if (ts.isJsxElement(whenTrue) || ts.isJsxSelfClosingElement(whenTrue)) {
+      const componentName = getJsxComponentName(whenTrue, sf);
+      if (componentName && conditionPath) {
+        if (!gc![componentName]) {
+          gc![componentName] = [];
+        }
+        gc![componentName].push({
+          path: conditionPath,
+          conditionType: 'truthiness',
+          location: 'ternary',
+          isNegated: false,
+        });
+      }
+    }
+
+    // Process whenFalse branch
+    let whenFalse = expr.whenFalse;
+    while (ts.isParenthesizedExpression(whenFalse)) {
+      whenFalse = whenFalse.expression;
+    }
+
+    if (ts.isJsxElement(whenFalse) || ts.isJsxSelfClosingElement(whenFalse)) {
+      const componentName = getJsxComponentName(whenFalse, sf);
+      if (componentName && conditionPath) {
+        if (!gc![componentName]) {
+          gc![componentName] = [];
+        }
+        gc![componentName].push({
+          path: conditionPath,
+          conditionType: 'truthiness',
+          location: 'ternary',
+          isNegated: true, // else branch = negated condition
+        });
+      }
+    } else if (ts.isConditionalExpression(whenFalse)) {
+      // Chained ternary: a ? <A/> : b ? <B/> : <C/>
+      // Recursively process the nested ternary
+      processConditionalExpression(whenFalse, sf, gc, true);
+    }
+  };
+
+  // Traverse JSX children to find expressions
+  let jsxExpressionCount = 0;
+  let ternaryCount = 0;
+  const traverseJsx = (n: ts.Node): void => {
+    if (ts.isJsxExpression(n) && n.expression) {
+      jsxExpressionCount++;
+      if (ts.isConditionalExpression(n.expression)) {
+        ternaryCount++;
+      }
+      processJsxExpression(n.expression);
+    }
+    ts.forEachChild(n, traverseJsx);
+  };
+
+  traverseJsx(node);
+}
+
 function processJSXForScope(
   scope: ScopeInfo,
   generateSyntheticName: () => string,
+  jsxLimit: number = 10,
 ) {
   // Parse the scope text as a TypeScript AST to find JSX elements
   const scopeText = scope.text;
@@ -818,6 +1099,34 @@ function processJSXForScope(
       ts.ScriptKind.TSX,
     );
 
+    // Extract gating conditions BEFORE extraction (while JSX is still complete)
+    const gatingConditions: ScopeInfo['extractedGatingConditions'] = {};
+
+    extractGatingConditionsFromJsx(
+      tempSourceFile,
+      tempSourceFile,
+      gatingConditions,
+    );
+
+    // Merge with any existing gating conditions from processScope
+    // (processScope extracts from original text, this extracts from modified text)
+    if (Object.keys(gatingConditions).length > 0) {
+      if (scope.extractedGatingConditions) {
+        for (const [componentName, conditions] of Object.entries(
+          gatingConditions,
+        )) {
+          if (scope.extractedGatingConditions[componentName]) {
+            // Merge conditions, avoiding duplicates
+            scope.extractedGatingConditions[componentName].push(...conditions);
+          } else {
+            scope.extractedGatingConditions[componentName] = conditions;
+          }
+        }
+      } else {
+        scope.extractedGatingConditions = gatingConditions;
+      }
+    }
+
     const nodeMap = new Map<ts.Node, string>();
 
     // Find all JSX elements in this scope without recursing into child scopes
@@ -841,6 +1150,7 @@ function processJSXForScope(
       end: number;
       id: string;
       code: string;
+      jsxTagName?: string;
     }> = [];
 
     for (const [node, id] of nodeMap.entries()) {
@@ -848,13 +1158,23 @@ function processJSXForScope(
       const nodeEnd = node.getEnd();
       const code = node.getText(tempSourceFile);
 
-      // Only process reasonably sized JSX elements
-      if (code.length > 10) {
+      // Extract the JSX tag name
+      let jsxTagName: string | undefined;
+      if (ts.isJsxElement(node)) {
+        const tagNameNode = node.openingElement.tagName;
+        jsxTagName = tagNameNode.getText(tempSourceFile);
+      } else if (ts.isJsxSelfClosingElement(node)) {
+        jsxTagName = node.tagName.getText(tempSourceFile);
+      }
+
+      // Only process JSX elements larger than the limit
+      if (code.length > jsxLimit) {
         replacements.push({
           start: scopeStart + nodeStart,
           end: scopeStart + nodeEnd,
           id,
           code,
+          jsxTagName,
         });
       }
     }
@@ -876,6 +1196,7 @@ function processJSXForScope(
         end: replacement.end,
         variables: [],
         childScopes: {},
+        jsxTagName: replacement.jsxTagName,
       };
 
       // Replace in text

package/analyzer-template/packages/ai/src/lib/mergeJsonTypeDefinitions.ts

@@ -11,6 +11,11 @@ export default function mergeJsonTypeDefinitions(
     if (!typeDef) continue;
     if (typeof typeDef === 'string') continue;
     for (const [key, value] of Object.entries(typeDef)) {
+      // Preserve _nullable boolean markers set by convertDotNotation
+      if (key === '_nullable' && typeof value === 'boolean') {
+        mergedDef[key] = value;
+        continue;
+      }
       if (typeof value === 'string') {
         if (!mergedDef[key]) {
           mergedDef[key] = value;