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

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

@@ -0,0 +1,67 @@
+import buildStartCommand from './buildStartCommand';
+import * as path from 'path';
+/**
+ * Find which webapp a component belongs to based on its file path.
+ * Returns the webapp with the most specific (longest) path match.
+ */
+function findWebAppForComponent(componentPath, webapps) {
+    if (!webapps || webapps.length === 0) {
+        return undefined;
+    }
+    if (webapps.length === 1) {
+        return webapps[0];
+    }
+    // Normalize the component path
+    const normalizedComponentPath = path.normalize(componentPath);
+    // Sort webapps by path length (descending) to match most specific path first
+    const sortedWebapps = [...webapps].sort((a, b) => (b.path?.length ?? 0) - (a.path?.length ?? 0));
+    // Find the webapp whose path is a prefix of the component path
+    for (const webapp of sortedWebapps) {
+        const webappPath = path.normalize(webapp.path ?? '.');
+        // Check if component is within this webapp
+        if (webappPath === '.') {
+            // Root webapp - matches everything (but we check others first due to sorting)
+            return webapp;
+        }
+        // Check if component path starts with webapp path
+        if (normalizedComponentPath.startsWith(webappPath + path.sep) ||
+            normalizedComponentPath === webappPath) {
+            return webapp;
+        }
+    }
+    // Fallback to first webapp
+    return webapps[0];
+}
+/**
+ * Gets comprehensive webapp information for a given file path.
+ *
+ * This function:
+ * - Finds the correct webapp for the file path
+ * - Builds the complete start command with environment variables
+ * - Returns all relevant webapp metadata
+ */
+export default function getWebappInfo(options) {
+    const { filePath, webapps, environmentVariables, port, packageManager } = options;
+    if (!webapps || webapps.length === 0) {
+        throw new Error('No webapps configured. Please run CodeYam init again.');
+    }
+    const webapp = findWebAppForComponent(filePath, webapps);
+    if (!webapp) {
+        throw new Error('Could not find webapp for file path: ' + filePath);
+    }
+    const startCommand = buildStartCommand({
+        webapp,
+        port,
+        environmentVariables,
+        packageManager,
+    });
+    return {
+        webapp,
+        webappPath: webapp.path ?? '.',
+        framework: webapp.framework,
+        packageManager: webapp.packageManager ?? packageManager,
+        startCommand,
+        url: `http://localhost:${port}/static/codeyam-sample`,
+    };
+}
+//# sourceMappingURL=getWebappInfo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getWebappInfo.js","sourceRoot":"","sources":["../../../../../../utils/src/lib/startCommand/getWebappInfo.ts"],"names":[],"mappings":"AACA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAmB7B;;;GAGG;AACH,SAAS,sBAAsB,CAC7B,aAAqB,EACrB,OAAiB;IAEjB,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,+BAA+B;IAC/B,MAAM,uBAAuB,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAE9D,6EAA6E;IAC7E,MAAM,aAAa,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CACrC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,CACxD,CAAC;IAEF,+DAA+D;IAC/D,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC;QAEtD,2CAA2C;QAC3C,IAAI,UAAU,KAAK,GAAG,EAAE,CAAC;YACvB,8EAA8E;YAC9E,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,kDAAkD;QAClD,IACE,uBAAuB,CAAC,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;YACzD,uBAAuB,KAAK,UAAU,EACtC,CAAC;YACD,OAAO,MAAM,CAAC;QAChB,CAAC;IACH,CAAC;IAED,2BAA2B;IAC3B,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AACpB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,OAA6B;IAE7B,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,cAAc,EAAE,GACrE,OAAO,CAAC;IAEV,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrC,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM,MAAM,GAAG,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAEzD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,uCAAuC,GAAG,QAAQ,CAAC,CAAC;IACtE,CAAC;IAED,MAAM,YAAY,GAAG,iBAAiB,CAAC;QACrC,MAAM;QACN,IAAI;QACJ,oBAAoB;QACpB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO;QACL,MAAM;QACN,UAAU,EAAE,MAAM,CAAC,IAAI,IAAI,GAAG;QAC9B,SAAS,EAAE,MAAM,CAAC,SAAS;QAC3B,cAAc,EAAE,MAAM,CAAC,cAAc,IAAI,cAAc;QACvD,YAAY;QACZ,GAAG,EAAE,oBAAoB,IAAI,wBAAwB;KACtD,CAAC;AACJ,CAAC"}

package/analyzer-template/packages/github/dist/utils/src/lib/startCommand/index.d.ts

@@ -0,0 +1,3 @@
+export { default as buildStartCommand, type BuildStartCommandOptions, } from './buildStartCommand';
+export { default as getWebappInfo, type GetWebappInfoOptions, type WebappInfo, } from './getWebappInfo';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../utils/src/lib/startCommand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,oBAAoB,EACzB,KAAK,UAAU,GAChB,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,3 @@
+export { default as buildStartCommand, } from './buildStartCommand';
+export { default as getWebappInfo, } from './getWebappInfo';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../utils/src/lib/startCommand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,iBAAiB,GAE7B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,OAAO,IAAI,aAAa,GAGzB,MAAM,iBAAiB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { getSupabase } from '~codeyam/supabase';
+import { getSupabase } from '~codeyam/database';
 import { Project } from '~codeyam/types';
 import { createProjectOctokit } from './createProjectOctokit';
 

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

@@ -4,7 +4,7 @@ import {
   upsertBranches,
   upsertCommits,
   upsertGithubUser,
-} from '~codeyam/supabase';
+} from '~codeyam/database';
 import { Project } from '~codeyam/types';
 import { safeStringify } from '~codeyam/utils';
 import {
@@ -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/syncBranches.ts

@@ -1,4 +1,4 @@
-import { loadBranches, upsertBranches } from '~codeyam/supabase';
+import { loadBranches, upsertBranches } from '~codeyam/database';
 import { Branch, GithubRepoData } from '~codeyam/types';
 import getCommits from './getCommits';
 import { Octokit } from '@octokit/rest';

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

@@ -1,4 +1,4 @@
-import { loadBranches, upsertBranches } from '~codeyam/supabase';
+import { loadBranches, upsertBranches } from '~codeyam/database';
 import { Project } from '~codeyam/types';
 import { createProjectOctokit } from './createProjectOctokit';
 

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

@@ -1,4 +1,4 @@
-import { loadBranches, upsertBranches } from '~codeyam/supabase';
+import { loadBranches, upsertBranches } from '~codeyam/database';
 import { Branch, Project } from '~codeyam/types';
 import getRepoInfo from './getRepoInfo';
 
@@ -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/github/src/lib/syncPullRequest.ts

@@ -2,7 +2,7 @@ import {
   createOrUpdateBranchCommitStats,
   upsertBranches,
   upsertCommits,
-} from '~codeyam/supabase';
+} from '~codeyam/database';
 import { Branch, Commit, Project } from '~codeyam/types';
 
 interface UpdateBranchedBasedOnPullRequestArgs {

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

@@ -1,4 +1,4 @@
-import { loadCommitBranches, upsertCommitBranches } from '~codeyam/supabase';
+import { loadCommitBranches, upsertCommitBranches } from '~codeyam/database';
 import { Branch, Commit } from '~codeyam/types';
 
 export default async function updateCommitBranchesInDb({

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

@@ -6,7 +6,7 @@ import {
   upsertFiles,
   Insertable,
   FilesTable,
-} from '~codeyam/supabase';
+} from '~codeyam/database';
 import { Project } from '~codeyam/types';
 import { randomUUID } from 'node:crypto';
 

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,12 +42,19 @@ export type {
   ScenariosDataStructure,
   DataStructure,
   ConditionalUsage,
+  CompoundConditional,
 } from './src/types/ScenariosDataStructure';
 export type {
   Scenario,
   ScenarioMetadata,
   PlaywrightInstruction,
   ExecutionResult,
+  ValueOptionRef,
+  KeyAttributeValueReference,
+} from './src/types/Scenario';
+export {
+  isStructuredReference,
+  hasStructuredReferences,
 } from './src/types/Scenario';
 export type { ScenarioData } from './src/types/ScenarioData';
 export type { JsonTypeDefinition } from './src/types/JsonTypeDefinition';
@@ -63,6 +70,7 @@ export type {
   AnalysisStatus,
   AnalysisMetadata,
   ReadonlyAnalysis,
+  SourceLocation,
 } 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 where a key attribute is used */
+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;
@@ -66,6 +84,23 @@ export interface Analysis {
       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?: {
+        /** Path to the dependent attribute */
+        path: string;
+        /** Required value or condition for the dependency */
+        requiredValue: string | boolean;
+        /** Human-readable description of the dependency */
+        description: string;
+        /** ID of the compound conditional this dependency comes from */
+        fromChainId?: string;
+      }[];
+      /** IDs of compound conditionals this attribute participates in */
+      compoundConditionalIds?: string[];
+      /** Source locations where this key attribute is used in the code */
+      sourceLocations?: SourceLocation[];
     }[];
     dependencyTree?: DependencyTreeNode;
     dependentAnalyses?: string[];

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

@@ -71,6 +71,7 @@ export interface Entity {
       isImplicitDependency?: boolean;
       isMocked?: boolean;
       calls?: string[];
+      callVariableNames?: string[];
     })[];
     nodeModuleImports?: {
       [key: string]: {
@@ -78,6 +79,7 @@ export interface Entity {
         isDefault: boolean;
         isMocked?: boolean;
         calls?: string[];
+        callVariableNames?: string[];
       }[];
     };
     importedBy?: {
@@ -99,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

@@ -9,6 +9,72 @@ export interface PlaywrightInstruction {
   actionArgs?: unknown[];
 }
 
+/**
+ * Reference to a specific validValueOption or errorValueOption from keyAttributes.
+ * Used in KeyAttributeValueReference to track which predefined value a scenario uses.
+ */
+export interface ValueOptionRef {
+  /** Index into the validValueOptions or errorValueOptions array */
+  index: number;
+  /**
+   * Type of reference:
+   * - 'exact': Uses exactly this value option
+   * - 'derived': Based on this value but modified (see derivation field)
+   * - 'custom': Not from predefined options (value was custom-generated)
+   */
+  refType: 'exact' | 'derived' | 'custom';
+  /** For 'derived' type: describes how the value differs from the original */
+  derivation?: string;
+}
+
+/**
+ * Structured reference for key attribute instructions.
+ * Enables tracking of which validValueOptions each scenario uses.
+ */
+export interface KeyAttributeValueReference {
+  /** The local variable name for this attribute */
+  localVariable: string;
+  /** Human-readable instruction (kept for backwards compat and readability) */
+  instruction: string;
+  /** Reference to a validValueOption (for normal scenarios) */
+  valueOptionRef?: ValueOptionRef;
+  /** Reference to an errorValueOption (for error scenarios) */
+  errorOptionRef?: ValueOptionRef;
+}
+
+/**
+ * Type guard to check if a keyAttributeInstruction is the new structured format
+ */
+export function isStructuredReference(
+  value:
+    | string
+    | { localVariable: string; instruction: string }
+    | KeyAttributeValueReference,
+): value is KeyAttributeValueReference {
+  return (
+    typeof value === 'object' &&
+    'localVariable' in value &&
+    'instruction' in value &&
+    ('valueOptionRef' in value || 'errorOptionRef' in value)
+  );
+}
+
+/**
+ * Check if a scenario has structured value references in its keyAttributeInstructions.
+ * Scenarios without structured references need re-analysis to be included in breakdown view.
+ */
+export function hasStructuredReferences(scenario: Scenario): boolean {
+  const instructions = scenario.metadata?.keyAttributeInstructions;
+  if (!instructions || Object.keys(instructions).length === 0) {
+    return false;
+  }
+  return Object.values(instructions).some(
+    (value) =>
+      typeof value === 'object' &&
+      ('valueOptionRef' in value || 'errorOptionRef' in value),
+  );
+}
+
 export interface ExecutionResult {
   returnValue?: unknown;
   error?: {
@@ -71,15 +137,18 @@ export interface Scenario {
       diffPercentage?: string;
     }[];
     dataMapping?: { [key: string]: string };
-    // New format: { dataStructurePath: { localVariable, instruction } }
-    // Old format (deprecated): { path: instruction_string }
+    /**
+     * Key attribute instructions map data structure paths to their values.
+     * Supports three formats (in order of preference):
+     * 1. KeyAttributeValueReference (new): structured with valueOptionRef for tracking
+     * 2. { localVariable, instruction } (current): basic structured format
+     * 3. string (deprecated): legacy instruction-only format
+     */
     keyAttributeInstructions?: {
       [key: string]:
         | string
-        | {
-            localVariable: string;
-            instruction: string;
-          };
+        | { localVariable: string; instruction: string }
+        | KeyAttributeValueReference;
     };
     data?: {
       mockData: { [key: string]: unknown };
@@ -99,6 +168,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,53 @@ 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;
+}
+
+/**
+ * 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;
+  };
 }
 
 export interface DataStructure {
@@ -47,6 +94,8 @@ 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[];
   structure?: any;
   mocksDataStructure?: any;
 }

package/analyzer-template/packages/ui-components/package.json

@@ -27,11 +27,11 @@
     "react-resizable": "^3.0.5"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-resizable": "^3.0.7",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   }
 }

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,14 @@ 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 { Scenario, ScenarioMetadata, PlaywrightInstruction, ExecutionResult, } from './src/types/Scenario';
+export type { ScenariosDataStructure, DataStructure, ConditionalUsage, CompoundConditional, } from './src/types/ScenariosDataStructure';
+export type { Scenario, ScenarioMetadata, PlaywrightInstruction, ExecutionResult, ValueOptionRef, KeyAttributeValueReference, } from './src/types/Scenario';
+export { isStructuredReference, hasStructuredReferences, } 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, } 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

@@ -1,4 +1,5 @@
 export { ProjectFramework } from './src/enums/ProjectFramework';
+export { isStructuredReference, hasStructuredReferences, } from './src/types/Scenario';
 export { EMPTY_SHA_MARKER } from './src/types/Analysis';
 export { DEFAULT_SCENARIO_NAME } from './src/constants';
 //# sourceMappingURL=index.js.map

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;AAsDhE,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,sBAAsB,CAAC;AAiB9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAkBxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}