@grafema/core 0.1.0-alpha.1

package/dist/plugins/analysis/ReactAnalyzer.js

@@ -0,0 +1,1153 @@
+/**
+ * ReactAnalyzer - React/Browser domain-specific analysis
+ *
+ * Detects React patterns:
+ * - Components and rendering tree
+ * - Props flow between components
+ * - Event handlers (onClick, onSubmit, etc.)
+ * - Hooks (useState, useEffect, useCallback, useMemo, useRef, useReducer, useContext)
+ * - Browser APIs (localStorage, timers, DOM, observers)
+ * - Edge cases (stale closures, missing cleanup, RAF bugs)
+ */
+import { readFileSync } from 'fs';
+import { parse } from '@babel/parser';
+import traverseModule from '@babel/traverse';
+import { Plugin, createSuccessResult, createErrorResult } from '../Plugin.js';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const traverse = traverseModule.default || traverseModule;
+// React event handlers mapping
+const REACT_EVENTS = {
+    // Mouse events
+    onClick: 'click', onDoubleClick: 'dblclick', onContextMenu: 'contextmenu',
+    onMouseDown: 'mousedown', onMouseUp: 'mouseup', onMouseEnter: 'mouseenter',
+    onMouseLeave: 'mouseleave', onMouseMove: 'mousemove', onMouseOver: 'mouseover',
+    onMouseOut: 'mouseout',
+    // Keyboard events
+    onKeyDown: 'keydown', onKeyUp: 'keyup', onKeyPress: 'keypress',
+    // Focus events
+    onFocus: 'focus', onBlur: 'blur', onFocusCapture: 'focus:capture',
+    // Form events
+    onSubmit: 'submit', onReset: 'reset', onChange: 'change', onInput: 'input',
+    onInvalid: 'invalid',
+    // Touch events
+    onTouchStart: 'touchstart', onTouchMove: 'touchmove', onTouchEnd: 'touchend',
+    onTouchCancel: 'touchcancel',
+    // Drag events
+    onDragStart: 'dragstart', onDrag: 'drag', onDragEnd: 'dragend',
+    onDragEnter: 'dragenter', onDragOver: 'dragover', onDragLeave: 'dragleave',
+    onDrop: 'drop',
+    // Scroll/Wheel events
+    onScroll: 'scroll', onWheel: 'wheel',
+    // Clipboard events
+    onCopy: 'copy', onCut: 'cut', onPaste: 'paste',
+    // Composition events
+    onCompositionStart: 'compositionstart', onCompositionUpdate: 'compositionupdate',
+    onCompositionEnd: 'compositionend',
+    // Media events
+    onPlay: 'play', onPause: 'pause', onEnded: 'ended', onTimeUpdate: 'timeupdate',
+    onLoadedData: 'loadeddata', onLoadedMetadata: 'loadedmetadata',
+    onCanPlay: 'canplay', onWaiting: 'waiting', onSeeking: 'seeking',
+    onSeeked: 'seeked', onError: 'error', onVolumeChange: 'volumechange',
+    // Image events
+    onLoad: 'load',
+    // Animation events
+    onAnimationStart: 'animationstart', onAnimationEnd: 'animationend',
+    onAnimationIteration: 'animationiteration',
+    // Transition events
+    onTransitionEnd: 'transitionend',
+    // Pointer events
+    onPointerDown: 'pointerdown', onPointerUp: 'pointerup', onPointerMove: 'pointermove',
+    onPointerEnter: 'pointerenter', onPointerLeave: 'pointerleave',
+    onPointerCancel: 'pointercancel', onGotPointerCapture: 'gotpointercapture',
+    onLostPointerCapture: 'lostpointercapture'
+};
+// React hooks that need tracking
+const REACT_HOOKS = [
+    'useState', 'useEffect', 'useLayoutEffect', 'useInsertionEffect',
+    'useCallback', 'useMemo', 'useRef', 'useReducer', 'useContext',
+    'useImperativeHandle', 'useDebugValue', 'useDeferredValue',
+    'useTransition', 'useId', 'useSyncExternalStore'
+];
+// Browser APIs that create side effects
+const BROWSER_APIS = {
+    timers: ['setTimeout', 'setInterval', 'requestAnimationFrame', 'requestIdleCallback'],
+    cleanup: {
+        setTimeout: 'clearTimeout',
+        setInterval: 'clearInterval',
+        requestAnimationFrame: 'cancelAnimationFrame',
+        requestIdleCallback: 'cancelIdleCallback'
+    },
+    observers: ['IntersectionObserver', 'ResizeObserver', 'MutationObserver', 'PerformanceObserver'],
+    storage: ['localStorage', 'sessionStorage'],
+    async: ['fetch', 'XMLHttpRequest', 'WebSocket', 'EventSource'],
+    dom: ['document', 'getElementById', 'querySelector', 'querySelectorAll'],
+    workers: ['Worker', 'SharedWorker', 'ServiceWorker'],
+    geolocation: ['grafemagator.geolocation'],
+    notifications: ['Notification'],
+    fullscreen: ['requestFullscreen', 'exitFullscreen'],
+    clipboard: ['grafemagator.clipboard'],
+    history: ['history.pushState', 'history.replaceState'],
+    blocking: ['alert', 'confirm', 'prompt']
+};
+export class ReactAnalyzer extends Plugin {
+    get metadata() {
+        return {
+            name: 'ReactAnalyzer',
+            phase: 'ANALYSIS',
+            priority: 70, // After JSASTAnalyzer and ExpressAnalyzer
+            creates: {
+                nodes: [
+                    'react:component', 'react:state', 'react:effect', 'react:callback',
+                    'react:memo', 'react:ref', 'react:reducer', 'react:context',
+                    'dom:event', 'browser:storage', 'browser:timer', 'browser:observer',
+                    'browser:async', 'browser:worker', 'browser:api',
+                    'canvas:context', 'canvas:draw',
+                    'issue:stale-closure', 'issue:missing-cleanup', 'issue:raf-leak',
+                    'issue:canvas-leak', 'issue:state-after-unmount'
+                ],
+                edges: [
+                    'RENDERS', 'PASSES_PROP', 'HANDLES_EVENT', 'UPDATES_STATE',
+                    'DEPENDS_ON', 'SCHEDULES', 'CLEANS_UP', 'DISPATCHES',
+                    'PROVIDES', 'CONSUMES', 'FORWARDS_REF', 'OBSERVES'
+                ]
+            },
+            dependencies: ['JSASTAnalyzer']
+        };
+    }
+    async execute(context) {
+        try {
+            const { graph } = context;
+            const modules = await this.getModules(graph);
+            const stats = {
+                components: 0,
+                hooks: 0,
+                events: 0,
+                browserAPIs: 0,
+                issues: 0,
+                edges: 0
+            };
+            for (const module of modules) {
+                // Only analyze .jsx, .tsx, or files that import React
+                if (!this.isReactFile(module.file)) {
+                    continue;
+                }
+                try {
+                    const result = await this.analyzeModule(module, graph);
+                    stats.components += result.components;
+                    stats.hooks += result.hooks;
+                    stats.events += result.events;
+                    stats.browserAPIs += result.browserAPIs;
+                    stats.issues += result.issues;
+                    stats.edges += result.edges;
+                }
+                catch (err) {
+                    console.error(`[ReactAnalyzer] Error analyzing ${module.file}:`, err.message);
+                }
+            }
+            console.log(`[ReactAnalyzer] Found ${stats.components} components, ${stats.hooks} hooks, ${stats.events} events, ${stats.issues} issues`);
+            return createSuccessResult({
+                nodes: stats.components + stats.hooks + stats.events + stats.browserAPIs + stats.issues,
+                edges: stats.edges
+            }, stats);
+        }
+        catch (error) {
+            console.error(`[ReactAnalyzer] Error:`, error);
+            return createErrorResult(error);
+        }
+    }
+    isReactFile(filePath) {
+        if (filePath.endsWith('.jsx') || filePath.endsWith('.tsx')) {
+            return true;
+        }
+        // Could also check for React import in .js/.ts files
+        return false;
+    }
+    async analyzeModule(module, graph) {
+        const code = readFileSync(module.file, 'utf-8');
+        const ast = parse(code, {
+            sourceType: 'module',
+            plugins: ['jsx', 'typescript']
+        });
+        return this.analyzeAST(ast, module.file, graph, module.id);
+    }
+    /**
+     * Main AST analysis - can be called directly for testing
+     */
+    async analyzeAST(ast, filePath, graph, moduleId = null) {
+        const analysis = {
+            components: [],
+            hooks: [],
+            events: [],
+            browserAPIs: [],
+            issues: [],
+            edges: []
+        };
+        const importedIdentifiers = new Set();
+        // Collect imported identifiers (stable references)
+        traverse(ast, {
+            ImportDeclaration: (path) => {
+                const node = path.node;
+                for (const specifier of node.specifiers) {
+                    if (specifier.local?.name) {
+                        importedIdentifiers.add(specifier.local.name);
+                    }
+                }
+            }
+        });
+        // First pass: collect component definitions
+        traverse(ast, {
+            // Arrow function components: const App = () => ...
+            VariableDeclarator: (path) => {
+                if (this.isReactComponent(path)) {
+                    const node = path.node;
+                    const name = node.id.name;
+                    const loc = node.loc;
+                    const component = {
+                        id: `react:component#${name}#${filePath}:${loc.start.line}`,
+                        type: 'react:component',
+                        name,
+                        file: filePath,
+                        line: loc.start.line,
+                        column: loc.start.column,
+                        kind: 'arrow'
+                    };
+                    analysis.components.push(component);
+                }
+            },
+            // Function declaration components: function App() {...}
+            FunctionDeclaration: (path) => {
+                if (this.isReactComponent(path)) {
+                    const name = path.node.id?.name;
+                    if (!name)
+                        return;
+                    const loc = path.node.loc;
+                    const component = {
+                        id: `react:component#${name}#${filePath}:${loc.start.line}`,
+                        type: 'react:component',
+                        name,
+                        file: filePath,
+                        line: loc.start.line,
+                        column: loc.start.column,
+                        kind: 'function'
+                    };
+                    analysis.components.push(component);
+                }
+            }
+        });
+        // Second pass: analyze hooks, events, JSX
+        traverse(ast, {
+            CallExpression: (path) => {
+                const callee = path.node.callee;
+                // Detect React hooks
+                if (callee.type === 'Identifier' && REACT_HOOKS.includes(callee.name)) {
+                    const hookData = this.analyzeHook(path, filePath);
+                    if (hookData) {
+                        analysis.hooks.push(hookData);
+                        // Check for issues in hooks
+                        if (callee.name === 'useEffect' || callee.name === 'useLayoutEffect') {
+                            this.checkEffectIssues(path, filePath, analysis, hookData, importedIdentifiers);
+                        }
+                    }
+                }
+                // Detect forwardRef
+                if (callee.type === 'Identifier' && callee.name === 'forwardRef') {
+                    this.analyzeForwardRef(path, filePath, analysis);
+                }
+                // Detect createContext
+                if (callee.type === 'Identifier' && callee.name === 'createContext') {
+                    this.analyzeCreateContext(path, filePath, analysis);
+                }
+                // Detect browser APIs
+                this.analyzeBrowserAPI(path, filePath, analysis);
+            },
+            // JSX elements
+            JSXElement: (path) => {
+                this.analyzeJSXElement(path, filePath, analysis);
+            },
+            // JSX attributes (for event handlers and props)
+            JSXAttribute: (path) => {
+                this.analyzeJSXAttribute(path, filePath, analysis);
+            }
+        });
+        // Add all nodes and edges to graph
+        await this.addToGraph(analysis, graph, moduleId);
+        return {
+            components: analysis.components.length,
+            hooks: analysis.hooks.length,
+            events: analysis.events.length,
+            browserAPIs: analysis.browserAPIs.length,
+            issues: analysis.issues.length,
+            edges: analysis.edges.length
+        };
+    }
+    /**
+     * Check if a function is a React component (returns JSX)
+     */
+    isReactComponent(path) {
+        let hasJSXReturn = false;
+        // Check for arrow function or function
+        const node = path.node;
+        const func = node.init || path.node;
+        if (!func)
+            return false;
+        // Must be a function
+        if (func.type !== 'ArrowFunctionExpression' &&
+            func.type !== 'FunctionExpression' &&
+            func.type !== 'FunctionDeclaration') {
+            return false;
+        }
+        // Name must start with uppercase (React component convention)
+        const pathNode = path.node;
+        const name = pathNode.id?.name;
+        if (!name || !/^[A-Z]/.test(name)) {
+            return false;
+        }
+        // Check if body contains JSX
+        path.traverse({
+            JSXElement: () => { hasJSXReturn = true; },
+            JSXFragment: () => { hasJSXReturn = true; }
+        });
+        return hasJSXReturn;
+    }
+    /**
+     * Analyze React hooks
+     */
+    analyzeHook(path, filePath) {
+        const callee = path.node.callee;
+        const hookName = callee.name;
+        const loc = path.node.loc;
+        const args = path.node.arguments;
+        const hookBase = {
+            file: filePath,
+            line: loc.start.line,
+            column: loc.start.column,
+            hookName
+        };
+        switch (hookName) {
+            case 'useState': {
+                // const [state, setState] = useState(initialValue)
+                const parent = path.parent;
+                if (parent.type === 'VariableDeclarator' &&
+                    parent.id?.type === 'ArrayPattern' &&
+                    parent.id.elements?.length === 2) {
+                    const stateName = parent.id.elements[0]?.name;
+                    const setterName = parent.id.elements[1]?.name;
+                    const initialValue = args[0];
+                    return {
+                        id: `react:state#${stateName}#${filePath}:${loc.start.line}`,
+                        type: 'react:state',
+                        ...hookBase,
+                        stateName,
+                        setterName,
+                        initialValue: this.getExpressionValue(initialValue)
+                    };
+                }
+                break;
+            }
+            case 'useEffect':
+            case 'useLayoutEffect':
+            case 'useInsertionEffect': {
+                // useEffect(() => {...}, [deps])
+                const callback = args[0];
+                const depsArg = args[1];
+                const deps = this.extractDeps(depsArg);
+                const hasCleanup = this.hasCleanupReturn(callback);
+                const effectType = hookName === 'useEffect' ? 'react:effect' :
+                    hookName === 'useLayoutEffect' ? 'react:layout-effect' :
+                        'react:insertion-effect';
+                return {
+                    id: `${effectType}#${filePath}:${loc.start.line}`,
+                    type: effectType,
+                    ...hookBase,
+                    deps,
+                    hasCleanup,
+                    depsType: !depsArg ? 'none' : (deps?.length === 0 ? 'empty' : 'array')
+                };
+            }
+            case 'useCallback': {
+                // const fn = useCallback(() => {...}, [deps])
+                const parent = path.parent;
+                const callbackName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
+                const depsArg = args[1];
+                const deps = this.extractDeps(depsArg);
+                return {
+                    id: `react:callback#${callbackName || 'anonymous'}#${filePath}:${loc.start.line}`,
+                    type: 'react:callback',
+                    ...hookBase,
+                    callbackName,
+                    deps
+                };
+            }
+            case 'useMemo': {
+                // const value = useMemo(() => computation, [deps])
+                const parent = path.parent;
+                const memoName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
+                const depsArg = args[1];
+                const deps = this.extractDeps(depsArg);
+                return {
+                    id: `react:memo#${memoName || 'anonymous'}#${filePath}:${loc.start.line}`,
+                    type: 'react:memo',
+                    ...hookBase,
+                    memoName,
+                    deps
+                };
+            }
+            case 'useRef': {
+                // const ref = useRef(initialValue)
+                const parent = path.parent;
+                const refName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
+                const initialValue = args[0];
+                return {
+                    id: `react:ref#${refName || 'anonymous'}#${filePath}:${loc.start.line}`,
+                    type: 'react:ref',
+                    ...hookBase,
+                    refName,
+                    initialValue: this.getExpressionValue(initialValue)
+                };
+            }
+            case 'useReducer': {
+                // const [state, dispatch] = useReducer(reducer, initialState)
+                const parent = path.parent;
+                if (parent.type === 'VariableDeclarator' &&
+                    parent.id?.type === 'ArrayPattern' &&
+                    parent.id.elements && parent.id.elements.length >= 2) {
+                    const stateName = parent.id.elements[0]?.name;
+                    const dispatchName = parent.id.elements[1]?.name;
+                    const reducerArg = args[0];
+                    const reducerName = reducerArg?.type === 'Identifier' ? reducerArg.name : null;
+                    return {
+                        id: `react:reducer#${stateName}#${filePath}:${loc.start.line}`,
+                        type: 'react:reducer',
+                        ...hookBase,
+                        stateName,
+                        dispatchName,
+                        reducerName
+                    };
+                }
+                break;
+            }
+            case 'useContext': {
+                // const value = useContext(Context)
+                const parent = path.parent;
+                const valueName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
+                const contextArg = args[0];
+                const contextName = contextArg?.type === 'Identifier' ? contextArg.name : null;
+                return {
+                    id: `react:context-use#${contextName || 'unknown'}#${filePath}:${loc.start.line}`,
+                    type: 'react:context-use',
+                    ...hookBase,
+                    valueName,
+                    contextName
+                };
+            }
+            case 'useImperativeHandle': {
+                // useImperativeHandle(ref, () => ({ method1, method2 }), [deps])
+                const refArg = args[0];
+                const refName = refArg?.type === 'Identifier' ? refArg.name : null;
+                const createHandle = args[1];
+                // Extract exposed methods
+                const exposedMethods = [];
+                if (createHandle?.type === 'ArrowFunctionExpression' ||
+                    createHandle?.type === 'FunctionExpression') {
+                    const body = createHandle.body;
+                    if (body.type === 'ObjectExpression') {
+                        const objExpr = body;
+                        for (const prop of objExpr.properties) {
+                            if (prop.key?.name) {
+                                exposedMethods.push(prop.key.name);
+                            }
+                        }
+                    }
+                }
+                return {
+                    id: `react:imperative-handle#${filePath}:${loc.start.line}`,
+                    type: 'react:imperative-handle',
+                    ...hookBase,
+                    refName,
+                    exposedMethods
+                };
+            }
+        }
+        return null;
+    }
+    /**
+     * Extract dependency array from hook
+     */
+    extractDeps(depsArg) {
+        if (!depsArg)
+            return null; // No deps argument
+        if (depsArg.type !== 'ArrayExpression')
+            return ['<dynamic>'];
+        const arrExpr = depsArg;
+        return arrExpr.elements.map(el => {
+            if (!el)
+                return '<empty>';
+            if (el.type === 'Identifier')
+                return el.name;
+            if (el.type === 'MemberExpression') {
+                return this.getMemberExpressionName(el);
+            }
+            return '<expression>';
+        });
+    }
+    getMemberExpressionName(node) {
+        if (node.type !== 'MemberExpression') {
+            return node.name || '<unknown>';
+        }
+        const memExpr = node;
+        const object = this.getMemberExpressionName(memExpr.object);
+        const property = memExpr.property.name || memExpr.property.value || '<computed>';
+        return `${object}.${property}`;
+    }
+    /**
+     * Check if effect callback has cleanup return
+     */
+    hasCleanupReturn(callback) {
+        if (!callback)
+            return false;
+        if (callback.type !== 'ArrowFunctionExpression' &&
+            callback.type !== 'FunctionExpression') {
+            return false;
+        }
+        // Simple AST traversal without using babel traverse
+        const checkForCleanupReturn = (node) => {
+            if (!node)
+                return false;
+            if (node.type === 'ReturnStatement') {
+                const retStmt = node;
+                const arg = retStmt.argument;
+                if (arg && (arg.type === 'ArrowFunctionExpression' ||
+                    arg.type === 'FunctionExpression')) {
+                    return true;
+                }
+            }
+            // Check body
+            const nodeWithBody = node;
+            if (nodeWithBody.body) {
+                if (Array.isArray(nodeWithBody.body)) {
+                    return nodeWithBody.body.some(n => checkForCleanupReturn(n));
+                }
+                else if (nodeWithBody.body.type === 'BlockStatement') {
+                    const blockStmt = nodeWithBody.body;
+                    if (blockStmt.body) {
+                        return blockStmt.body.some(n => checkForCleanupReturn(n));
+                    }
+                }
+                else {
+                    return checkForCleanupReturn(nodeWithBody.body);
+                }
+            }
+            return false;
+        };
+        return checkForCleanupReturn(callback);
+    }
+    /**
+     * Check for issues in useEffect/useLayoutEffect
+     */
+    checkEffectIssues(path, filePath, analysis, hookData, importedIdentifiers = new Set()) {
+        const callback = path.node.arguments[0];
+        if (!callback)
+            return;
+        const deps = hookData.deps;
+        const usedVars = new Set();
+        const setterCalls = new Set();
+        const callbackParams = new Set(); // Track parameters of nested callback functions
+        // Simple recursive AST walker to collect identifiers
+        const collectIdentifiers = (node, parentType = null, isPropertyKey = false) => {
+            if (!node)
+                return;
+            if (node.type === 'Identifier') {
+                const id = node;
+                // Skip if it's a property access key
+                if (!isPropertyKey && !callbackParams.has(id.name)) {
+                    usedVars.add(id.name);
+                }
+                return;
+            }
+            if (node.type === 'MemberExpression') {
+                const memExpr = node;
+                // Check for ref.current pattern (valid for stable refs)
+                if (memExpr.property?.type === 'Identifier' && memExpr.property.name === 'current') {
+                    // This is likely a ref.current access - collect only the ref name, not 'current'
+                    collectIdentifiers(memExpr.object, 'MemberExpression', false);
+                    return;
+                }
+                collectIdentifiers(memExpr.object, 'MemberExpression', false);
+                // Skip property name
+                return;
+            }
+            if (node.type === 'CallExpression') {
+                const callExpr = node;
+                const callee = callExpr.callee;
+                if (callee.type === 'Identifier' && callee.name?.startsWith('set')) {
+                    const arg = callExpr.arguments[0];
+                    if (arg?.type === 'ArrowFunctionExpression' ||
+                        arg?.type === 'FunctionExpression') {
+                        setterCalls.add(callee.name);
+                    }
+                }
+                collectIdentifiers(callee, 'CallExpression', false);
+                callExpr.arguments?.forEach(arg => collectIdentifiers(arg, 'CallExpression', false));
+                return;
+            }
+            if (node.type === 'ObjectProperty') {
+                const prop = node;
+                // Skip key, process value
+                collectIdentifiers(prop.value, 'ObjectProperty', false);
+                return;
+            }
+            // Handle function parameters - skip them (AC-1: callback parameters are not external deps)
+            if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') {
+                const func = node;
+                // Collect parameter names from nested callbacks
+                func.params?.forEach(p => {
+                    if (p.type === 'Identifier' && p.name) {
+                        callbackParams.add(p.name); // Add to global tracking
+                    }
+                });
+                const collectInBody = (bodyNode) => {
+                    if (!bodyNode)
+                        return;
+                    if (bodyNode.type === 'Identifier') {
+                        const id = bodyNode;
+                        if (!callbackParams.has(id.name)) {
+                            usedVars.add(id.name);
+                        }
+                    }
+                    else if (typeof bodyNode === 'object') {
+                        Object.values(bodyNode).forEach(child => {
+                            if (child && typeof child === 'object') {
+                                if (Array.isArray(child)) {
+                                    child.forEach(c => collectInBody(c));
+                                }
+                                else {
+                                    collectInBody(child);
+                                }
+                            }
+                        });
+                    }
+                };
+                collectInBody(func.body);
+                return;
+            }
+            // Recurse into child nodes
+            if (typeof node === 'object') {
+                Object.entries(node).forEach(([key, child]) => {
+                    if (key === 'loc' || key === 'start' || key === 'end' || key === 'type')
+                        return;
+                    if (child && typeof child === 'object') {
+                        if (Array.isArray(child)) {
+                            child.forEach(c => collectIdentifiers(c, node.type, false));
+                        }
+                        else {
+                            collectIdentifiers(child, node.type, false);
+                        }
+                    }
+                });
+            }
+        };
+        collectIdentifiers(callback);
+        // Check for stale closures
+        if (deps !== null && deps.length >= 0) { // Has deps array
+            const depsSet = new Set(deps);
+            // Hooks that don't cause stale closure issues
+            const safeHooks = ['useState', 'useReducer', 'useRef', 'useCallback', 'useMemo',
+                'useEffect', 'useLayoutEffect', 'useContext'];
+            const setterPrefixes = ['set'];
+            for (const used of usedVars) {
+                // Skip safe identifiers
+                if (safeHooks.includes(used))
+                    continue;
+                if (setterPrefixes.some(p => used.startsWith(p)))
+                    continue;
+                if (depsSet.has(used))
+                    continue;
+                if (used === 'console' || used === 'window' || used === 'document')
+                    continue;
+                if (used === 'Math' || used === 'JSON' || used === 'Date')
+                    continue;
+                if (used === 'undefined' || used === 'null' || used === 'true' || used === 'false')
+                    continue;
+                // AC-2: Skip imported identifiers (stable references)
+                if (importedIdentifiers.has(used))
+                    continue;
+                // This variable is used but not in deps - potential stale closure
+                const issue = {
+                    id: `issue:stale-closure#${used}#${filePath}:${hookData.line}`,
+                    type: 'issue:stale-closure',
+                    file: filePath,
+                    line: hookData.line,
+                    variable: used,
+                    hookType: hookData.hookName,
+                    deps: deps,
+                    message: `Variable '${used}' is used in ${hookData.hookName} but not listed in dependencies`
+                };
+                analysis.issues.push(issue);
+            }
+        }
+        // Check for missing cleanup
+        this.checkMissingCleanup(callback, filePath, analysis, hookData);
+    }
+    /**
+     * Check for missing cleanup in effect callback
+     */
+    checkMissingCleanup(callback, filePath, analysis, hookData) {
+        const hasCleanup = hookData.hasCleanup;
+        // Simple recursive AST walker
+        const checkNode = (node, parent = null) => {
+            if (!node || typeof node !== 'object')
+                return;
+            if (node.type === 'CallExpression') {
+                const callExpr = node;
+                const callee = callExpr.callee;
+                const loc = callExpr.loc;
+                // Check for timer APIs
+                if (callee?.type === 'Identifier') {
+                    const api = callee.name;
+                    if (api && BROWSER_APIS.timers.includes(api)) {
+                        // Timer called without storing reference
+                        if (!hasCleanup && api === 'requestAnimationFrame') {
+                            analysis.issues.push({
+                                id: `issue:raf-leak#${filePath}:${loc?.start?.line || 0}`,
+                                type: 'issue:raf-leak',
+                                file: filePath,
+                                line: loc?.start?.line || 0,
+                                message: `requestAnimationFrame called without cleanup - will leak on unmount`
+                            });
+                        }
+                    }
+                }
+            }
+            if (node.type === 'NewExpression') {
+                const newExpr = node;
+                const callee = newExpr.callee;
+                const loc = newExpr.loc;
+                // Check for WebSocket without cleanup
+                if (callee?.type === 'Identifier' && callee.name === 'WebSocket') {
+                    if (!hasCleanup) {
+                        analysis.issues.push({
+                            id: `issue:missing-cleanup#websocket#${filePath}:${loc?.start?.line || 0}`,
+                            type: 'issue:missing-cleanup',
+                            file: filePath,
+                            line: loc?.start?.line || 0,
+                            api: 'WebSocket',
+                            message: `WebSocket created without cleanup - connection will leak on unmount`
+                        });
+                    }
+                }
+                // Check for observers without cleanup
+                if (callee?.type === 'Identifier' && callee.name && BROWSER_APIS.observers.includes(callee.name)) {
+                    if (!hasCleanup) {
+                        analysis.issues.push({
+                            id: `issue:missing-cleanup#${callee.name}#${filePath}:${loc?.start?.line || 0}`,
+                            type: 'issue:missing-cleanup',
+                            file: filePath,
+                            line: loc?.start?.line || 0,
+                            api: callee.name,
+                            message: `${callee.name} created without disconnect in cleanup`
+                        });
+                    }
+                }
+            }
+            // Recurse into child nodes
+            Object.entries(node).forEach(([key, child]) => {
+                if (key === 'loc' || key === 'start' || key === 'end' || key === 'type')
+                    return;
+                if (child && typeof child === 'object') {
+                    if (Array.isArray(child)) {
+                        child.forEach(c => checkNode(c, node));
+                    }
+                    else {
+                        checkNode(child, node);
+                    }
+                }
+            });
+        };
+        checkNode(callback);
+    }
+    /**
+     * Analyze JSX element for component rendering
+     */
+    analyzeJSXElement(path, filePath, analysis) {
+        const openingElement = path.node.openingElement;
+        const elementName = this.getJSXElementName(openingElement.name);
+        // Skip native HTML elements (lowercase)
+        if (/^[a-z]/.test(elementName)) {
+            return;
+        }
+        // This is a React component being rendered
+        const loc = openingElement.loc;
+        // Find parent component
+        let parentComponent = null;
+        let parentPath = path.parentPath;
+        while (parentPath) {
+            if (parentPath.node.type === 'FunctionDeclaration' ||
+                parentPath.node.type === 'ArrowFunctionExpression' ||
+                parentPath.node.type === 'FunctionExpression') {
+                // Check if this function is a component
+                const funcName = this.getFunctionName(parentPath);
+                if (funcName && /^[A-Z]/.test(funcName)) {
+                    parentComponent = funcName;
+                    break;
+                }
+            }
+            parentPath = parentPath.parentPath;
+        }
+        if (parentComponent) {
+            analysis.edges.push({
+                edgeType: 'RENDERS',
+                src: `react:component#${parentComponent}`,
+                dst: `react:component#${elementName}`,
+                file: filePath,
+                line: loc.start.line
+            });
+        }
+    }
+    getJSXElementName(nameNode) {
+        if (nameNode.type === 'JSXIdentifier') {
+            return nameNode.name;
+        }
+        if (nameNode.type === 'JSXMemberExpression') {
+            const memExpr = nameNode;
+            return `${this.getJSXElementName(memExpr.object)}.${memExpr.property.name}`;
+        }
+        return '<unknown>';
+    }
+    getFunctionName(path) {
+        // Arrow function assigned to variable
+        const parent = path.parent;
+        if (parent?.type === 'VariableDeclarator') {
+            return parent.id?.name || null;
+        }
+        // Function declaration
+        const node = path.node;
+        if (node.id?.name) {
+            return node.id.name;
+        }
+        return null;
+    }
+    /**
+     * Analyze JSX attribute for props and event handlers
+     */
+    analyzeJSXAttribute(path, filePath, analysis) {
+        const attr = path.node;
+        if (!attr.name || attr.name.type !== 'JSXIdentifier')
+            return;
+        const attrName = attr.name.name;
+        const loc = attr.loc;
+        // Get parent JSX element info first
+        const jsxOpeningElement = path.parent;
+        let componentName = null;
+        let isReactComponent = false;
+        if (jsxOpeningElement?.type === 'JSXOpeningElement' && jsxOpeningElement.name) {
+            componentName = this.getJSXElementName(jsxOpeningElement.name);
+            isReactComponent = /^[A-Z]/.test(componentName);
+        }
+        // Check if it's an event handler
+        if (REACT_EVENTS[attrName]) {
+            const eventType = REACT_EVENTS[attrName];
+            const handler = attr.value;
+            let handlerName = '<inline>';
+            if (handler?.type === 'JSXExpressionContainer') {
+                const expr = handler.expression;
+                if (expr?.type === 'Identifier') {
+                    handlerName = expr.name;
+                }
+                else if (expr?.type === 'MemberExpression') {
+                    handlerName = this.getMemberExpressionName(expr);
+                }
+            }
+            const event = {
+                id: `dom:event#${eventType}#${filePath}:${loc.start.line}`,
+                type: 'dom:event',
+                eventType,
+                reactProp: attrName,
+                handler: handlerName,
+                file: filePath,
+                line: loc.start.line
+            };
+            analysis.events.push(event);
+        }
+        // For React components (uppercase), create PASSES_PROP edges for all props
+        if (isReactComponent && componentName && attrName !== 'key' && attrName !== 'ref' && attrName !== 'children') {
+            let propValue = '<expression>';
+            const value = attr.value;
+            if (value?.type === 'StringLiteral') {
+                propValue = value.value || '';
+            }
+            else if (value?.type === 'JSXExpressionContainer') {
+                propValue = this.getExpressionValue(value.expression);
+            }
+            else if (value === null) {
+                propValue = 'true'; // Boolean shorthand
+            }
+            // Find parent component
+            let parentComponent = null;
+            let parentPath = path.parentPath;
+            while (parentPath) {
+                const node = parentPath.node;
+                if (node.type === 'FunctionDeclaration' && node.id?.name) {
+                    if (/^[A-Z]/.test(node.id.name)) {
+                        parentComponent = node.id.name;
+                        break;
+                    }
+                }
+                else if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') {
+                    const funcName = this.getFunctionName(parentPath);
+                    if (funcName && /^[A-Z]/.test(funcName)) {
+                        parentComponent = funcName;
+                        break;
+                    }
+                }
+                parentPath = parentPath.parentPath;
+            }
+            if (parentComponent) {
+                analysis.edges.push({
+                    edgeType: 'PASSES_PROP',
+                    src: `react:component#${parentComponent}`,
+                    dst: `react:component#${componentName}`,
+                    propName: attrName,
+                    propValue,
+                    file: filePath,
+                    line: loc.start.line
+                });
+            }
+        }
+    }
+    /**
+     * Analyze forwardRef usage
+     */
+    analyzeForwardRef(path, filePath, analysis) {
+        const loc = path.node.loc;
+        const parent = path.parent;
+        const componentName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
+        if (componentName) {
+            analysis.components.push({
+                id: `react:component#${componentName}#${filePath}:${loc.start.line}`,
+                type: 'react:component',
+                name: componentName,
+                file: filePath,
+                line: loc.start.line,
+                column: loc.start.column,
+                kind: 'forwardRef'
+            });
+        }
+    }
+    /**
+     * Analyze createContext usage
+     */
+    analyzeCreateContext(path, filePath, analysis) {
+        const loc = path.node.loc;
+        const parent = path.parent;
+        const contextName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
+        if (contextName) {
+            const defaultValue = path.node.arguments[0];
+            analysis.hooks.push({
+                id: `react:context#${contextName}#${filePath}:${loc.start.line}`,
+                type: 'react:context',
+                contextName,
+                file: filePath,
+                line: loc.start.line,
+                column: loc.start.column,
+                hookName: 'createContext',
+                defaultValue: this.getExpressionValue(defaultValue)
+            });
+        }
+    }
+    /**
+     * Analyze browser API calls
+     */
+    analyzeBrowserAPI(path, filePath, analysis) {
+        const callee = path.node.callee;
+        const loc = path.node.loc;
+        // Direct function call: setTimeout, fetch, alert
+        if (callee.type === 'Identifier') {
+            const name = callee.name;
+            // Timers
+            if (BROWSER_APIS.timers.includes(name)) {
+                analysis.browserAPIs.push({
+                    id: `browser:timer#${name}#${filePath}:${loc.start.line}`,
+                    type: 'browser:timer',
+                    api: name,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // Blocking APIs
+            if (BROWSER_APIS.blocking.includes(name)) {
+                analysis.browserAPIs.push({
+                    id: `browser:blocking#${name}#${filePath}:${loc.start.line}`,
+                    type: 'browser:blocking',
+                    api: name,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // Fetch
+            if (name === 'fetch') {
+                analysis.browserAPIs.push({
+                    id: `browser:async#fetch#${filePath}:${loc.start.line}`,
+                    type: 'browser:async',
+                    api: 'fetch',
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+        }
+        // Member expression: localStorage.setItem, document.querySelector
+        if (callee.type === 'MemberExpression') {
+            const fullName = this.getMemberExpressionName(callee);
+            // localStorage/sessionStorage
+            if (fullName.startsWith('localStorage.') || fullName.startsWith('sessionStorage.')) {
+                const [storage, method] = fullName.split('.');
+                const operation = method === 'getItem' ? 'read' :
+                    method === 'setItem' ? 'write' :
+                        method === 'removeItem' ? 'delete' : method;
+                analysis.browserAPIs.push({
+                    id: `browser:storage#${storage}:${operation}#${filePath}:${loc.start.line}`,
+                    type: 'browser:storage',
+                    storage,
+                    operation,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // DOM queries
+            if (fullName.startsWith('document.') &&
+                (fullName.includes('querySelector') || fullName.includes('getElementById'))) {
+                analysis.browserAPIs.push({
+                    id: `browser:dom#query#${filePath}:${loc.start.line}`,
+                    type: 'browser:dom',
+                    operation: 'query',
+                    api: fullName,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // History API
+            if (fullName.startsWith('history.') || fullName.startsWith('window.history.')) {
+                analysis.browserAPIs.push({
+                    id: `browser:history#${filePath}:${loc.start.line}`,
+                    type: 'browser:history',
+                    api: fullName,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // Clipboard API
+            if (fullName.includes('clipboard')) {
+                analysis.browserAPIs.push({
+                    id: `browser:clipboard#${filePath}:${loc.start.line}`,
+                    type: 'browser:clipboard',
+                    api: fullName,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // Geolocation
+            if (fullName.includes('geolocation')) {
+                analysis.browserAPIs.push({
+                    id: `browser:geolocation#${filePath}:${loc.start.line}`,
+                    type: 'browser:geolocation',
+                    api: fullName,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // Canvas context
+            if (fullName.match(/\.(fillRect|strokeRect|fillText|strokeText|beginPath|closePath|moveTo|lineTo|arc|fill|stroke|clearRect|drawImage|save|restore|translate|rotate|scale)$/)) {
+                const method = fullName.split('.').pop();
+                analysis.browserAPIs.push({
+                    id: `canvas:draw#${method}#${filePath}:${loc.start.line}`,
+                    type: 'canvas:draw',
+                    method,
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+            // matchMedia
+            if (fullName === 'window.matchMedia' || fullName === 'matchMedia') {
+                analysis.browserAPIs.push({
+                    id: `browser:media-query#${filePath}:${loc.start.line}`,
+                    type: 'browser:media-query',
+                    api: 'matchMedia',
+                    file: filePath,
+                    line: loc.start.line
+                });
+                return;
+            }
+        }
+    }
+    getExpressionValue(expr) {
+        if (!expr)
+            return 'undefined';
+        if (expr.type === 'StringLiteral')
+            return `"${expr.value}"`;
+        if (expr.type === 'NumericLiteral')
+            return String(expr.value);
+        if (expr.type === 'BooleanLiteral')
+            return String(expr.value);
+        if (expr.type === 'NullLiteral')
+            return 'null';
+        if (expr.type === 'Identifier')
+            return expr.name;
+        if (expr.type === 'ObjectExpression')
+            return '{...}';
+        if (expr.type === 'ArrayExpression')
+            return '[...]';
+        if (expr.type === 'ArrowFunctionExpression')
+            return '() => {...}';
+        if (expr.type === 'FunctionExpression')
+            return 'function() {...}';
+        return '<expression>';
+    }
+    /**
+     * Add all analysis results to graph
+     */
+    async addToGraph(analysis, graph, moduleId) {
+        // Add component nodes
+        for (const component of analysis.components) {
+            await graph.addNode(component);
+            if (moduleId) {
+                await graph.addEdge({
+                    type: 'DEFINES',
+                    src: moduleId,
+                    dst: component.id
+                });
+            }
+        }
+        // Add hook nodes
+        for (const hook of analysis.hooks) {
+            await graph.addNode(hook);
+        }
+        // Add event nodes
+        for (const event of analysis.events) {
+            await graph.addNode(event);
+        }
+        // Add browser API nodes
+        for (const api of analysis.browserAPIs) {
+            await graph.addNode(api);
+        }
+        // Add issue nodes
+        for (const issue of analysis.issues) {
+            await graph.addNode(issue);
+        }
+        // Add edges
+        for (const edge of analysis.edges) {
+            const { edgeType, ...rest } = edge;
+            await graph.addEdge({
+                type: edgeType,
+                ...rest
+            });
+        }
+    }
+}