@codeyam/codeyam-cli 0.1.0-staging.596f0eb → 0.1.0-staging.6e699e5

package/analyzer-template/packages/github/dist/utils/src/lib/safeFileName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safeFileName.d.ts","sourceRoot":"","sources":["../../../../../utils/src/lib/safeFileName.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,MAAM,UAShD"}
+{"version":3,"file":"safeFileName.d.ts","sourceRoot":"","sources":["../../../../../utils/src/lib/safeFileName.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,mBAAwB,GAChC,MAAM,CA4BR"}

package/analyzer-template/packages/github/dist/utils/src/lib/safeFileName.js

@@ -1,10 +1,36 @@
-export default function safeFileName(name) {
+/**
+ * Simple hash function for generating unique suffixes.
+ * Uses djb2 algorithm - fast and produces good distribution.
+ * Not cryptographically secure, but sufficient for filename uniqueness.
+ */
+function simpleHash(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash * 33) ^ str.charCodeAt(i);
+    }
+    // Convert to unsigned 32-bit and then to hex
+    return (hash >>> 0).toString(16).padStart(8, '0');
+}
+export default function safeFileName(name, options = {}) {
+    const { maxLength } = options;
     // Replace unsafe characters with underscores, preserving original casing
     // Then trim leading/trailing underscores to avoid malformed route segments
-    const safeSlug = name.replace(/[^a-zA-Z0-9_]+/g, '_').replace(/^_+|_+$/g, '');
+    let safeSlug = name.replace(/[^a-zA-Z0-9_]+/g, '_').replace(/^_+|_+$/g, '');
     if (!safeSlug)
         return '';
     // Ensure it starts with a capital letter (for consistency with Remix routes)
-    return safeSlug.slice(0, 1).toUpperCase() + safeSlug.slice(1);
+    safeSlug = safeSlug.slice(0, 1).toUpperCase() + safeSlug.slice(1);
+    // If maxLength is specified and the slug exceeds it, truncate and add a hash
+    if (maxLength && safeSlug.length > maxLength) {
+        // Create an 8-character hash of the full name for uniqueness
+        const hash = simpleHash(name);
+        // Reserve space for underscore + hash (9 chars total)
+        const truncateLength = maxLength - 9;
+        const truncated = safeSlug.substring(0, truncateLength);
+        // Remove trailing underscore if present (from mid-word truncation)
+        const cleanTruncated = truncated.replace(/_+$/, '');
+        safeSlug = `${cleanTruncated}_${hash}`;
+    }
+    return safeSlug;
 }
 //# sourceMappingURL=safeFileName.js.map

package/analyzer-template/packages/github/dist/utils/src/lib/safeFileName.js.map

@@ -1 +1 @@
-{"version":3,"file":"safeFileName.js","sourceRoot":"","sources":["../../../../../utils/src/lib/safeFileName.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAY;IAC/C,yEAAyE;IACzE,2EAA2E;IAC3E,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAE9E,IAAI,CAAC,QAAQ;QAAE,OAAO,EAAE,CAAC;IAEzB,6EAA6E;IAC7E,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAChE,CAAC"}
+{"version":3,"file":"safeFileName.js","sourceRoot":"","sources":["../../../../../utils/src/lib/safeFileName.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,SAAS,UAAU,CAAC,GAAW;IAC7B,IAAI,IAAI,GAAG,IAAI,CAAC;IAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACpC,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IACD,6CAA6C;IAC7C,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACpD,CAAC;AAWD,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,IAAY,EACZ,UAA+B,EAAE;IAEjC,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAE9B,yEAAyE;IACzE,2EAA2E;IAC3E,IAAI,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAE5E,IAAI,CAAC,QAAQ;QAAE,OAAO,EAAE,CAAC;IAEzB,6EAA6E;IAC7E,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAElE,6EAA6E;IAC7E,IAAI,SAAS,IAAI,QAAQ,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAC7C,6DAA6D;QAC7D,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAE9B,sDAAsD;QACtD,MAAM,cAAc,GAAG,SAAS,GAAG,CAAC,CAAC;QACrC,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;QAExD,mEAAmE;QACnE,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAEpD,QAAQ,GAAG,GAAG,cAAc,IAAI,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/analyzer-template/packages/github/src/lib/loadOrCreateCommit.ts

@@ -124,6 +124,20 @@ export default async function loadOrCreateCommit(
     branchFromDb = newBranches[0];
   }
 
+  // If no branch was found or created (e.g., non-HEAD commit where
+  // listBranchesForHeadCommit returns empty), fall back to the primary branch.
+  // Only do this for baseline commits where the assumption is justified.
+  if (!branchFromDb && baseline && project.branches) {
+    branchFromDb = project.branches.find((b) => b.primary) ?? null;
+  }
+
+  if (!branchFromDb) {
+    throw new Error(
+      `Could not determine branch for commit ${commitSha}. ` +
+        `The commit may not be at the HEAD of any branch, and no primary branch was found.`,
+    );
+  }
+
   commit.branch = branchFromDb;
   branchName = branchFromDb.name;
 

package/analyzer-template/packages/github/src/lib/syncPrimaryBranch.ts

@@ -79,6 +79,8 @@ export default async function syncPrimaryBranch({
       const index = projectBranches.findIndex((b) => b.name === branch.name);
       if (index !== -1) {
         projectBranches[index] = branch;
+      } else {
+        projectBranches.push(branch);
       }
     }
 

package/analyzer-template/packages/process/index.ts

@@ -0,0 +1,2 @@
+// Re-export everything from src/index.ts
+export * from './src/index';

package/analyzer-template/packages/process/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@codeyam/process",
+  "version": "1.0.0",
+  "description": "Process management utilities for CodeYam",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/analyzer-template/packages/process/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*.ts"]
+}

package/analyzer-template/packages/types/index.ts

@@ -42,6 +42,9 @@ export type {
   ScenariosDataStructure,
   DataStructure,
   ConditionalUsage,
+  CompoundConditional,
+  ConditionalEffect,
+  JsxRenderingUsage,
 } from './src/types/ScenariosDataStructure';
 export type {
   Scenario,
@@ -63,6 +66,8 @@ export type {
   AnalysisStatus,
   AnalysisMetadata,
   ReadonlyAnalysis,
+  SourceLocation,
+  ExecutionFlow,
 } from './src/types/Analysis';
 export { EMPTY_SHA_MARKER } from './src/types/Analysis';
 export type { CodeExplanation } from './src/types/CodeExplanation';

package/analyzer-template/packages/types/src/types/Analysis.ts

@@ -17,6 +17,24 @@ import { DeepReadonly } from './DeepReadonly';
 // used for e.g. analyzedTreeSha for analyses that have no meaningful content to hash
 export const EMPTY_SHA_MARKER = '0000000000000000000000000000000000000000';
 
+/** Represents a location in source code */
+export interface SourceLocation {
+  /** Entity name where this usage occurs */
+  entityName: string;
+  /** File path relative to project root */
+  filePath: string;
+  /** Line number (1-based) */
+  lineNumber: number;
+  /** Column number (0-based) */
+  column?: number;
+  /** The code snippet at this location */
+  codeSnippet: string;
+  /** Type of usage: conditional check, render expression, or computation */
+  usageType: 'conditional' | 'render' | 'computation';
+  /** Human-readable description of how the attribute is used here */
+  description?: string;
+}
+
 export interface AnalysisError {
   message: string;
   stack: string;
@@ -24,6 +42,90 @@ export interface AnalysisError {
   phase: 'capture' | 'analyze';
 }
 
+/** Represents a distinct execution path/outcome in a component with the required attribute values */
+export interface ExecutionFlow {
+  /** Unique identifier for this execution flow */
+  id: string;
+  /** Human-readable name (e.g., "Modal visible", "Loading spinner shown") */
+  name: string;
+  /** Description of what the user sees or what behavior occurs */
+  description: string;
+  /** Whether this is an error/exception scenario */
+  isError?: boolean;
+  /** Attribute values required to produce this outcome */
+  requiredValues: {
+    /** Path to the attribute (e.g., "signature[0].showModal") */
+    attributePath: string;
+    /** The required value (descriptive or literal) */
+    value: string;
+    /** Comparison type for the value */
+    comparison:
+      | 'equals'
+      | 'notEquals'
+      | 'truthy'
+      | 'falsy'
+      | 'length>'
+      | 'length<'
+      | 'exists'
+      | 'not-exists';
+    /** Type of the attribute for mock generation */
+    valueType?:
+      | 'string'
+      | 'number'
+      | 'boolean'
+      | 'object'
+      | 'array'
+      | 'null'
+      | 'function';
+    /**
+     * The full original expression as a semantic constraint for LLM reasoning.
+     * Used when the attributePath is a base that needs additional context to
+     * generate correct mock data.
+     *
+     * Examples:
+     * - `scenarios.filter(s => s.active).length > 1`
+     * - `users.some(u => u.role === 'admin' && u.active)`
+     *
+     * The LLM interprets this constraint to generate data that satisfies it.
+     */
+    constraint?: string;
+  }[];
+  /** Visual/behavioral impact level */
+  impact: 'high' | 'medium' | 'low';
+  /** True if this outcome hides/blocks other outcomes (modals, overlays, full-screen states) */
+  blocksOtherFlows?: boolean;
+  /**
+   * True if this flow can only be triggered by user interaction (clicking a button, etc.)
+   * and cannot be controlled via mock data. These flows need Playwright instructions.
+   */
+  interactionRequired?: boolean;
+  /**
+   * Group name for mutually exclusive flows - only ONE flow from a group can be active at a time.
+   * Examples: "status-badge", "active-tab", "modal-state"
+   * Flows in the same group represent alternative states of the same UI element/feature.
+   */
+  exclusiveGroup?: string;
+  /** Code snippet showing where this outcome is determined */
+  codeSnippet?: string;
+  /** Source location in code */
+  sourceLocation?: {
+    lineNumber: number;
+    column?: number;
+  };
+  /**
+   * Priority score for this flow (higher = more important to simulate).
+   * Based on rendering impact: flows that control more content/child components
+   * are prioritized higher. Used for sorting and filtering when there are many flows.
+   */
+  priority?: number;
+  /**
+   * Names of child components whose rendering is controlled by this flow.
+   * Flows that gate child component rendering should have higher priority
+   * as they affect more of the UI.
+   */
+  childComponentsControlled?: string[];
+}
+
 export interface Analysis {
   id?: string;
   projectId: string;
@@ -58,19 +160,8 @@ export interface Analysis {
     }[];
     mergedDataStructure?: Omit<DataStructure, 'equivalentSignatureVariables'>;
     scenariosDataStructure?: ScenariosDataStructure;
-    keyAttributes?: {
-      dependentEntityName?: string;
-      internalPath: string;
-      externalPath: string;
-      dataStructurePath?: string; // Full path like "useDiffModal().diffView" for mapping to mockData
-      description: string;
-      validValueOptions: string[];
-      errorValueOptions: string[];
-      /** The expected type of this attribute (e.g., "string", "boolean", "object") */
-      valueType?: string;
-      /** Dependencies that must have specific values for this attribute to have effect */
-      dependencies?: Record<string, string>[];
-    }[];
+    /** All distinct execution flows/outcomes this entity can produce */
+    executionFlows?: ExecutionFlow[];
     dependencyTree?: DependencyTreeNode;
     dependentAnalyses?: string[];
     dependencyAnalyzedTreeShas?: {

package/analyzer-template/packages/types/src/types/Entity.ts

@@ -101,6 +101,8 @@ export interface Entity {
     previousVersionWithAnalyses?: string;
     isSuperseded?: boolean;
     mockInfo?: any;
+    /** Whether the entity is an async function/component (Server Component in Next.js) */
+    isAsync?: boolean;
   };
   file?: File;
   commit?: Commit;

package/analyzer-template/packages/types/src/types/Scenario.ts

@@ -71,16 +71,11 @@ export interface Scenario {
       diffPercentage?: string;
     }[];
     dataMapping?: { [key: string]: string };
-    // New format: { dataStructurePath: { localVariable, instruction } }
-    // Old format (deprecated): { path: instruction_string }
-    keyAttributeInstructions?: {
-      [key: string]:
-        | string
-        | {
-            localVariable: string;
-            instruction: string;
-          };
-    };
+    /**
+     * IDs of execution flows this scenario covers.
+     * Mock data is generated to satisfy all requiredValues from these flows.
+     */
+    coveredFlows?: string[];
     data?: {
       mockData: { [key: string]: unknown };
       argumentsData: { [key: string]: unknown }[];
@@ -99,6 +94,12 @@ export interface Scenario {
      * all scenarios and can only contain one scenario's mock data at a time.
      */
     runAlone?: boolean;
+    /**
+     * When true, this scenario's screenshots need to be recaptured.
+     * Set when entity code changed but data structure didn't (scenarios reused from previous analysis).
+     * The capture process should check this flag and recapture if needed.
+     */
+    needsRecapture?: boolean;
   };
   previousVersionId?: string;
   analysis?: Analysis;

package/analyzer-template/packages/types/src/types/ScenariosDataStructure.ts

@@ -18,6 +18,173 @@ export interface ConditionalUsage {
   comparedValues?: string[];
   /** Where this conditional usage occurs */
   location: 'if' | 'ternary' | 'logical-and' | 'switch';
+  /** Source location information for this conditional usage */
+  sourceLocation?: {
+    /** Line number (1-based) */
+    lineNumber: number;
+    /** Column number (0-based) */
+    column: number;
+    /** The code snippet containing this conditional */
+    codeSnippet: string;
+  };
+  /** Unique ID for this compound conditional chain (shared by all conditions in same && chain) */
+  chainId?: string;
+  /** Position in the chain (0 = leftmost) */
+  chainPosition?: number;
+  /** Total number of conditions in this chain */
+  chainLength?: number;
+  /** The full original expression (e.g., "a && b && c") */
+  chainExpression?: string;
+  /** Whether this condition is negated (e.g., !foo) */
+  isNegated?: boolean;
+  /**
+   * Whether this conditional controls JSX rendering.
+   * True when the conditional appears in a JSX expression like {cond && <Component />}
+   * or {cond ? <A /> : <B />}. Used to identify high-impact execution flows.
+   */
+  controlsJsxRendering?: boolean;
+
+  /**
+   * Information about how this variable was derived from other variables.
+   * Used to trace derived boolean variables back to their data sources.
+   *
+   * Examples:
+   * - `const hasAnalysis = analysis !== null` → { sourcePath: 'analysis', operation: 'notNull' }
+   * - `const isLoading = status === 'loading'` → { sourcePath: 'status', operation: 'equals', comparedValue: 'loading' }
+   * - `const isBusy = isRunning || isQueued` → { operation: 'or', sourcePaths: ['isRunning', 'isQueued'] }
+   */
+  derivedFrom?: {
+    /** For single-source derivations (notNull, equals, etc.) */
+    sourcePath?: string;
+    /** For multi-source derivations (or, and) */
+    sourcePaths?: string[];
+    /** The operation that derived this variable */
+    operation:
+      | 'notNull'
+      | 'isNull'
+      | 'equals'
+      | 'notEquals'
+      | 'or'
+      | 'and'
+      | 'arrayIncludes'
+      | 'arraySome'
+      | 'arrayEvery'
+      | 'arrayLength';
+    /** For comparison operations, the value being compared to */
+    comparedValue?: string;
+  };
+
+  /**
+   * The full original expression as a semantic constraint for LLM reasoning.
+   * Used when the path contains complex operations (filter, map, etc.) that
+   * can't be simply resolved to a mock value.
+   *
+   * Examples:
+   * - `scenarios.filter(s => s.active).length > 1`
+   * - `users.some(u => u.role === 'admin' && u.active)`
+   *
+   * The LLM can interpret this constraint to generate appropriate mock data.
+   */
+  constraintExpression?: string;
+}
+
+/**
+ * Represents a compound conditional (e.g., a && b && c) where all conditions
+ * must be satisfied together for a code path to execute.
+ */
+export interface CompoundConditional {
+  /** Unique identifier for this compound conditional */
+  chainId: string;
+  /** The full expression (e.g., "scenarios.length > 0 && !displayState.isQueued") */
+  expression: string;
+  /** Individual conditions in order */
+  conditions: {
+    path: string;
+    conditionType: 'truthiness' | 'comparison' | 'switch';
+    comparedValues?: string[];
+    isNegated: boolean;
+    /** Required value for this condition to be true */
+    requiredValue?: string | boolean;
+  }[];
+  /** Where this compound conditional occurs */
+  location: 'if' | 'ternary' | 'logical-and' | 'switch';
+  /** Source location for the entire compound expression */
+  sourceLocation: {
+    lineNumber: number;
+    column: number;
+    codeSnippet: string;
+  };
+  /**
+   * Whether this compound conditional controls JSX rendering.
+   * True when the conditional appears in a JSX expression like {a && b && <Component />}
+   * Used to identify high-impact execution flows.
+   */
+  controlsJsxRendering?: boolean;
+}
+
+/**
+ * Represents the effect of a setter call within a conditional block.
+ * This tracks what state changes occur when specific conditions are met.
+ *
+ * Example: if (data.success) { setShowModal(true); }
+ * - condition: data.success = truthy
+ * - effect: setShowModal called with true
+ */
+export interface ConditionalEffect {
+  /**
+   * Single condition that controls this effect.
+   * Use this for simple if statements with a single condition.
+   */
+  condition?: {
+    /** The path being checked (e.g., "data.success") */
+    path: string;
+    /** Type of condition check */
+    conditionType: 'truthiness' | 'comparison' | 'switch';
+    /** Values being compared against (for comparison/switch) */
+    comparedValues?: string[];
+    /** The value required for this effect to occur */
+    requiredValue: string | boolean;
+  };
+
+  /**
+   * Multiple conditions that all must be true for this effect.
+   * Use this for compound conditions (a && b && c).
+   */
+  conditions?: Array<{
+    /** The path being checked */
+    path: string;
+    /** Type of condition check */
+    conditionType: 'truthiness' | 'comparison' | 'switch';
+    /** Values being compared against */
+    comparedValues?: string[];
+    /** The value required for this condition to be true */
+    requiredValue: string | boolean;
+  }>;
+
+  /**
+   * The effect that occurs when the condition(s) are met.
+   */
+  effect: {
+    /** Type of effect - currently only 'setter' for useState setters */
+    type: 'setter';
+    /** The state variable name (e.g., "showModal" from [showModal, setShowModal]) */
+    stateVariable: string;
+    /** The setter function name (e.g., "setShowModal") */
+    setterName: string;
+    /** The value being set (literal or expression text) */
+    value: string;
+    /** The type of value being set */
+    valueType: 'string' | 'number' | 'boolean' | 'null' | 'dynamic';
+  };
+
+  /**
+   * Source location for this conditional effect
+   */
+  sourceLocation?: {
+    lineNumber: number;
+    column: number;
+    codeSnippet: string;
+  };
 }
 
 export interface DataStructure {
@@ -47,6 +214,63 @@ export interface DataStructure {
   };
   /** Attributes used in conditional statements (if, ternary, switch, &&) */
   conditionalUsages?: { [attributePath: string]: ConditionalUsage[] };
+  /** Compound conditionals grouped by chain (all conditions must be true together) */
+  compoundConditionals?: CompoundConditional[];
+  /** Conditional effects - tracks what setter calls happen inside conditionals */
+  conditionalEffects?: ConditionalEffect[];
+  /** Gating conditions for child components - maps child component names to the conditions that must be true for them to render */
+  childBoundaryGatingConditions?: {
+    [childComponentName: string]: ConditionalUsage[];
+  };
+  /** JSX rendering usages - arrays rendered via .map() and strings interpolated in JSX */
+  jsxRenderingUsages?: JsxRenderingUsage[];
+  /** Derived variables - maps variable names to their derivation info (e.g., hasAnalysis -> { sourcePath: 'analysis', operation: 'notNull' }) */
+  derivedVariables?: {
+    [variableName: string]: {
+      sourcePath?: string;
+      sourcePaths?: string[];
+      operation:
+        | 'notNull'
+        | 'isNull'
+        | 'equals'
+        | 'notEquals'
+        | 'or'
+        | 'and'
+        | 'arrayIncludes'
+        | 'arraySome'
+        | 'arrayEvery'
+        | 'arrayLength';
+      comparedValue?: string;
+    };
+  };
   structure?: any;
   mocksDataStructure?: any;
 }
+
+/**
+ * Represents a JSX rendering usage where arrays or strings are rendered directly.
+ * Used to generate execution flows for array sizes and text lengths
+ * even without explicit conditionals.
+ *
+ * Examples:
+ * - `{items.map(i => <Item {...i} />)}` → array-map usage for 'items'
+ * - `{user.name}` → text-interpolation usage for 'user.name'
+ */
+export interface JsxRenderingUsage {
+  /** The path to the rendered value (e.g., "items", "data.users", "user.name") */
+  path: string;
+  /**
+   * Type of rendering:
+   * - 'array-map': Array rendered via .map() method
+   * - 'text-interpolation': String rendered directly in JSX
+   */
+  renderingType: 'array-map' | 'text-interpolation';
+  /** The detected type of the value being rendered */
+  valueType?: 'array' | 'string' | 'unknown';
+  /** Source location information */
+  sourceLocation?: {
+    lineNumber: number;
+    column: number;
+    codeSnippet: string;
+  };
+}

package/analyzer-template/packages/types/src/types/StatementInfo.ts

@@ -5,6 +5,8 @@ export interface StatementInfo {
   name?: string;
   childBoundaries: {
     name?: string;
+    /** The synthetic scope name (e.g., 'cyScope1') if JSX was extracted */
+    syntheticName?: string;
     start: number;
     end: number;
   }[];

package/analyzer-template/packages/ui-components/src/components/ScenarioDetailInteractiveView.tsx

@@ -1,15 +1,29 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ResizableBox as ResizableBoxImport } from 'react-resizable';
 import type { ResizeCallbackData } from 'react-resizable';
-import 'react-resizable/css/styles.css';
 import { useWebContainer } from '../providers/WebContainerProvider';
 
-// Type assertion to work around React version compatibility issues
-const ResizableBox = ResizableBoxImport as any;
-
 // Check if we're on the client side
 const isClient = typeof window !== 'undefined';
 
+// Dynamically import react-resizable only on client side to avoid SSR issues
+// The library uses `instanceOf(Element)` at module load time which fails in Node.js
+// We use a state-based approach to load the component after mount
+function useResizableBox() {
+  const [ResizableBox, setResizableBox] = useState<any>(null);
+
+  useEffect(() => {
+    // Only import on client side, after component mounts
+    void import('react-resizable').then((module) => {
+      setResizableBox(() => module.ResizableBox);
+    });
+    // Also import the CSS (no type declarations needed for runtime CSS import)
+    // @ts-expect-error - CSS file has no type declarations
+    void import('react-resizable/css/styles.css');
+  }, []);
+
+  return ResizableBox;
+}
+
 interface ScenarioDetailInteractiveViewProps {
   id: string;
   scenarioName?: string;
@@ -37,6 +51,8 @@ const ScenarioDetailInteractiveView = ({
   onScaleChange,
   onDimensionChange,
 }: ScenarioDetailInteractiveViewProps) => {
+  // Dynamically load ResizableBox to avoid SSR issues
+  const ResizableBox = useResizableBox();
   const [isResizing, setIsResizing] = useState(false);
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const [maxWidth, setMaxWidth] = useState(ASSUMED_WIDTH);
@@ -210,8 +226,8 @@ const ScenarioDetailInteractiveView = ({
     window.history.back();
   }, []);
 
-  // Don't render during SSR
-  if (!isClient) {
+  // Don't render during SSR or while ResizableBox is loading
+  if (!isClient || !ResizableBox) {
     return (
       <div className="relative bg-gray-100 w-full h-full flex items-center justify-center">
         <p className="text-gray-500">Loading interactive view...</p>

package/analyzer-template/packages/utils/dist/types/index.d.ts

@@ -19,13 +19,13 @@ export type { Mock } from './src/types/Mock';
 export type { ServerCommand, ProjectMetadata, WebApp, EnvironmentVariable, } from './src/types/ProjectMetadata';
 export type { WebContainerFile, WebContainerDirectory, WebContainerFileSystemTree, } from './src/types/WebContainerFileSystemTree';
 export type { TsConfigPaths } from './src/types/TsConfigPaths';
-export type { ScenariosDataStructure, DataStructure, ConditionalUsage, } from './src/types/ScenariosDataStructure';
+export type { ScenariosDataStructure, DataStructure, ConditionalUsage, CompoundConditional, ConditionalEffect, JsxRenderingUsage, } from './src/types/ScenariosDataStructure';
 export type { Scenario, ScenarioMetadata, PlaywrightInstruction, ExecutionResult, } from './src/types/Scenario';
 export type { ScenarioData } from './src/types/ScenarioData';
 export type { JsonTypeDefinition } from './src/types/JsonTypeDefinition';
 export type { TimelineItem } from './src/types/TimelineItem';
 export type { Entity, ReadonlyEntity, WrapperRequirement, } from './src/types/Entity';
-export type { Analysis, AnalysisError, AnalysisStatus, AnalysisMetadata, ReadonlyAnalysis, } from './src/types/Analysis';
+export type { Analysis, AnalysisError, AnalysisStatus, AnalysisMetadata, ReadonlyAnalysis, SourceLocation, ExecutionFlow, } from './src/types/Analysis';
 export { EMPTY_SHA_MARKER } from './src/types/Analysis';
 export type { CodeExplanation } from './src/types/CodeExplanation';
 export type { EntityType } from './src/types/EntityType';

package/analyzer-template/packages/utils/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../types/index.ts"],"names":[],"mappings":"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"}

package/analyzer-template/packages/utils/dist/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAkEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAkBxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAuEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAkBxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}