@codeyam/codeyam-cli 0.1.0-staging.76566f9 → 0.1.0-staging.79ef713

package/packages/ai/src/lib/astScopes/processExpression.js

@@ -5,6 +5,198 @@ import { nodeToSource } from "./nodeToSource.js";
 import { methodRegistry, ArrayPushSemantics } from "./methodSemantics.js";
 import { isArithmeticOperator, isAssignmentOperator, isBitwiseCompoundOperator, isComparisonOperator, isDefinedType, isNumericCompoundOperator, leftOrRightType, unwrapExpression, } from "./sharedPatterns.js";
 import { processBindingPattern } from "./processBindings.js";
+import { extractConditionalEffectsFromTernary, findUseStateSetters, } from "./conditionalEffectsExtractor.js";
+import { detectArrayDerivedPattern } from "./arrayDerivationDetector.js";
+/**
+ * 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, componentName) {
+    const attributes = ts.isJsxElement(node)
+        ? node.openingElement.attributes.properties
+        : node.attributes.properties;
+    const dataProps = [];
+    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) {
+    let tagName;
+    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, sourceFile) {
+    const paths = [];
+    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) {
+    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) {
+    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) {
+    // 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.
  *
@@ -160,6 +352,123 @@ function getSourceLocation(node, sourceFile) {
             : codeSnippet,
     };
 }
+/**
+ * Extracts the root array path from an expression that ends with .map().
+ * Handles chained methods like .filter().map(), .slice().map(), etc.
+ *
+ * Examples:
+ * - items.map(...) → "items"
+ * - data.users.map(...) → "data.users"
+ * - items.filter(...).map(...) → "items"
+ * - items.slice(0, 5).map(...) → "items"
+ */
+function extractArrayPathFromMapCall(expr, sourceFile) {
+    // Walk up the chain to find the root array
+    let current = 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
+ */
+function extractJsxRenderingUsage(expr, context) {
+    const unwrapped = unwrapExpression(expr);
+    const sourceLocation = getSourceLocation(expr, context.sourceFile);
+    // 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) {
+        // 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)
  */
@@ -180,6 +489,368 @@ function countConditionsInAndChain(expr) {
     // Single condition (not an && chain)
     return 1;
 }
+/**
+ * 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, context, parentConditions = []) {
+    // Get children to process
+    let children;
+    if (ts.isJsxElement(node)) {
+        children = node.children;
+    }
+    else if (ts.isJsxFragment(node)) {
+        children = node.children;
+    }
+    // JsxSelfClosingElement has no children
+    if (!children) {
+        return;
+    }
+    for (const child of children) {
+        // Process JSX expressions: {expr}
+        if (ts.isJsxExpression(child) && child.expression) {
+            const expr = unwrapExpression(child.expression);
+            // 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 = [
+                    ...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 = [
+                    ...parentConditions,
+                    ...(conditionPath
+                        ? [
+                            {
+                                path: conditionPath.toString(),
+                                sourceLocation,
+                                isNegated: false,
+                            },
+                        ]
+                        : []),
+                ];
+                // Fix 32: Build conditions for whenFalse branch (parent conditions + ternary condition falsy)
+                const whenFalseConditions = [
+                    ...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 = [
+                        ...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 = [
+                        ...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,
+                        };
+                        // 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);
+        }
+    }
+}
 /**
  * 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.
@@ -188,8 +859,10 @@ function countConditionsInAndChain(expr) {
  * @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, context, location) {
+export function extractConditionalUsage(condition, context, location, options = {}) {
+    const { controlsJsxRendering } = options;
     // Internal recursive function with chain tracking
     function extractWithChainTracking(expr, chainInfo, isNegated) {
         const unwrapped = unwrapExpression(expr);
@@ -214,6 +887,7 @@ export function extractConditionalUsage(condition, context, location) {
                         conditions: [],
                         location,
                         sourceLocation: getSourceLocation(unwrapped, context.sourceFile),
+                        controlsJsxRendering,
                     };
                     chainInfo = {
                         chainId,
@@ -241,12 +915,33 @@ export function extractConditionalUsage(condition, context, location) {
             return;
         }
         // Handle binary expressions with || (logical OR)
-        // OR breaks the chain - each side is independent
+        // 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) {
-            // Both sides of || are independent conditional checks (no chain tracking)
-            extractWithChainTracking(unwrapped.left, null, false);
-            extractWithChainTracking(unwrapped.right, null, false);
+            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;
         }
         // Handle comparison operators (===, !==, <, >, <=, >=)
@@ -272,7 +967,7 @@ export function extractConditionalUsage(condition, context, location) {
                 return literalValue;
             };
             // Helper to add a condition
-            const addCondition = (path, conditionType, comparedValues, requiredValue) => {
+            const addCondition = (path, conditionType, comparedValues, requiredValue, sourceExpr) => {
                 const usage = {
                     path,
                     conditionType,
@@ -280,7 +975,18 @@ export function extractConditionalUsage(condition, context, location) {
                     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;
@@ -295,6 +1001,9 @@ export function extractConditionalUsage(condition, context, location) {
                         comparedValues,
                         isNegated,
                         requiredValue,
+                        ...(chainInfo.currentOrGroupId && {
+                            orGroupId: chainInfo.currentOrGroupId,
+                        }),
                     });
                 }
                 context.addConditionalUsage(usage);
@@ -302,21 +1011,21 @@ export function extractConditionalUsage(condition, context, location) {
             // 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));
+                addCondition(leftPath.toLeftHandSideString(), 'comparison', literalValue !== undefined ? [literalValue] : undefined, getRequiredValue(literalValue, isNegated), unwrapped.left);
                 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));
+                addCondition(rightPath.toLeftHandSideString(), 'comparison', literalValue !== undefined ? [literalValue] : undefined, getRequiredValue(literalValue, isNegated), unwrapped.right);
                 return;
             }
             // Both sides are variables - record both as comparisons without specific values
             if (leftPath) {
-                addCondition(leftPath.toLeftHandSideString(), 'comparison');
+                addCondition(leftPath.toLeftHandSideString(), 'comparison', undefined, undefined, unwrapped.left);
             }
             if (rightPath) {
-                addCondition(rightPath.toLeftHandSideString(), 'comparison');
+                addCondition(rightPath.toLeftHandSideString(), 'comparison', undefined, undefined, unwrapped.right);
             }
             return;
         }
@@ -338,7 +1047,17 @@ export function extractConditionalUsage(condition, context, location) {
                 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,
+                };
+            }
             // Add chain info if part of a compound conditional
             if (chainInfo) {
                 usage.chainId = chainInfo.chainId;
@@ -353,6 +1072,9 @@ export function extractConditionalUsage(condition, context, location) {
                     conditionType: 'truthiness',
                     isNegated,
                     requiredValue: !isNegated,
+                    ...(chainInfo.currentOrGroupId && {
+                        orGroupId: chainInfo.currentOrGroupId,
+                    }),
                 });
             }
             context.addConditionalUsage(usage);
@@ -447,6 +1169,15 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
             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.
     if (context.isChildBoundary(node)) {
         return true;
@@ -475,15 +1206,21 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
             const equivalentVariables = context.getEquivalentVariables();
             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 (key.startsWith(nodePathStr + '.') ||
                     key.startsWith(nodePathStr + '[')) {
                     const subPath = key.substring(nodePathStr.length);
                     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);
+                        }
+                    }
                 }
             }
             // Propagate existing structure entries for sub-properties
@@ -577,7 +1314,8 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
         const propertyPath = objectPath.withProperty(unwrappedNode.name.text);
         // 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
+        if (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 +1539,13 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
                 // 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, context.sourceFile);
                     }
@@ -811,12 +1556,46 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
                     }
                 }
                 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(unwrappedNode.left, context.sourceFile);
+                        // 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 = [];
+                        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
                 }
             }
@@ -894,18 +1673,44 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
                 const semantics = semanticsList[0];
                 // Get the source expression path (e.g., the object for obj.method())
                 const sourceExpr = unwrappedNode.expression.expression;
-                const sourcePath = StructuredPath.fromNode(sourceExpr, context.sourceFile);
-                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;
+                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) {
+                        // 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;
+                        }
                     }
                 }
             }
@@ -1230,6 +2035,12 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
         markConditionVariablesAsNullable(unwrappedNode.condition, context);
         // 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,
@@ -1328,6 +2139,32 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
     }
     // 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();
         // Process parameters