@dcoder-x/plugin-shared 0.1.4 → 0.1.6

package/dist/extractors/ComponentExtractor.js

@@ -10,6 +10,8 @@ const parser_1 = require("@babel/parser");
 const traverse_1 = __importDefault(require("@babel/traverse"));
 const InteractionGraphExtractor_1 = require("./InteractionGraphExtractor");
 const ComponentContextResolver_1 = require("./ComponentContextResolver");
+const HtmlTagGuards_1 = require("../injection/HtmlTagGuards");
+const IdStrategy_1 = require("../injection/IdStrategy");
 class ComponentExtractor {
     constructor(source, routes) {
         this.source = source;
@@ -257,21 +259,32 @@ class ComponentExtractor {
                 const tagName = nodePath.node.name?.name;
                 if (!tagName)
                     return;
-                const isInteractive = ['button', 'input', 'select', 'textarea', 'a', 'form'].includes(tagName) ||
-                    nodePath.node.attributes.some((attr) => attr.type === 'JSXAttribute' && attr.name?.name === 'onClick');
-                if (!isInteractive)
+                // Navigation components (Link, NavLink) are included for flow graph building
+                // but flagged so the selector manifest skips them
+                const isNavigationComponent = (tagName === 'Link' || tagName === 'NavLink' || tagName === 'RouterLink') &&
+                    nodePath.node.attributes.some((a) => a.name?.name === 'href' || a.name?.name === 'to');
+                // Only intrinsic HTML tags get data-clippy-id injected; skip React components
+                if (!(0, HtmlTagGuards_1.isIntrinsicTag)(tagName) && !isNavigationComponent)
+                    return;
+                const INTERACTIVE_TAGS = new Set(['button', 'input', 'select', 'textarea', 'a', 'form', 'label']);
+                if (!isNavigationComponent && !INTERACTIVE_TAGS.has(tagName))
                     return;
                 const staticProps = extractStaticProps(nodePath.node.attributes);
                 const nearbyText = extractNearbyText(nodePath);
+                const label = deriveLabel(tagName, staticProps, nearbyText) ?? undefined;
+                const componentName = (0, IdStrategy_1.findEnclosingComponentName)(nodePath) ?? undefined;
                 elements.push({
                     tag: tagName,
                     filePath,
                     route,
                     staticProps,
                     nearbyText,
+                    label,
+                    component: componentName,
                     semanticRole: inferSemanticRole(tagName, staticProps, nearbyText),
                     interactions: inferInteractions(tagName, staticProps),
                     loc: { line: nodePath.node.loc?.start?.line ?? 0 },
+                    isNavigationLink: isNavigationComponent,
                 });
             },
         });
@@ -331,18 +344,64 @@ function extractStaticProps(attributes) {
     return props;
 }
 function extractNearbyText(nodePath) {
-    const texts = [];
     const parent = nodePath.parentPath?.node;
-    if (parent?.children) {
-        for (const child of parent.children) {
-            if (child.type === 'JSXText') {
-                const text = child.value.trim();
-                if (text)
-                    texts.push(text);
+    if (!parent?.children)
+        return [];
+    return extractTextFromChildren(parent.children, 0);
+}
+function extractTextFromChildren(children, depth) {
+    if (depth > 3)
+        return [];
+    const texts = [];
+    for (const child of children) {
+        if (child.type === 'JSXText') {
+            const t = child.value.trim();
+            if (t)
+                texts.push(t);
+        }
+        else if (child.type === 'JSXExpressionContainer') {
+            if (child.expression?.type === 'StringLiteral') {
+                texts.push(child.expression.value);
+            }
+            else if (child.expression?.type === 'TemplateLiteral' &&
+                child.expression.quasis?.length === 1) {
+                const raw = child.expression.quasis[0].value.raw.trim();
+                if (raw)
+                    texts.push(raw);
+            }
+        }
+        else if (child.type === 'JSXElement') {
+            const childTag = child.openingElement?.name?.name || '';
+            // Skip icon-like leaf components — they contribute no readable text
+            if (!/^(Icon|Svg|Loader|Spinner|Arrow|Check|Plus|Minus|Close|X)[A-Z]?/i.test(childTag)) {
+                texts.push(...extractTextFromChildren(child.children || [], depth + 1));
             }
         }
     }
-    return texts;
+    return texts.filter(Boolean);
+}
+function deriveLabel(tag, props, nearbyText) {
+    // Forms: child text is a concatenation of every field label + button inside the form.
+    // That is not a useful description. Use aria-label if present, otherwise take only
+    // the last short text node (typically the submit button label).
+    if (tag === 'form') {
+        if (props['aria-label'])
+            return props['aria-label'];
+        const lastShort = [...nearbyText].reverse().find((t) => t.length >= 2 && t.length <= 30);
+        return lastShort || null;
+    }
+    if (props['aria-label'])
+        return props['aria-label'];
+    if (props['title'])
+        return props['title'];
+    const joined = nearbyText.join(' ').trim();
+    if (joined && joined.length <= 60)
+        return joined;
+    if (props['placeholder'])
+        return props['placeholder'];
+    if (props['name'])
+        return props['name'];
+    return null;
 }
 function inferSemanticRole(tag, props, nearbyText) {
     const label = props['aria-label'] || props['placeholder'] || nearbyText[0] || '';

package/dist/extractors/FlowInferrer.d.ts

@@ -7,6 +7,25 @@ export declare class FlowInferrer {
     infer(): InferredFlow[];
     private buildEdgeGraph;
     private detectLinearFlows;
+    /**
+     * Fix 3b: A coherent chain stays within the same top-level route domain.
+     * A chain that jumps from /auth/* to / or from /dashboard/* to /auth/signup
+     * is an artifact of footer/layout navigation links, not a real user flow.
+     */
+    private isCoherentChain;
     private detectInteractionFlows;
     private buildChain;
+    private generateIntentPatterns;
+    /**
+     * Returns true if a string is a usable user intent phrase.
+     * Rejects blocklisted words, PascalCase component names, very short strings,
+     * and URL-like strings.
+     */
+    private isValidIntentPattern;
+    /**
+     * Fix 4: Remove intent patterns that appear across more than 30% of all flows.
+     * These are structural navigation phrases (sidebar, footer links) that ended up
+     * attached to many unrelated flows rather than genuine user intents.
+     */
+    private deduplicateCrossFlowNoise;
 }

package/dist/extractors/FlowInferrer.js

@@ -1,6 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowInferrer = void 0;
+const SEMANTIC_INTENT_PATTERNS = {
+    'login': ['log in', 'sign in', 'login'],
+    'signup': ['sign up', 'create account', 'register', 'get started'],
+    'register': ['register', 'sign up', 'create account'],
+    'forgot-password': ['forgot password', 'reset password', 'recover account'],
+    'reset-password': ['reset my password', 'set new password', 'change password'],
+    'verify': ['verify email', 'verify account', 'confirm email'],
+    'otp': ['enter code', 'verify code', 'enter otp'],
+    'billing': ['upgrade plan', 'manage billing', 'change subscription', 'view billing'],
+    'payment-method': ['add payment method', 'update card', 'change payment'],
+    'settings': ['settings', 'account settings', 'preferences'],
+    'team': ['invite team member', 'manage team', 'add team member'],
+    'forms': ['view forms', 'manage forms', 'create form', 'my forms'],
+    'builder': ['build form', 'form builder', 'edit form'],
+    'submissions': ['view submissions', 'form submissions', 'see responses'],
+    'analytics': ['view analytics', 'form analytics', 'see stats'],
+    'templates': ['view templates', 'browse templates', 'use template'],
+    'studio': ['template studio', 'create template'],
+    'transactions': ['view transactions', 'transaction history', 'payment history'],
+    'documents': ['view documents', 'open document', 'my documents'],
+    'integrations': ['integrations', 'connect integration', 'manage integrations'],
+    'developer': ['developer settings', 'api keys', 'developer dashboard'],
+    'automations': ['automations', 'manage automations', 'view automations'],
+    'campaigns': ['campaigns', 'view campaigns', 'manage campaigns'],
+    'website': ['website', 'manage website'],
+    'workflows': ['workflows', 'manage workflows'],
+    'invite': ['accept invite', 'join team'],
+};
+// Fix 4: words that are never meaningful user intent phrases
+const INTENT_BLOCKLIST = new Set([
+    'back', 'next', 'continue', 'click', 'button', 'here', 'more',
+    'loader2', 'loader', 'spinner', 'close', 'x', 'menu', 'open',
+    'cancel', 'ok', 'yes', 'no', 'loading', 'view all', 'learn more',
+    'read more', 'see more', 'link', 'skip', 'done', 'go',
+]);
 class FlowInferrer {
     constructor(routes, elements, components) {
         this.routes = routes;
@@ -11,24 +46,39 @@ class FlowInferrer {
         const edges = this.buildEdgeGraph();
         const routeFlows = this.detectLinearFlows(edges);
         const interactionFlows = this.detectInteractionFlows();
-        return [...routeFlows, ...interactionFlows];
+        const combined = [...routeFlows, ...interactionFlows];
+        // Fix 4: remove patterns that appear in too many flows — they are structural
+        // navigation chrome (sidebars, footers) rather than user intent signals
+        return this.deduplicateCrossFlowNoise(combined);
     }
+    // ---------------------------------------------------------------------------
+    // Edge graph
+    // ---------------------------------------------------------------------------
     buildEdgeGraph() {
         const edges = [];
         const routePaths = new Set(this.routes.map((r) => r.path));
         for (const el of this.elements) {
+            const isNav = el.tag === 'a' || el.isNavigationLink === true;
             const href = el.staticProps['href'] || el.staticProps['to'];
-            if (el.tag === 'a' && href && routePaths.has(href)) {
-                edges.push({
-                    from: el.route,
-                    to: href,
-                    trigger: el.staticProps['aria-label'] || el.nearbyText[0] || 'link',
-                    confidence: 0.85,
-                });
-            }
+            if (!isNav || !href)
+                continue;
+            if (!routePaths.has(href))
+                continue;
+            const triggerText = el.staticProps['aria-label'] ||
+                el.label ||
+                el.nearbyText[0] ||
+                'link';
+            // Fix 3a: demote confidence for elements from layout/footer/header files.
+            // These links appear on every page and corrupt flow chains when followed.
+            const isLayoutSource = /footer|layout|header|navbar|sidebar|navigation/i.test(el.filePath || '');
+            const confidence = isLayoutSource ? 0.3 : 0.85;
+            edges.push({ from: el.route, to: href, trigger: triggerText, confidence });
         }
         return edges;
     }
+    // ---------------------------------------------------------------------------
+    // Linear flow detection
+    // ---------------------------------------------------------------------------
     detectLinearFlows(edges) {
         const adjacency = new Map();
         for (const edge of edges) {
@@ -42,7 +92,11 @@ class FlowInferrer {
             if (visited.has(route.path))
                 continue;
             const chain = this.buildChain(route.path, adjacency, new Set());
-            if (chain.length >= 2) {
+            if (chain.length >= 2 && this.isCoherentChain(chain)) {
+                const chainEdges = edges.filter((e) => {
+                    const s = new Set(chain);
+                    return s.has(e.from) && s.has(e.to);
+                });
                 flows.push({
                     id: `flow_${flows.length + 1}`,
                     name: chain
@@ -50,29 +104,47 @@ class FlowInferrer {
                         .join(' -> '),
                     page: chain[0],
                     steps: chain,
-                    edges: edges.filter((e) => {
-                        const s = new Set(chain);
-                        return s.has(e.from) && s.has(e.to);
-                    }),
+                    edges: chainEdges,
+                    intentPatterns: this.generateIntentPatterns(chain, chainEdges),
                 });
                 chain.forEach((p) => visited.add(p));
             }
         }
         return flows;
     }
+    /**
+     * Fix 3b: A coherent chain stays within the same top-level route domain.
+     * A chain that jumps from /auth/* to / or from /dashboard/* to /auth/signup
+     * is an artifact of footer/layout navigation links, not a real user flow.
+     */
+    isCoherentChain(chain) {
+        const firstSegment = (p) => p.split('/').filter(Boolean)[0] ?? 'root';
+        const domain = firstSegment(chain[0]);
+        return chain.every((r) => firstSegment(r) === domain);
+    }
+    // ---------------------------------------------------------------------------
+    // Interaction flow detection
+    // ---------------------------------------------------------------------------
     detectInteractionFlows() {
-        if (!this.components || this.components.length === 0) {
+        if (!this.components || this.components.length === 0)
             return [];
-        }
         const flows = [];
         for (const component of this.components) {
             for (const interaction of component.interactions || []) {
-                const routePath = component.route || '/';
                 if (!interaction.trigger?.event)
                     continue;
+                if (!interaction.effect || interaction.effect.waitStrategy === 'none')
+                    continue;
+                const routePath = component.route || '/';
+                const effectTarget = interaction.effect.selector ||
+                    (interaction.effect.rendersWhenTrue
+                        ? `[data-clippy-component='${interaction.effect.rendersWhenTrue}']`
+                        : null);
+                if (!effectTarget)
+                    continue;
                 flows.push({
                     id: `flow_${flows.length + 1}`,
-                    name: `${routePath} ${interaction.trigger.event}`,
+                    name: interaction.effect.rendersWhenTrue || interaction.trigger.event,
                     page: routePath,
                     steps: [routePath],
                     edges: [
@@ -83,11 +155,15 @@ class FlowInferrer {
                             confidence: 0.65,
                         },
                     ],
+                    intentPatterns: [],
                 });
             }
         }
         return flows;
     }
+    // ---------------------------------------------------------------------------
+    // Chain builder
+    // ---------------------------------------------------------------------------
     buildChain(start, adjacency, seen) {
         if (seen.has(start))
             return [];
@@ -98,5 +174,67 @@ class FlowInferrer {
         const best = [...next].sort((a, b) => b.confidence - a.confidence)[0];
         return [start, ...this.buildChain(best.to, adjacency, seen)];
     }
+    // ---------------------------------------------------------------------------
+    // Intent pattern generation (Fix 4)
+    // ---------------------------------------------------------------------------
+    generateIntentPatterns(chain, edges) {
+        const patterns = new Set();
+        // 1. Route-segment semantic lookup
+        for (const routePath of chain) {
+            const segments = routePath.split('/').filter(Boolean);
+            for (const segment of segments) {
+                const clean = segment.replace(/[\[\]$:]/g, '').toLowerCase();
+                const known = SEMANTIC_INTENT_PATTERNS[clean];
+                if (known)
+                    known.forEach((p) => patterns.add(p));
+            }
+        }
+        // 2. Link/button trigger text from the edges — apply noise filter
+        for (const edge of edges) {
+            const trigger = edge.trigger?.trim();
+            if (trigger && this.isValidIntentPattern(trigger)) {
+                patterns.add(trigger.toLowerCase());
+            }
+        }
+        return Array.from(patterns).filter(Boolean);
+    }
+    /**
+     * Returns true if a string is a usable user intent phrase.
+     * Rejects blocklisted words, PascalCase component names, very short strings,
+     * and URL-like strings.
+     */
+    isValidIntentPattern(pattern) {
+        if (!pattern || pattern.length < 4)
+            return false;
+        const lower = pattern.toLowerCase();
+        if (INTENT_BLOCKLIST.has(lower))
+            return false;
+        // Reject PascalCase strings — these are component names leaking through
+        if (/^[A-Z][a-zA-Z0-9]+$/.test(pattern))
+            return false;
+        // Reject paths and URLs
+        if (pattern.startsWith('/') || pattern.startsWith('http'))
+            return false;
+        return true;
+    }
+    /**
+     * Fix 4: Remove intent patterns that appear across more than 30% of all flows.
+     * These are structural navigation phrases (sidebar, footer links) that ended up
+     * attached to many unrelated flows rather than genuine user intents.
+     */
+    deduplicateCrossFlowNoise(flows) {
+        if (flows.length === 0)
+            return flows;
+        const threshold = Math.max(3, Math.ceil(flows.length * 0.3));
+        const counts = new Map();
+        flows.forEach((f) => (f.intentPatterns ?? []).forEach((p) => counts.set(p, (counts.get(p) ?? 0) + 1)));
+        const globalNoise = new Set([...counts.entries()].filter(([, n]) => n > threshold).map(([p]) => p));
+        if (globalNoise.size === 0)
+            return flows;
+        return flows.map((f) => ({
+            ...f,
+            intentPatterns: (f.intentPatterns ?? []).filter((p) => !globalNoise.has(p)),
+        }));
+    }
 }
 exports.FlowInferrer = FlowInferrer;

package/dist/extractors/InteractionGraphExtractor.d.ts

@@ -2,7 +2,7 @@ import type { NodePath } from '@babel/traverse';
 import type { ComponentInteraction } from '../types';
 /**
  * Extracts interaction graphs from React component ASTs.
- * Maps event handlers -> state mutations -> conditional renders and effects.
+ * Maps event handlers -> state mutations -> conditional renders, navigation, and async effects.
  */
 export declare class InteractionGraphExtractor {
     private contextResolver;
@@ -10,25 +10,19 @@ export declare class InteractionGraphExtractor {
      * Extract all interactions (trigger -> effect mappings) from a component.
      */
     extractInteractions(componentPath: NodePath<any>, componentName: string): ComponentInteraction[];
+    private buildInteractionFromSetters;
     /**
-     * Extract trigger/effect pair from a JSX element with an event handler.
+     * Detect router.push() / router.replace() / navigate() calls inside a handler.
+     * Returns the destination route string if found, otherwise null.
      */
-    private extractTriggerAndEffect;
+    private resolveRouterNavigation;
+    private findHandlerBody;
+    private extractRouterCallFromNode;
     private resolveStateSettersForAttribute;
     private collectSettersFromNode;
-    /**
-     * Find conditional renders/effects that depend on a state variable.
-     * Looks for logical expressions and ternaries using the state var.
-     */
     private findConditionalEffect;
     private findConditionalEffectInAncestors;
     private findConditionalEffectInComponent;
-    /**
-     * Check if a node references a specific state variable by name.
-     */
     private nodeReferencesState;
-    /**
-     * Extract component name from a JSX element or identifier.
-     */
     private extractComponentNameFromNode;
 }