@codeyam/codeyam-cli 0.1.0-staging.bbe4da9 → 0.1.0-staging.c9dc00c

package/analyzer-template/packages/ai/src/lib/astScopes/processExpression.ts

@@ -1,8 +1,13 @@
 import ts from 'typescript';
-import { AnalysisContext, ConditionalUsage } from './types';
+import * as crypto from 'crypto';
+import {
+  AnalysisContext,
+  CompoundConditional,
+  ConditionalUsage,
+} from './types';
 import { StructuredPath } from './paths';
 import { nodeToSource } from './nodeToSource';
-import { methodRegistry } from './methodSemantics';
+import { methodRegistry, ArrayPushSemantics } from './methodSemantics';
 import {
   isArithmeticOperator,
   isAssignmentOperator,
@@ -14,6 +19,382 @@ import {
   unwrapExpression,
 } from './sharedPatterns';
 import { processBindingPattern } from './processBindings';
+import {
+  extractConditionalEffectsFromTernary,
+  findUseStateSetters,
+} from './conditionalEffectsExtractor';
+import { detectArrayDerivedPattern } from './arrayDerivationDetector';
+
+/**
+ * Checks if a JSX element has props that reference variables from the parent scope.
+ * This is used to detect unconditionally-rendered children that should have their
+ * execution flows merged into the parent.
+ *
+ * We want to track children where the parent controls data that affects the child's
+ * conditional rendering. Static props (like title="Dashboard") don't need tracking
+ * because they don't create variable execution flows.
+ *
+ * Examples:
+ * - <WorkoutsView workouts={workouts} /> → true (workouts is a variable)
+ * - <ItemList items={items} count={count} /> → true (items, count are variables)
+ * - <Header title="Dashboard" /> → false (static string)
+ * - <Footer /> → false (no props)
+ * - <Button onClick={handleClick} /> → false (only callback, no data props)
+ *
+ * @returns true if the component has at least one prop that references a variable
+ *          (excluding callbacks which typically start with 'on' or 'handle')
+ */
+function hasDataPropsFromParent(
+  node: ts.JsxElement | ts.JsxSelfClosingElement,
+  componentName: string,
+): { hasDataProps: boolean; dataProps: string[] } {
+  const attributes = ts.isJsxElement(node)
+    ? node.openingElement.attributes.properties
+    : node.attributes.properties;
+
+  const dataProps: string[] = [];
+
+  for (const attr of attributes) {
+    // Spread attributes always reference parent data: {...props}
+    if (ts.isJsxSpreadAttribute(attr)) {
+      const spreadText = attr.expression?.getText() || '...spread';
+      dataProps.push(`{...${spreadText}}`);
+      console.log(
+        `[UnconditionalChild] ${componentName}: Found spread attribute {${spreadText}}`,
+      );
+      continue;
+    }
+
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText();
+
+      // Skip callback props - they don't create data-driven execution flows
+      // Callbacks typically start with 'on' (onClick, onChange) or 'handle' (handleSubmit)
+      if (
+        propName.startsWith('on') ||
+        propName.startsWith('handle') ||
+        propName === 'ref'
+      ) {
+        console.log(
+          `[UnconditionalChild] ${componentName}: Skipping callback prop '${propName}'`,
+        );
+        continue;
+      }
+
+      // Check if the prop value is a JSX expression (references a variable)
+      // vs a string literal which is static
+      if (attr.initializer) {
+        if (ts.isJsxExpression(attr.initializer)) {
+          // JSX expression like prop={value} - this references a variable
+          // Could be a simple identifier, property access, or more complex expression
+          const expression = attr.initializer.expression;
+          if (expression) {
+            // Skip if it's just a function/arrow function (callback)
+            if (
+              ts.isArrowFunction(expression) ||
+              ts.isFunctionExpression(expression)
+            ) {
+              console.log(
+                `[UnconditionalChild] ${componentName}: Skipping inline callback prop '${propName}'`,
+              );
+              continue;
+            }
+            // This is a data prop that references parent state/props
+            const exprText = expression.getText();
+            dataProps.push(`${propName}={${exprText}}`);
+            console.log(
+              `[UnconditionalChild] ${componentName}: Found data prop '${propName}' = {${exprText}}`,
+            );
+          }
+        } else {
+          // String literals like prop="value" are static
+          console.log(
+            `[UnconditionalChild] ${componentName}: Skipping static prop '${propName}'`,
+          );
+        }
+      }
+    }
+  }
+
+  const hasDataProps = dataProps.length > 0;
+  if (hasDataProps) {
+    console.log(
+      `[UnconditionalChild] ${componentName}: Has ${dataProps.length} data props: [${dataProps.join(', ')}]`,
+    );
+  } else {
+    console.log(
+      `[UnconditionalChild] ${componentName}: No data props found, will NOT track`,
+    );
+  }
+
+  return { hasDataProps, dataProps };
+}
+
+/**
+ * Extracts the component name from a JSX element.
+ * Returns null for intrinsic elements (div, span, etc.) since we only care about
+ * custom components for gating condition tracking.
+ *
+ * Examples:
+ * - <ChildViewer /> → "ChildViewer"
+ * - <ScenarioViewer scenario={...} /> → "ScenarioViewer"
+ * - <div> → null (intrinsic element)
+ */
+function getComponentNameFromJsx(
+  node: ts.JsxElement | ts.JsxSelfClosingElement,
+): string | null {
+  let tagName: ts.JsxTagNameExpression;
+
+  if (ts.isJsxElement(node)) {
+    tagName = node.openingElement.tagName;
+  } else {
+    tagName = node.tagName;
+  }
+
+  // Get the text of the tag name
+  const name = tagName.getText();
+
+  // Check if it's a custom component (starts with uppercase) vs intrinsic element
+  // Custom components start with uppercase: <MyComponent />
+  // Intrinsic elements start with lowercase: <div />
+  if (
+    name &&
+    name[0] === name[0].toUpperCase() &&
+    name[0] !== name[0].toLowerCase()
+  ) {
+    return name;
+  }
+
+  return null;
+}
+
+/**
+ * Extracts condition paths from a logical AND chain expression.
+ * Used for creating gating conditions for child components.
+ *
+ * Example: `hasData && isReady && <Component />` returns ['hasData', 'isReady']
+ */
+function extractConditionPathsFromAndChain(
+  expr: ts.Expression,
+  sourceFile: ts.SourceFile,
+): string[] {
+  const paths: string[] = [];
+  const unwrapped = unwrapExpression(expr);
+
+  if (
+    ts.isBinaryExpression(unwrapped) &&
+    unwrapped.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+  ) {
+    // Recursively get conditions from left side
+    paths.push(
+      ...extractConditionPathsFromAndChain(unwrapped.left, sourceFile),
+    );
+
+    // Process right side if it's not JSX (JSX is the consequence, not a condition)
+    const rightUnwrapped = unwrapExpression(unwrapped.right);
+    if (
+      !ts.isJsxElement(rightUnwrapped) &&
+      !ts.isJsxSelfClosingElement(rightUnwrapped) &&
+      !ts.isJsxFragment(rightUnwrapped)
+    ) {
+      paths.push(
+        ...extractConditionPathsFromAndChain(unwrapped.right, sourceFile),
+      );
+    }
+  } else {
+    // Base case: extract path from this expression
+    const path = StructuredPath.fromNode(unwrapped, sourceFile);
+    if (path) {
+      paths.push(path.toString());
+    }
+  }
+
+  return paths;
+}
+
+/**
+ * Finds the rightmost JSX element in an && chain.
+ * Example: `a && b && <Component />` returns <Component />
+ */
+function findJsxInAndChain(
+  expr: ts.Expression,
+): ts.JsxElement | ts.JsxSelfClosingElement | null {
+  const unwrapped = unwrapExpression(expr);
+
+  if (ts.isJsxElement(unwrapped) || ts.isJsxSelfClosingElement(unwrapped)) {
+    return unwrapped;
+  }
+
+  if (
+    ts.isBinaryExpression(unwrapped) &&
+    unwrapped.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+  ) {
+    // Check right side first (most common case: condition && <Jsx />)
+    const rightResult = findJsxInAndChain(unwrapped.right);
+    if (rightResult) return rightResult;
+
+    // Also check left side for rare cases
+    return findJsxInAndChain(unwrapped.left);
+  }
+
+  return null;
+}
+
+/**
+ * Fix 32: Finds a JSX fragment in an && chain.
+ * Example: `activeTab && <><ChildA /><ChildB /></>` returns the fragment
+ * This is needed to propagate parent conditions through fragments.
+ */
+function findJsxFragmentInAndChain(expr: ts.Expression): ts.JsxFragment | null {
+  const unwrapped = unwrapExpression(expr);
+
+  if (ts.isJsxFragment(unwrapped)) {
+    return unwrapped;
+  }
+
+  if (
+    ts.isBinaryExpression(unwrapped) &&
+    unwrapped.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+  ) {
+    // Check right side first (most common case: condition && <></>)
+    const rightResult = findJsxFragmentInAndChain(unwrapped.right);
+    if (rightResult) return rightResult;
+
+    // Also check left side for rare cases
+    return findJsxFragmentInAndChain(unwrapped.left);
+  }
+
+  return null;
+}
+
+/**
+ * Detects if a property access looks like an environment variable store access.
+ * Matches patterns like `env.DATABASE_URL`, `env.IS_FORMBRICKS_CLOUD`, etc.
+ * where the object is named "env" and the property looks like an env var name.
+ */
+function isEnvStoreAccess(fullText: string): boolean {
+  // Match: env.SOME_VAR or env.someVar (but object must be exactly "env")
+  // This catches patterns from @t3-oss/env-nextjs and similar packages
+  const envStorePattern = /^env\.[A-Z_][A-Z0-9_]*$/;
+  return envStorePattern.test(fullText);
+}
+
+/**
+ * Converts a call expression argument to a StructuredPath.
+ *
+ * IMPORTANT: We always use the original source text for callbacks, never cyScope names.
+ * cyScope names are internal identifiers for child scopes and should NEVER appear
+ * in schema paths or call signatures. Using cyScope names causes data merge conflicts
+ * because the same callback gets different identifiers in different contexts.
+ */
+function getArgPathForCallSignature(
+  arg: ts.Expression,
+  context: AnalysisContext,
+): StructuredPath {
+  // Always use the standard path conversion - never replace with cyScope names
+  return (
+    StructuredPath.fromNode(arg, context.sourceFile) ||
+    nodeToSource(arg, context.sourceFile)
+  );
+}
+
+/**
+ * Builds a StructuredPath for a call expression using the original source text.
+ *
+ * IMPORTANT: This function ensures consistent call signatures by always using
+ * the original callback text, never cyScope names. This prevents schema path
+ * conflicts where the same call would have different paths.
+ */
+function buildCallPathFromSource(
+  node: ts.CallExpression,
+  context: AnalysisContext,
+): StructuredPath | null {
+  const expression = node.expression;
+
+  // Convert arguments using original source text
+  const argPaths = node.arguments.map((arg) =>
+    getArgPathForCallSignature(arg, context),
+  );
+
+  // Handle type arguments if present
+  let typeArgs: string[] | undefined = undefined;
+  if (node.typeArguments && node.typeArguments.length > 0) {
+    typeArgs = node.typeArguments.map((typeArg) =>
+      typeArg.getText(context.sourceFile),
+    );
+  }
+
+  if (ts.isIdentifier(expression)) {
+    // Simple function call: func(arg1, arg2)
+    return StructuredPath.fromFunction(expression.text, argPaths, typeArgs);
+  } else if (ts.isPropertyAccessExpression(expression)) {
+    // Method call: obj.method(arg1, arg2)
+    const objPath = StructuredPath.fromNode(
+      expression.expression,
+      context.sourceFile,
+    );
+    if (!objPath) return null;
+    return objPath
+      .withProperty(expression.name.text)
+      .withFunctionCall(argPaths, typeArgs);
+  } else if (ts.isCallExpression(expression)) {
+    // Chained call: func(arg1)(arg2)
+    const funcPath = buildCallPathFromSource(expression, context);
+    if (!funcPath) return null;
+    return funcPath.withFunctionCall(argPaths, typeArgs);
+  } else if (ts.isElementAccessExpression(expression)) {
+    // Element access call: obj[key](args)
+    const basePath = StructuredPath.fromNode(expression, context.sourceFile);
+    if (!basePath) return null;
+    return basePath.withFunctionCall(argPaths, typeArgs);
+  } else {
+    // Complex call expression
+    const basePath = StructuredPath.fromNode(expression, context.sourceFile);
+    if (!basePath) return null;
+    return basePath.withFunctionCall(argPaths, typeArgs);
+  }
+}
+
+/**
+ * Checks if an expression is likely an array type.
+ * Uses TypeScript's type checker when available, falls back to heuristics.
+ */
+function isLikelyArrayType(
+  expr: ts.Expression,
+  typeChecker: ts.TypeChecker | undefined,
+): boolean {
+  if (typeChecker) {
+    try {
+      const type = typeChecker.getTypeAtLocation(expr);
+      const typeString = typeChecker.typeToString(type);
+      // Check for common array type patterns:
+      // - T[] syntax (includes any[], string[], etc.)
+      // - Array<T> syntax
+      // - ReadonlyArray<T> syntax
+      // - readonly T[] syntax (starts with "readonly " and ends with "[]")
+      if (
+        typeString.includes('[]') ||
+        typeString.startsWith('Array<') ||
+        typeString.startsWith('ReadonlyArray<')
+      ) {
+        return true;
+      }
+      // Check if it's a tuple or array literal type via TypeScript's type flags
+      if (type.getFlags() & ts.TypeFlags.Object) {
+        const objectType = type as ts.ObjectType;
+        if (
+          objectType.objectFlags & ts.ObjectFlags.Tuple ||
+          objectType.objectFlags & ts.ObjectFlags.ArrayLiteral
+        ) {
+          return true;
+        }
+      }
+    } catch {
+      // Type checking can fail in some edge cases, fall through to false
+    }
+  }
+  return false;
+}
 
 /**
  * Marks variables used in truthiness checks as potentially undefined.
@@ -73,131 +454,1008 @@ export function markConditionVariablesAsNullable(
 }
 
 /**
- * Extracts conditional usages from a condition expression for key attribute detection.
- * This function identifies which attributes are used in conditionals and how they're used.
+ * Helper to extract source location from an AST node
+ */
+function getSourceLocation(
+  node: ts.Node,
+  sourceFile: ts.SourceFile,
+): ConditionalUsage['sourceLocation'] {
+  const start = node.getStart(sourceFile);
+  const { line, character } = sourceFile.getLineAndCharacterOfPosition(start);
+  const codeSnippet = node.getText(sourceFile);
+
+  return {
+    lineNumber: line + 1, // Convert to 1-based
+    column: character,
+    codeSnippet:
+      codeSnippet.length > 100
+        ? codeSnippet.slice(0, 100) + '...'
+        : codeSnippet,
+  };
+}
+
+/**
+ * Extracts the root array path from an expression that ends with .map().
+ * Handles chained methods like .filter().map(), .slice().map(), etc.
  *
- * @param condition The condition expression to analyze
+ * Examples:
+ * - items.map(...) → "items"
+ * - data.users.map(...) → "data.users"
+ * - items.filter(...).map(...) → "items"
+ * - items.slice(0, 5).map(...) → "items"
+ */
+function extractArrayPathFromMapCall(
+  expr: ts.CallExpression,
+  sourceFile: ts.SourceFile,
+): string | null {
+  // Walk up the chain to find the root array
+  let current: ts.Expression = expr.expression;
+
+  while (ts.isPropertyAccessExpression(current)) {
+    const methodName = current.name.getText(sourceFile);
+
+    // Common array methods that return arrays (so we keep going up)
+    const arrayReturningMethods = [
+      'map',
+      'filter',
+      'slice',
+      'concat',
+      'flat',
+      'flatMap',
+      'reverse',
+      'sort',
+      'toReversed',
+      'toSorted',
+      'toSpliced',
+    ];
+
+    if (arrayReturningMethods.includes(methodName)) {
+      const objectExpr = current.expression;
+
+      // If the object is a call expression (chained method), keep going
+      if (ts.isCallExpression(objectExpr)) {
+        current = objectExpr.expression;
+      } else {
+        // Found the root - it's an identifier or property access
+        const path = StructuredPath.fromNode(objectExpr, sourceFile);
+        return path ? path.toString() : null;
+      }
+    } else {
+      // Not an array method we recognize
+      break;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Extracts JSX rendering usages from a JSX expression.
+ * Detects:
+ * - array.map() calls → 'array-map' type
+ * - string interpolations (identifiers/property access) → 'text-interpolation' type
+ *
+ * Recursively searches inside && chains and ternary expressions.
+ *
+ * @param expr The expression inside {expr}
  * @param context The analysis context
- * @param location Where this condition appears (if, ternary, logical-and, switch)
  */
-export function extractConditionalUsage(
-  condition: ts.Expression,
+function extractJsxRenderingUsage(
+  expr: ts.Expression,
   context: AnalysisContext,
-  location: ConditionalUsage['location'],
 ): void {
-  const unwrapped = unwrapExpression(condition);
+  const unwrapped = unwrapExpression(expr);
+  const sourceLocation = getSourceLocation(expr, context.sourceFile);
 
-  // Handle binary expressions with && (logical AND chains)
-  // Example: `a && b && <Component />` - both a and b are conditional checks
-  if (
+  // Detect array.map() calls
+  if (ts.isCallExpression(unwrapped)) {
+    const calleeExpr = unwrapped.expression;
+
+    if (ts.isPropertyAccessExpression(calleeExpr)) {
+      const methodName = calleeExpr.name.getText(context.sourceFile);
+
+      if (methodName === 'map') {
+        const arrayPath = extractArrayPathFromMapCall(
+          unwrapped,
+          context.sourceFile,
+        );
+
+        if (arrayPath) {
+          context.addJsxRenderingUsage({
+            path: arrayPath,
+            renderingType: 'array-map',
+            valueType: 'array',
+            sourceLocation,
+          });
+        }
+      }
+    }
+  }
+  // Detect simple string interpolations: {title} or {user.name}
+  else if (
+    ts.isIdentifier(unwrapped) ||
+    ts.isPropertyAccessExpression(unwrapped)
+  ) {
+    const path = StructuredPath.fromNode(unwrapped, context.sourceFile);
+
+    if (path) {
+      const pathStr = path.toString();
+      const typeInfo = context.getTypeInfo(path);
+
+      // Only track as text interpolation if it's a string type
+      // Check for 'string' type, or types that contain 'string' (but not 'string[]')
+      if (
+        typeInfo === 'string' ||
+        (typeInfo &&
+          typeInfo.includes('string') &&
+          !typeInfo.includes('string[]'))
+      ) {
+        context.addJsxRenderingUsage({
+          path: pathStr,
+          renderingType: 'text-interpolation',
+          valueType: 'string',
+          sourceLocation,
+        });
+      }
+    }
+  }
+  // Recursively search inside && chains: {showList && items.map(...)}
+  else if (
     ts.isBinaryExpression(unwrapped) &&
     unwrapped.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
   ) {
-    // Recursively process left side
-    extractConditionalUsage(unwrapped.left, context, location);
+    // Check the right side of the && chain (where .map() typically appears)
+    const rightSide = unwrapExpression(unwrapped.right);
+    extractJsxRenderingUsage(rightSide, context);
+    // Also check nested && chains on the left
+    extractJsxRenderingUsage(unwrapped.left, context);
+  }
+  // Recursively search inside ternaries: {isEmpty ? null : items.map(...)}
+  else if (ts.isConditionalExpression(unwrapped)) {
+    extractJsxRenderingUsage(unwrapped.whenTrue, context);
+    extractJsxRenderingUsage(unwrapped.whenFalse, context);
+  }
+}
+
+/**
+ * Counts the number of conditions in an && chain (excluding JSX consequence)
+ */
+function countConditionsInAndChain(expr: ts.Expression): number {
+  const unwrapped = unwrapExpression(expr);
 
-    // Process right side if it's not JSX (JSX is the consequence, not the condition)
+  if (
+    ts.isBinaryExpression(unwrapped) &&
+    unwrapped.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+  ) {
+    const leftCount = countConditionsInAndChain(unwrapped.left);
     const rightUnwrapped = unwrapExpression(unwrapped.right);
     const isJsxConsequence =
       ts.isJsxElement(rightUnwrapped) ||
       ts.isJsxSelfClosingElement(rightUnwrapped) ||
       ts.isJsxFragment(rightUnwrapped);
 
-    if (!isJsxConsequence) {
-      extractConditionalUsage(unwrapped.right, context, location);
+    if (isJsxConsequence) {
+      return leftCount;
     }
-    return;
+    return leftCount + countConditionsInAndChain(unwrapped.right);
   }
 
-  // Handle binary expressions with || (logical OR)
-  if (
-    ts.isBinaryExpression(unwrapped) &&
-    unwrapped.operatorToken.kind === ts.SyntaxKind.BarBarToken
-  ) {
-    // Both sides of || are conditional checks
-    extractConditionalUsage(unwrapped.left, context, location);
-    extractConditionalUsage(unwrapped.right, context, location);
+  // Single condition (not an && chain)
+  return 1;
+}
+
+/**
+ * Chain tracking info for compound conditionals
+ */
+interface ChainInfo {
+  chainId: string;
+  chainLength: number;
+  chainExpression: string;
+  currentPosition: number;
+  compound: CompoundConditional;
+  /**
+   * When processing OR expressions within an && chain, this tracks the
+   * current OR group ID. Conditions added while this is set will be marked
+   * as OR alternatives (only one needs to be true).
+   */
+  currentOrGroupId?: string;
+}
+
+/**
+ * Parent gating condition accumulated during JSX traversal.
+ * Used to track conditions from parent && chains that gate child components.
+ */
+interface ParentGatingCondition {
+  path: string;
+  sourceLocation: { lineNumber: number; column: number; codeSnippet: string };
+  isNegated?: boolean;
+}
+
+/**
+ * Extracts conditionals from JSX elements by recursively traversing children.
+ *
+ * This is CRITICAL for extracting compound conditionals from JSX expressions
+ * like `{hasNewerVersion && !isActive && <Banner />}`.
+ *
+ * This function is called BEFORE the child boundary check in processExpression
+ * because JSX elements are NOT scopes - their expressions use variables from
+ * the parent scope and should have their conditionals extracted regardless of
+ * whether the JSX is within a child boundary.
+ *
+ * Fix 32: Added parentConditions parameter to track gating conditions from
+ * parent && chains. When we find a component nested inside multiple conditionals
+ * like `{activeTab && <>{ternary ? ... : <Component />}</>}`, ALL parent
+ * conditions should be added as gating conditions for the component.
+ *
+ * @param node The JSX element, self-closing element, or fragment to traverse
+ * @param context The analysis context
+ * @param parentConditions Accumulated gating conditions from parent && chains
+ */
+function extractConditionalsFromJsx(
+  node: ts.JsxElement | ts.JsxSelfClosingElement | ts.JsxFragment,
+  context: AnalysisContext,
+  parentConditions: ParentGatingCondition[] = [],
+): void {
+  // Get children to process
+  let children: ts.NodeArray<ts.JsxChild> | undefined;
+
+  if (ts.isJsxElement(node)) {
+    children = node.children;
+  } else if (ts.isJsxFragment(node)) {
+    children = node.children;
+  }
+  // JsxSelfClosingElement has no children
+
+  if (!children) {
     return;
   }
 
-  // Handle comparison operators (===, !==, <, >, <=, >=)
-  // Example: `if (status === 'active')` - status is compared against 'active'
-  if (
-    ts.isBinaryExpression(unwrapped) &&
-    isComparisonOperator(unwrapped.operatorToken.kind)
-  ) {
-    // Try to extract the variable and the compared value
-    const leftPath = StructuredPath.fromNode(
-      unwrapped.left,
-      context.sourceFile,
-    );
-    const rightPath = StructuredPath.fromNode(
-      unwrapped.right,
-      context.sourceFile,
-    );
+  for (const child of children) {
+    // Process JSX expressions: {expr}
+    if (ts.isJsxExpression(child) && child.expression) {
+      const expr = unwrapExpression(child.expression);
 
-    // Check if left is a variable and right is a literal
-    if (leftPath && isLiteralExpression(unwrapped.right)) {
-      const literalValue = getLiteralValue(unwrapped.right, context);
-      context.addConditionalUsage({
-        path: leftPath.toLeftHandSideString(),
-        conditionType: 'comparison',
-        comparedValues: literalValue !== undefined ? [literalValue] : undefined,
-        location,
-      });
+      // Extract JSX rendering usages (array.map, text interpolation)
+      // This handles direct usages like {items.map(...)} or {user.name}
+      extractJsxRenderingUsage(expr, context);
+
+      // If the expression is an && chain, extract its conditional usages
+      if (
+        ts.isBinaryExpression(expr) &&
+        expr.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+      ) {
+        // Mark nullable variables
+        markConditionVariablesAsNullable(expr, context);
+        // Extract conditional usage (this handles compound conditionals)
+        // Pass controlsJsxRendering: true since this conditional controls JSX rendering
+        extractConditionalUsage(expr, context, 'logical-and', {
+          controlsJsxRendering: true,
+        });
+
+        // Extract all condition paths from the && chain for gating tracking
+        const conditionPaths = extractConditionPathsFromAndChain(
+          expr,
+          context.sourceFile,
+        );
+        const sourceLocation = getSourceLocation(expr, context.sourceFile);
+
+        // Fix 32: Build accumulated conditions including parent conditions
+        const accumulatedConditions: ParentGatingCondition[] = [
+          ...parentConditions,
+          ...conditionPaths.map((path) => ({
+            path,
+            sourceLocation,
+            isNegated: false,
+          })),
+        ];
+
+        // Track gating conditions for child components
+        // Example: {hasAnalysis && <ScenarioViewer />}
+        const jsxElement = findJsxInAndChain(expr);
+        if (jsxElement) {
+          const componentName = getComponentNameFromJsx(jsxElement);
+          if (componentName) {
+            // Fix 32: Add ALL accumulated conditions (parent + current) as gating conditions
+            for (const condition of accumulatedConditions) {
+              context.addChildBoundaryGatingCondition(componentName, {
+                path: condition.path,
+                conditionType: 'truthiness',
+                location: 'logical-and',
+                sourceLocation: condition.sourceLocation,
+                controlsJsxRendering: true,
+                isNegated: condition.isNegated,
+              });
+            }
+          }
+
+          // Fix 32: Recursively process nested JSX with accumulated conditions
+          if (
+            ts.isJsxElement(jsxElement) ||
+            ts.isJsxSelfClosingElement(jsxElement)
+          ) {
+            extractConditionalsFromJsx(
+              jsxElement,
+              context,
+              accumulatedConditions,
+            );
+          }
+        }
+
+        // Fix 32: Also check for nested JSX fragments
+        const jsxFragment = findJsxFragmentInAndChain(expr);
+        if (jsxFragment) {
+          extractConditionalsFromJsx(
+            jsxFragment,
+            context,
+            accumulatedConditions,
+          );
+        }
+      }
+      // If the expression is a ternary, extract its conditional
+      else if (ts.isConditionalExpression(expr)) {
+        // Pass controlsJsxRendering: true since this conditional controls JSX rendering
+        extractConditionalUsage(expr.condition, context, 'ternary', {
+          controlsJsxRendering: true,
+        });
+
+        // Track gating conditions for components in both branches of the ternary
+        // Example: {isError ? <ErrorView /> : <SuccessView />}
+        const conditionPath = StructuredPath.fromNode(
+          unwrapExpression(expr.condition),
+          context.sourceFile,
+        );
+        const sourceLocation = getSourceLocation(expr, context.sourceFile);
+
+        // Recursively process the whenTrue and whenFalse branches for JSX
+        const whenTrue = unwrapExpression(expr.whenTrue);
+        const whenFalse = unwrapExpression(expr.whenFalse);
+
+        // Fix 32: Build conditions for whenTrue branch (parent conditions + ternary condition truthy)
+        const whenTrueConditions: ParentGatingCondition[] = [
+          ...parentConditions,
+          ...(conditionPath
+            ? [
+                {
+                  path: conditionPath.toString(),
+                  sourceLocation,
+                  isNegated: false,
+                },
+              ]
+            : []),
+        ];
+
+        // Fix 32: Build conditions for whenFalse branch (parent conditions + ternary condition falsy)
+        const whenFalseConditions: ParentGatingCondition[] = [
+          ...parentConditions,
+          ...(conditionPath
+            ? [
+                {
+                  path: conditionPath.toString(),
+                  sourceLocation,
+                  isNegated: true,
+                },
+              ]
+            : []),
+        ];
+
+        // Handle whenTrue branch (condition is truthy)
+        if (ts.isJsxElement(whenTrue) || ts.isJsxSelfClosingElement(whenTrue)) {
+          const componentName = getComponentNameFromJsx(whenTrue);
+          if (componentName) {
+            // Fix 32: Add ALL conditions (parent + ternary) as gating conditions
+            for (const condition of whenTrueConditions) {
+              context.addChildBoundaryGatingCondition(componentName, {
+                path: condition.path,
+                conditionType: 'truthiness',
+                location: 'ternary',
+                sourceLocation: condition.sourceLocation,
+                controlsJsxRendering: true,
+                isNegated: condition.isNegated,
+              });
+            }
+          }
+        }
+        if (
+          ts.isJsxElement(whenTrue) ||
+          ts.isJsxSelfClosingElement(whenTrue) ||
+          ts.isJsxFragment(whenTrue)
+        ) {
+          extractConditionalsFromJsx(whenTrue, context, whenTrueConditions);
+        }
+
+        // Handle whenFalse branch (condition is falsy/negated)
+        if (
+          ts.isJsxElement(whenFalse) ||
+          ts.isJsxSelfClosingElement(whenFalse)
+        ) {
+          const componentName = getComponentNameFromJsx(whenFalse);
+          if (componentName) {
+            // Fix 32: Add ALL conditions (parent + ternary) as gating conditions
+            for (const condition of whenFalseConditions) {
+              context.addChildBoundaryGatingCondition(componentName, {
+                path: condition.path,
+                conditionType: 'truthiness',
+                location: 'ternary',
+                sourceLocation: condition.sourceLocation,
+                controlsJsxRendering: true,
+                isNegated: condition.isNegated,
+              });
+            }
+          }
+        }
+        if (
+          ts.isJsxElement(whenFalse) ||
+          ts.isJsxSelfClosingElement(whenFalse) ||
+          ts.isJsxFragment(whenFalse)
+        ) {
+          extractConditionalsFromJsx(whenFalse, context, whenFalseConditions);
+        }
+        // Handle chained ternaries: a ? <A/> : b ? <B/> : <C/>
+        // When whenFalse is another ConditionalExpression, recursively process it
+        else if (ts.isConditionalExpression(whenFalse)) {
+          // Extract conditional usage for the nested ternary's condition
+          extractConditionalUsage(whenFalse.condition, context, 'ternary', {
+            controlsJsxRendering: true,
+          });
+
+          // Get the nested condition path
+          const nestedConditionPath = StructuredPath.fromNode(
+            unwrapExpression(whenFalse.condition),
+            context.sourceFile,
+          );
+          const nestedSourceLocation = getSourceLocation(
+            whenFalse,
+            context.sourceFile,
+          );
+
+          const nestedWhenTrue = unwrapExpression(whenFalse.whenTrue);
+          const nestedWhenFalse = unwrapExpression(whenFalse.whenFalse);
+
+          // Fix 32: Build conditions for nested whenTrue (parent falsy + nested truthy)
+          const nestedWhenTrueConditions: ParentGatingCondition[] = [
+            ...whenFalseConditions, // Parent ternary was falsy to get here
+            ...(nestedConditionPath
+              ? [
+                  {
+                    path: nestedConditionPath.toString(),
+                    sourceLocation: nestedSourceLocation,
+                    isNegated: false,
+                  },
+                ]
+              : []),
+          ];
+
+          // Fix 32: Build conditions for nested whenFalse (parent falsy + nested falsy)
+          const nestedWhenFalseConditions: ParentGatingCondition[] = [
+            ...whenFalseConditions, // Parent ternary was falsy to get here
+            ...(nestedConditionPath
+              ? [
+                  {
+                    path: nestedConditionPath.toString(),
+                    sourceLocation: nestedSourceLocation,
+                    isNegated: true,
+                  },
+                ]
+              : []),
+          ];
+
+          // Handle nested whenTrue branch
+          if (
+            ts.isJsxElement(nestedWhenTrue) ||
+            ts.isJsxSelfClosingElement(nestedWhenTrue)
+          ) {
+            const componentName = getComponentNameFromJsx(nestedWhenTrue);
+            if (componentName) {
+              // Fix 32: Add ALL accumulated conditions
+              for (const condition of nestedWhenTrueConditions) {
+                context.addChildBoundaryGatingCondition(componentName, {
+                  path: condition.path,
+                  conditionType: 'truthiness',
+                  location: 'ternary',
+                  sourceLocation: condition.sourceLocation,
+                  controlsJsxRendering: true,
+                  isNegated: condition.isNegated,
+                });
+              }
+            }
+          }
+          if (
+            ts.isJsxElement(nestedWhenTrue) ||
+            ts.isJsxSelfClosingElement(nestedWhenTrue) ||
+            ts.isJsxFragment(nestedWhenTrue)
+          ) {
+            extractConditionalsFromJsx(
+              nestedWhenTrue,
+              context,
+              nestedWhenTrueConditions,
+            );
+          }
+
+          // Handle nested whenFalse branch (this could be another chained ternary or JSX)
+          if (
+            ts.isJsxElement(nestedWhenFalse) ||
+            ts.isJsxSelfClosingElement(nestedWhenFalse)
+          ) {
+            const componentName = getComponentNameFromJsx(nestedWhenFalse);
+            if (componentName) {
+              // Fix 32: Add ALL accumulated conditions
+              for (const condition of nestedWhenFalseConditions) {
+                context.addChildBoundaryGatingCondition(componentName, {
+                  path: condition.path,
+                  conditionType: 'truthiness',
+                  location: 'ternary',
+                  sourceLocation: condition.sourceLocation,
+                  controlsJsxRendering: true,
+                  isNegated: condition.isNegated,
+                });
+              }
+            }
+          }
+          if (
+            ts.isJsxElement(nestedWhenFalse) ||
+            ts.isJsxSelfClosingElement(nestedWhenFalse) ||
+            ts.isJsxFragment(nestedWhenFalse)
+          ) {
+            extractConditionalsFromJsx(
+              nestedWhenFalse,
+              context,
+              nestedWhenFalseConditions,
+            );
+          }
+          // If nestedWhenFalse is yet another ConditionalExpression, the recursion
+          // will handle it on the next iteration when this function processes it
+          else if (ts.isConditionalExpression(nestedWhenFalse)) {
+            // Recursively handle deeper nesting by wrapping in a synthetic process
+            // We create a fake JsxExpression context to reuse the same logic
+            const syntheticChild = {
+              kind: ts.SyntaxKind.JsxExpression,
+              expression: nestedWhenFalse,
+            } as unknown as ts.JsxExpression;
+            // Process via the main JSX expression handler by recursing
+            // For now, just extract conditionals directly
+            extractConditionalUsage(
+              nestedWhenFalse.condition,
+              context,
+              'ternary',
+              { controlsJsxRendering: true },
+            );
+          }
+        }
+      }
+    }
+    // Recursively process nested JSX elements - Fix 32: pass parent conditions
+    else if (ts.isJsxElement(child)) {
+      // Check if this is a user-defined component (vs intrinsic element like div)
+      const componentName = getComponentNameFromJsx(child);
+      if (componentName) {
+        if (parentConditions.length > 0) {
+          // If there are parent conditions, record them as gating conditions
+          console.log(
+            `[ChildBoundary] ${componentName}: Conditionally rendered with ${parentConditions.length} gating conditions`,
+          );
+          for (const condition of parentConditions) {
+            console.log(
+              `[ChildBoundary] ${componentName}: Adding gating condition path='${condition.path}' isNegated=${condition.isNegated}`,
+            );
+            context.addChildBoundaryGatingCondition(componentName, {
+              path: condition.path,
+              conditionType: 'truthiness',
+              location: 'ternary',
+              sourceLocation: condition.sourceLocation,
+              controlsJsxRendering: true,
+              isNegated: condition.isNegated,
+            });
+          }
+        } else {
+          // No parent conditions - check if it has data props for unconditional tracking
+          console.log(
+            `[ChildBoundary] ${componentName}: Checking for unconditional rendering with data props...`,
+          );
+          const { hasDataProps, dataProps } = hasDataPropsFromParent(
+            child,
+            componentName,
+          );
+          if (hasDataProps) {
+            // Fix: Track unconditionally-rendered children that receive data props
+            // These need to be tracked for flow merging even without gating conditions
+            // Example: <WorkoutsView workouts={workouts} /> - parent controls workouts data
+            console.log(
+              `[ChildBoundary] ${componentName}: TRACKING as unconditionally-rendered with data props: [${dataProps.join(', ')}]`,
+            );
+            context.addChildBoundaryGatingCondition(componentName, {
+              path: '__unconditional__',
+              conditionType: 'truthiness',
+              location: 'unconditional',
+              controlsJsxRendering: true,
+              isNegated: false,
+            });
+          }
+        }
+      }
+      extractConditionalsFromJsx(child, context, parentConditions);
+    }
+    // Handle self-closing JSX elements (e.g., <ScenarioViewer />)
+    else if (ts.isJsxSelfClosingElement(child)) {
+      // Check if this is a user-defined component (vs intrinsic element like div)
+      const componentName = getComponentNameFromJsx(child);
+      if (componentName) {
+        if (parentConditions.length > 0) {
+          // If there are parent conditions, record them as gating conditions
+          console.log(
+            `[ChildBoundary] ${componentName}: Conditionally rendered (self-closing) with ${parentConditions.length} gating conditions`,
+          );
+          for (const condition of parentConditions) {
+            console.log(
+              `[ChildBoundary] ${componentName}: Adding gating condition path='${condition.path}' isNegated=${condition.isNegated}`,
+            );
+            context.addChildBoundaryGatingCondition(componentName, {
+              path: condition.path,
+              conditionType: 'truthiness',
+              location: 'ternary',
+              sourceLocation: condition.sourceLocation,
+              controlsJsxRendering: true,
+              isNegated: condition.isNegated,
+            });
+          }
+        } else {
+          // No parent conditions - check if it has data props for unconditional tracking
+          console.log(
+            `[ChildBoundary] ${componentName}: Checking for unconditional rendering (self-closing) with data props...`,
+          );
+          const { hasDataProps, dataProps } = hasDataPropsFromParent(
+            child,
+            componentName,
+          );
+          if (hasDataProps) {
+            // Fix: Track unconditionally-rendered children that receive data props
+            console.log(
+              `[ChildBoundary] ${componentName}: TRACKING as unconditionally-rendered (self-closing) with data props: [${dataProps.join(', ')}]`,
+            );
+            context.addChildBoundaryGatingCondition(componentName, {
+              path: '__unconditional__',
+              conditionType: 'truthiness',
+              location: 'unconditional',
+              controlsJsxRendering: true,
+              isNegated: false,
+            });
+          }
+        }
+      }
+      // Self-closing elements have no children, so no recursion needed
+    }
+    // Recursively process nested JSX fragments - Fix 32: pass parent conditions
+    else if (ts.isJsxFragment(child)) {
+      extractConditionalsFromJsx(child, context, parentConditions);
+    }
+  }
+}
+
+/**
+ * Options for extractConditionalUsage
+ */
+interface ExtractConditionalOptions {
+  /**
+   * Whether this conditional controls JSX rendering.
+   * Set to true when the conditional appears in a JSX expression like {cond && <Component />}
+   */
+  controlsJsxRendering?: boolean;
+}
+
+/**
+ * Extracts conditional usages from a condition expression for key attribute detection.
+ * This function identifies which attributes are used in conditionals and how they're used.
+ * It also tracks compound conditionals (&&-chains) where all conditions must be true together.
+ *
+ * @param condition The condition expression to analyze
+ * @param context The analysis context
+ * @param location Where this condition appears (if, ternary, logical-and, switch)
+ * @param options Additional options including controlsJsxRendering flag
+ */
+export function extractConditionalUsage(
+  condition: ts.Expression,
+  context: AnalysisContext,
+  location: ConditionalUsage['location'],
+  options: ExtractConditionalOptions = {},
+): void {
+  const { controlsJsxRendering } = options;
+  // Internal recursive function with chain tracking
+  function extractWithChainTracking(
+    expr: ts.Expression,
+    chainInfo: ChainInfo | null,
+    isNegated: boolean,
+  ): void {
+    const unwrapped = unwrapExpression(expr);
+
+    // Handle binary expressions with && (logical AND chains)
+    // Example: `a && b && <Component />` - both a and b are conditional checks
+    if (
+      ts.isBinaryExpression(unwrapped) &&
+      unwrapped.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken
+    ) {
+      // Track if we're creating the chain at this level (root of the chain)
+      const isChainRoot = !chainInfo;
+
+      // If no chainInfo, this is the root of a new chain
+      if (isChainRoot) {
+        const chainLength = countConditionsInAndChain(unwrapped);
+        // Only create chain tracking for chains with 2+ conditions
+        if (chainLength >= 2) {
+          const chainId = `chain_${crypto.randomUUID().slice(0, 8)}`;
+          const chainExpression = unwrapped.getText(context.sourceFile);
+          const compound: CompoundConditional = {
+            chainId,
+            expression:
+              chainExpression.length > 200
+                ? chainExpression.slice(0, 200) + '...'
+                : chainExpression,
+            conditions: [],
+            location,
+            sourceLocation: getSourceLocation(unwrapped, context.sourceFile),
+            controlsJsxRendering,
+          };
+          chainInfo = {
+            chainId,
+            chainLength,
+            chainExpression: compound.expression,
+            currentPosition: 0,
+            compound,
+          };
+        }
+      }
+
+      // Recursively process left side
+      extractWithChainTracking(unwrapped.left, chainInfo, false);
+
+      // Process right side if it's not JSX (JSX is the consequence, not the condition)
+      const rightUnwrapped = unwrapExpression(unwrapped.right);
+      const isJsxConsequence =
+        ts.isJsxElement(rightUnwrapped) ||
+        ts.isJsxSelfClosingElement(rightUnwrapped) ||
+        ts.isJsxFragment(rightUnwrapped);
+
+      if (!isJsxConsequence) {
+        extractWithChainTracking(unwrapped.right, chainInfo, false);
+      }
+
+      // If this is the root of the chain, register the compound conditional
+      if (isChainRoot && chainInfo) {
+        context.addCompoundConditional(chainInfo.compound);
+      }
       return;
     }
 
-    // Check if right is a variable and left is a literal
-    if (rightPath && isLiteralExpression(unwrapped.left)) {
-      const literalValue = getLiteralValue(unwrapped.left, context);
-      context.addConditionalUsage({
-        path: rightPath.toLeftHandSideString(),
-        conditionType: 'comparison',
-        comparedValues: literalValue !== undefined ? [literalValue] : undefined,
-        location,
-      });
+    // Handle binary expressions with || (logical OR)
+    // When OR is inside an && chain, we need to continue chain tracking
+    // and mark conditions as OR alternatives
+    if (
+      ts.isBinaryExpression(unwrapped) &&
+      unwrapped.operatorToken.kind === ts.SyntaxKind.BarBarToken
+    ) {
+      if (chainInfo) {
+        // We're inside an && chain - continue tracking but mark as OR alternatives
+        // Generate an orGroupId so conditions from both sides can be grouped
+        const orGroupId =
+          chainInfo.currentOrGroupId ?? `or_${crypto.randomUUID().slice(0, 8)}`;
+
+        // Process left side with OR group tracking
+        const leftChainInfo = {
+          ...chainInfo,
+          currentOrGroupId: orGroupId,
+        };
+        extractWithChainTracking(unwrapped.left, leftChainInfo, false);
+
+        // Process right side with same OR group
+        // Note: we use leftChainInfo's currentPosition which may have been updated
+        const rightChainInfo = {
+          ...leftChainInfo,
+          currentPosition: chainInfo.currentPosition,
+        };
+        extractWithChainTracking(unwrapped.right, rightChainInfo, false);
+      } else {
+        // Not inside a chain - OR breaks into independent conditional checks
+        extractWithChainTracking(unwrapped.left, null, false);
+        extractWithChainTracking(unwrapped.right, null, false);
+      }
       return;
     }
 
-    // Both sides are variables - record both as comparisons without specific values
-    if (leftPath) {
-      context.addConditionalUsage({
-        path: leftPath.toLeftHandSideString(),
-        conditionType: 'comparison',
-        location,
-      });
+    // Handle comparison operators (===, !==, <, >, <=, >=)
+    // Example: `if (status === 'active')` - status is compared against 'active'
+    if (
+      ts.isBinaryExpression(unwrapped) &&
+      isComparisonOperator(unwrapped.operatorToken.kind)
+    ) {
+      // Try to extract the variable and the compared value
+      const leftPath = StructuredPath.fromNode(
+        unwrapped.left,
+        context.sourceFile,
+      );
+      const rightPath = StructuredPath.fromNode(
+        unwrapped.right,
+        context.sourceFile,
+      );
+
+      // Determine the compared value for computing requiredValue
+      const getRequiredValue = (
+        literalValue: string | undefined,
+        isNegatedComparison: boolean,
+      ): string | boolean | undefined => {
+        if (literalValue === undefined) return undefined;
+        // For !== comparisons, the condition is true when NOT equal to the value
+        // For === comparisons, the condition is true when equal to the value
+        const isNotEqual =
+          unwrapped.operatorToken.kind ===
+            ts.SyntaxKind.ExclamationEqualsEqualsToken ||
+          unwrapped.operatorToken.kind === ts.SyntaxKind.ExclamationEqualsToken;
+        if (isNotEqual) {
+          // !== 'value' means requiredValue is NOT 'value', but we express this as "not 'value'"
+          return `not ${literalValue}`;
+        }
+        return literalValue;
+      };
+
+      // Helper to add a condition
+      const addCondition = (
+        path: string,
+        conditionType: 'comparison' | 'truthiness',
+        comparedValues?: string[],
+        requiredValue?: string | boolean,
+        sourceExpr?: ts.Expression,
+      ) => {
+        const usage: ConditionalUsage = {
+          path,
+          conditionType,
+          comparedValues,
+          location,
+          sourceLocation: getSourceLocation(unwrapped, context.sourceFile),
+          isNegated,
+          controlsJsxRendering,
+        };
+
+        // Check for inline array-derived patterns (.length) on the source expression
+        if (sourceExpr) {
+          const arrayDerived = detectArrayDerivedPattern(sourceExpr);
+          if (arrayDerived) {
+            usage.derivedFrom = {
+              operation: arrayDerived.operation,
+              sourcePath: arrayDerived.sourcePath,
+            };
+          }
+        }
+
+        // Add chain info if part of a compound conditional
+        if (chainInfo) {
+          usage.chainId = chainInfo.chainId;
+          usage.chainPosition = chainInfo.currentPosition;
+          usage.chainLength = chainInfo.chainLength;
+          usage.chainExpression = chainInfo.chainExpression;
+          chainInfo.currentPosition++;
+
+          // Add to compound conditional conditions
+          chainInfo.compound.conditions.push({
+            path,
+            conditionType,
+            comparedValues,
+            isNegated,
+            requiredValue,
+            ...(chainInfo.currentOrGroupId && {
+              orGroupId: chainInfo.currentOrGroupId,
+            }),
+          });
+        }
+
+        context.addConditionalUsage(usage);
+      };
+
+      // Check if left is a variable and right is a literal
+      if (leftPath && isLiteralExpression(unwrapped.right)) {
+        const literalValue = getLiteralValue(unwrapped.right, context);
+        addCondition(
+          leftPath.toLeftHandSideString(),
+          'comparison',
+          literalValue !== undefined ? [literalValue] : undefined,
+          getRequiredValue(literalValue, isNegated),
+          unwrapped.left, // Pass source expression for array derivation detection
+        );
+        return;
+      }
+
+      // Check if right is a variable and left is a literal
+      if (rightPath && isLiteralExpression(unwrapped.left)) {
+        const literalValue = getLiteralValue(unwrapped.left, context);
+        addCondition(
+          rightPath.toLeftHandSideString(),
+          'comparison',
+          literalValue !== undefined ? [literalValue] : undefined,
+          getRequiredValue(literalValue, isNegated),
+          unwrapped.right, // Pass source expression for array derivation detection
+        );
+        return;
+      }
+
+      // Both sides are variables - record both as comparisons without specific values
+      if (leftPath) {
+        addCondition(
+          leftPath.toLeftHandSideString(),
+          'comparison',
+          undefined,
+          undefined,
+          unwrapped.left,
+        );
+      }
+      if (rightPath) {
+        addCondition(
+          rightPath.toLeftHandSideString(),
+          'comparison',
+          undefined,
+          undefined,
+          unwrapped.right,
+        );
+      }
+      return;
     }
-    if (rightPath) {
-      context.addConditionalUsage({
-        path: rightPath.toLeftHandSideString(),
-        conditionType: 'comparison',
-        location,
-      });
+
+    // Handle prefix unary NOT expression: !variable
+    // Example: `if (!isVisible)` - isVisible is a truthiness check (negated)
+    if (
+      ts.isPrefixUnaryExpression(unwrapped) &&
+      unwrapped.operator === ts.SyntaxKind.ExclamationToken
+    ) {
+      extractWithChainTracking(unwrapped.operand, chainInfo, !isNegated);
+      return;
     }
-    return;
-  }
 
-  // Handle prefix unary NOT expression: !variable
-  // Example: `if (!isVisible)` - isVisible is a truthiness check
-  if (
-    ts.isPrefixUnaryExpression(unwrapped) &&
-    unwrapped.operator === ts.SyntaxKind.ExclamationToken
-  ) {
-    extractConditionalUsage(unwrapped.operand, context, location);
-    return;
-  }
+    // Handle simple identifiers or property accesses (truthiness checks)
+    // Example: `if (x)` or `x && <JSX />` - x is checked for truthiness
+    const path = StructuredPath.fromNode(unwrapped, context.sourceFile);
+    if (path && !path.isLiteral()) {
+      const pathStr = path.toLeftHandSideString();
+      const usage: ConditionalUsage = {
+        path: pathStr,
+        conditionType: 'truthiness',
+        location,
+        sourceLocation: getSourceLocation(unwrapped, context.sourceFile),
+        isNegated,
+        controlsJsxRendering,
+      };
+
+      // Check for inline array-derived patterns (.some(), .every(), .includes(), .length)
+      // This populates derivedFrom so downstream code can resolve to the base array path
+      const arrayDerived = detectArrayDerivedPattern(unwrapped);
+      if (arrayDerived) {
+        usage.derivedFrom = {
+          operation: arrayDerived.operation,
+          sourcePath: arrayDerived.sourcePath,
+        };
+      }
 
-  // Handle simple identifiers or property accesses (truthiness checks)
-  // Example: `if (x)` or `x && <JSX />` - x is checked for truthiness
-  const path = StructuredPath.fromNode(unwrapped, context.sourceFile);
-  if (path && !path.isLiteral()) {
-    context.addConditionalUsage({
-      path: path.toLeftHandSideString(),
-      conditionType: 'truthiness',
-      location,
-    });
+      // Add chain info if part of a compound conditional
+      if (chainInfo) {
+        usage.chainId = chainInfo.chainId;
+        usage.chainPosition = chainInfo.currentPosition;
+        usage.chainLength = chainInfo.chainLength;
+        usage.chainExpression = chainInfo.chainExpression;
+        chainInfo.currentPosition++;
+
+        // Add to compound conditional conditions
+        // For truthiness, requiredValue is true if not negated, false if negated
+        chainInfo.compound.conditions.push({
+          path: pathStr,
+          conditionType: 'truthiness',
+          isNegated,
+          requiredValue: !isNegated,
+          ...(chainInfo.currentOrGroupId && {
+            orGroupId: chainInfo.currentOrGroupId,
+          }),
+        });
+      }
+
+      context.addConditionalUsage(usage);
+    }
   }
+
+  // Start extraction with no chain info
+  extractWithChainTracking(condition, null, false);
 }
 
 /**
@@ -300,7 +1558,28 @@ export function processExpression({
   ) {
     markConditionVariablesAsNullable(unwrappedNode, context);
     // Extract conditional usages for key attribute detection
-    extractConditionalUsage(unwrappedNode, context, 'logical-and');
+    // Only call from the OUTERMOST && expression to avoid duplicates
+    // Check if parent is also a && (meaning we're nested)
+    const parent = unwrappedNode.parent;
+    const parentIsAndChain =
+      parent &&
+      ts.isBinaryExpression(parent) &&
+      parent.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken;
+    if (!parentIsAndChain) {
+      extractConditionalUsage(unwrappedNode, context, 'logical-and');
+    }
+  }
+
+  // CRITICAL: Extract conditionals from JSX BEFORE checking child boundaries
+  // JSX elements are NOT scopes - their expressions use variables from the parent scope.
+  // Even if the JSX element is within a child boundary (e.g., because it contains callbacks),
+  // we must still extract conditionals from JSX expression children like {x && <div>...</div>}
+  if (
+    ts.isJsxElement(unwrappedNode) ||
+    ts.isJsxSelfClosingElement(unwrappedNode) ||
+    ts.isJsxFragment(unwrappedNode)
+  ) {
+    extractConditionalsFromJsx(unwrappedNode, context);
   }
 
   // If the node falls within an excluded child scope, stop processing it.
@@ -337,7 +1616,7 @@ export function processExpression({
       const structure = context.getStructure();
 
       // Propagate existing equivalencies for sub-properties
-      for (const [key, value] of Object.entries(equivalentVariables)) {
+      for (const [key, rawValue] of Object.entries(equivalentVariables)) {
         // Check if this equivalency is for a sub-property of the identifier
         // e.g., completeDataStructure['Function Arguments'] or completeDataStructure.foo
         if (
@@ -348,8 +1627,14 @@ export function processExpression({
           const newTargetPath = StructuredPath.fromBase(
             targetPath.toString() + subPath,
           );
-          const valuePath = StructuredPath.fromBase(value);
-          context.addEquivalence(newTargetPath, valuePath);
+          // Handle both string and string[] values
+          const values = Array.isArray(rawValue) ? rawValue : [rawValue];
+          for (const value of values) {
+            if (typeof value === 'string') {
+              const valuePath = StructuredPath.fromBase(value);
+              context.addEquivalence(newTargetPath, valuePath);
+            }
+          }
         }
       }
 
@@ -494,7 +1779,8 @@ export function processExpression({
     // Check if this is an environment variable access
     const fullText = unwrappedNode.getText(context.sourceFile);
     if (
-      fullText.includes('.env.') // simple heuristic for env var access but not great
+      fullText.includes('.env.') || // process.env.X, window.env.X
+      isEnvStoreAccess(fullText) // env.X where env is likely an env config object
     ) {
       context.addEnvironmentVariable(fullText);
     }
@@ -801,6 +2087,14 @@ export function processExpression({
         // e.g., `const tab = segments[0] || 'default'` should trace tab back to segments[0]
         if (operatorKind === ts.SyntaxKind.QuestionQuestionToken) {
           // specifically for ?? we create an equivalence to the left side
+          // IMPORTANT: Also process the left side recursively to apply method semantics
+          // (e.g., for `const segments = splat?.split('/') ?? []`, we need split semantics)
+          processExpression({
+            node: unwrappedNode.left,
+            context,
+            // Don't pass targetPath here - we'll establish equivalence separately below
+          });
+
           if (targetPath) {
             resultPath = StructuredPath.fromNode(
               unwrappedNode.left,
@@ -818,15 +2112,55 @@ export function processExpression({
             );
           }
         } else if (operatorKind === ts.SyntaxKind.BarBarToken) {
-          // For ||, also create an equivalence to the left side
+          // For ||, create equivalences to BOTH sides
           // This enables data flow tracing through fallback expressions
+          // e.g., `const item = items.find(...) || null` should trace to both:
+          //   - items[] (from the find result)
+          //   - null (from the fallback)
           if (targetPath) {
-            resultPath = StructuredPath.fromNode(
+            // Get paths for both sides
+            const leftPath = StructuredPath.fromNode(
               unwrappedNode.left,
               context.sourceFile,
             );
+            const rightPath = StructuredPath.fromNode(
+              unwrappedNode.right,
+              context.sourceFile,
+            );
+
+            // Collect all valid paths
+            const allPaths: StructuredPath[] = [];
+            if (leftPath) allPaths.push(leftPath);
+            if (rightPath) allPaths.push(rightPath);
+
+            // Add multiple equivalencies to track both sources
+            if (allPaths.length > 0) {
+              context.addMultipleEquivalencies(targetPath, allPaths);
+            }
+
+            // Process both sides to capture their internal structures
+            processExpression({
+              node: unwrappedNode.left,
+              context,
+            });
+            processExpression({
+              node: unwrappedNode.right,
+              context,
+            });
+
+            // Register the type for the target path
+            const leftType = context.inferTypeFromNode(unwrappedNode.left);
+            const rightType = context.inferTypeFromNode(unwrappedNode.right);
+            const orResultType = isDefinedType(leftType)
+              ? leftType
+              : rightType || 'unknown';
+            context.addType(targetPath, orResultType);
+
+            // Return early - we've already handled equivalencies with addMultipleEquivalencies
+            // Don't fall through to the generic addEquivalence call below
+            return true;
           }
-          // Note: Unlike ??, we don't set targetPath when there's no target
+          // Note: When there's no targetPath, we don't recursively process
           // because || is often used in boolean contexts where the full expression matters
         }
       } else if (operatorKind === ts.SyntaxKind.InstanceOfKeyword) {
@@ -889,9 +2223,10 @@ export function processExpression({
       return false;
     }
 
-    // Construct empty arguments list just to get the call path
-    // We'll process each argument with its parameter path as targetPath
-    const callPath = StructuredPath.fromNode(unwrappedNode, context.sourceFile);
+    // Build call path using original source text for consistent schema paths.
+    // IMPORTANT: Never use cyScope names in call paths - they are internal identifiers
+    // that should not appear in schema paths or call signatures.
+    const callPath = buildCallPathFromSource(unwrappedNode, context);
 
     // 2. Process all arguments recursively WITH targetPath for proper equivalence
     for (let i = 0; i < unwrappedNode.arguments.length; i++) {
@@ -933,16 +2268,57 @@ export function processExpression({
 
         // Get the source expression path (e.g., the object for obj.method())
         const sourceExpr = unwrappedNode.expression.expression;
-        const sourcePath = StructuredPath.fromNode(
-          sourceExpr,
-          context.sourceFile,
-        );
+        const unwrappedSourceExpr = unwrapExpression(sourceExpr);
+
+        // When the source is a ternary expression like (cond ? arr : arr.slice()),
+        // apply method semantics to BOTH branches directly. The ternary itself isn't
+        // a variable - it's just a choice between two paths that both flow to the result.
+        if (ts.isConditionalExpression(unwrappedSourceExpr)) {
+          const branches = [
+            unwrappedSourceExpr.whenTrue,
+            unwrappedSourceExpr.whenFalse,
+          ];
+
+          for (const branch of branches) {
+            const branchPath = StructuredPath.fromNode(
+              branch,
+              context.sourceFile,
+            );
+            if (branchPath) {
+              const isArraySemantics = semantics instanceof ArrayPushSemantics;
+              const shouldApply =
+                !isArraySemantics ||
+                isLikelyArrayType(branch, context.typeChecker);
+
+              if (shouldApply) {
+                semantics.addEquivalences(callPath, branchPath, context);
+                returnType = semantics.getReturnType();
+                handledBySemantics = true;
+              }
+            }
+          }
+        } else {
+          // Regular (non-ternary) source expression
+          const sourcePath = StructuredPath.fromNode(
+            sourceExpr,
+            context.sourceFile,
+          );
 
-        if (sourcePath) {
-          // Apply method semantics
-          semantics.addEquivalences(callPath, sourcePath, context);
-          returnType = semantics.getReturnType();
-          handledBySemantics = true;
+          if (sourcePath) {
+            // For array-specific semantics (like push), verify the source is actually an array
+            // This prevents router.push() from being mistakenly treated as Array.push()
+            const isArraySemantics = semantics instanceof ArrayPushSemantics;
+            const shouldApply =
+              !isArraySemantics ||
+              isLikelyArrayType(sourceExpr, context.typeChecker);
+
+            if (shouldApply) {
+              // Apply method semantics
+              semantics.addEquivalences(callPath, sourcePath, context);
+              returnType = semantics.getReturnType();
+              handledBySemantics = true;
+            }
+          }
         }
       }
     }
@@ -965,10 +2341,18 @@ export function processExpression({
         );
 
         if (sourcePath) {
-          // Apply method semantics
-          semantics.addEquivalences(callPath, sourcePath, context);
-          returnType = semantics.getReturnType();
-          handledBySemantics = true;
+          // For array-specific semantics (like push), verify the source is actually an array
+          const isArraySemantics = semantics instanceof ArrayPushSemantics;
+          const shouldApply =
+            !isArraySemantics ||
+            isLikelyArrayType(sourceExpr, context.typeChecker);
+
+          if (shouldApply) {
+            // Apply method semantics
+            semantics.addEquivalences(callPath, sourcePath, context);
+            returnType = semantics.getReturnType();
+            handledBySemantics = true;
+          }
         }
       }
     }
@@ -1041,6 +2425,13 @@ export function processExpression({
           // Create a path for this property within the base
           const propPath = targetPath.withProperty(propName);
 
+          // Handle child boundaries (callback functions) in object properties
+          // This establishes equivalency between the property path and the child scope
+          // e.g., columns[0].renderCell → cyScope1()
+          if (context.isChildBoundary(property.initializer)) {
+            context.addChildBoundaryEquivalence(propPath, property.initializer);
+          }
+
           // Process the property value with propPath as targetPath
           // This allows nested object literals to work correctly
           processExpression({
@@ -1340,14 +2731,30 @@ export function processExpression({
     // Extract conditional usages for key attribute detection
     extractConditionalUsage(unwrappedNode.condition, context, 'ternary');
 
+    // Extract conditional effects (setter calls in ternary branches)
+    const knownSetters = findUseStateSetters(context.sourceFile);
+    const effects = extractConditionalEffectsFromTernary(
+      unwrappedNode,
+      context,
+      knownSetters,
+    );
+    for (const effect of effects) {
+      context.addConditionalEffect(effect);
+    }
+
     // Process all parts recursively
     processExpression({
       node: unwrappedNode.condition,
       context,
       typeHint: 'boolean | unknown',
     }); //TODO: could we capture that this is evidence of a boolean type?
-    processExpression({ node: unwrappedNode.whenTrue, context });
-    processExpression({ node: unwrappedNode.whenFalse, context });
+
+    // Process both branches WITH targetPath to establish equivalencies
+    // This is critical for tracing nested properties through ternary assignments
+    // e.g., const items = condition ? arr1 : arr2; items.map(i => i.prop)
+    // We need items to be equivalent to both arr1 AND arr2 for proper tracing
+    processExpression({ node: unwrappedNode.whenTrue, context, targetPath });
+    processExpression({ node: unwrappedNode.whenFalse, context, targetPath });
 
     // Create a path for the whole expression
     const expressionSourcePath = nodeToSource(
@@ -1370,10 +2777,22 @@ export function processExpression({
     // Register type for the expression
     context.addType(expressionSourcePath, resultType);
 
-    // If targetPath is provided, establish equivalence and register type
+    // If targetPath is provided, only register type (don't overwrite branch equivalencies)
+    // The equivalencies to individual branches (set above) are more useful for tracing
+    // than an equivalency to the entire ternary expression text
     if (targetPath) {
-      context.addEquivalence(targetPath, expressionSourcePath);
-      context.addType(targetPath, resultType);
+      // NOTE: We intentionally do NOT add equivalence here.
+      // The branch processing above already added equivalencies:
+      //   targetPath -> whenTrue branch
+      //   targetPath -> whenFalse branch
+      // Adding an equivalence to expressionSourcePath would overwrite those
+      // with a useless equivalence to the ternary text itself.
+      //
+      // Use updateSchemaType instead of addType because:
+      // 1. Branch processing may have already set a type on targetPath
+      // 2. addType has a guard that prevents overwriting specific types with 'unknown'
+      // 3. updateSchemaType bypasses this guard, ensuring the ternary's computed type is used
+      context.updateSchemaType(targetPath, resultType);
     }
 
     return true;
@@ -1456,6 +2875,35 @@ export function processExpression({
 
   // Handle Arrow Functions: (p) => p.prop, (a, b) => { ... }
   if (ts.isArrowFunction(unwrappedNode)) {
+    // If this arrow function is a child boundary (e.g., a .map() callback),
+    // don't process its parameters here - they will be processed when the
+    // child scope is analyzed separately. This prevents parameter variables
+    // from leaking into the parent scope's equivalencies.
+    // Check if this arrow function is a child boundary (i.e., should be processed
+    // as a separate child scope, not here in the parent scope).
+    //
+    // We use two checks because childBoundary positions can be unreliable:
+    // 1. Position-based check (standard isChildBoundary)
+    // 2. Text-based check: if the arrow function text doesn't appear in the
+    //    statement text, it was replaced with a cyScope placeholder
+    const isChildBoundary = context.isChildBoundary(unwrappedNode);
+
+    // Text-based child scope detection for when positions are unreliable
+    const arrowFnText = unwrappedNode.getText(context.sourceFile);
+    const firstLine = arrowFnText.split('\n')[0].trim();
+    const searchText = firstLine.substring(0, Math.min(20, firstLine.length));
+    const isInStatementText = context.statementInfo.text.includes(searchText);
+    const isChildScope = !isInStatementText && arrowFnText.length > 10;
+
+    if (isChildBoundary || isChildScope) {
+      // The method semantics (e.g., ArrayMapSemantics) have already established
+      // the necessary equivalences between the child scope placeholder and array elements
+      if (targetPath) {
+        context.addType(targetPath, 'function');
+      }
+      return true;
+    }
+
     // Create a path for the function
     const functionPath = StructuredPath.empty();
 
@@ -1901,8 +3349,9 @@ export function processExpression({
       }
     }
 
-    // Register component as 'function' type (not 'JSX')
-    context.addType(componentPath, 'function');
+    // Register component as 'jsx-component' type to distinguish from regular function calls
+    // This allows downstream code to identify JSX components and not treat them as method chains
+    context.addType(componentPath, 'jsx-component');
 
     // If targetPath is provided (e.g., in variable assignment), establish equivalence to hardcoded "JSX"
     if (targetPath) {
@@ -2173,6 +3622,9 @@ function processJsxAttribute(
   if (ts.isJsxExpression(attr.initializer) && attr.initializer.expression) {
     const expression = attr.initializer.expression;
     if (context.isChildBoundary(expression)) {
+      // Create equivalency between attribute path and child scope
+      // e.g., Grid().signature[0].renderRow → cyScope1()
+      context.addChildBoundaryEquivalence(attributePath, expression);
       return true;
     }