@codeyam/codeyam-cli 0.1.0-staging.1 → 0.1.0-staging.596f0eb

package/analyzer-template/packages/ai/src/lib/generateEntityScenarios.ts

@@ -127,7 +127,7 @@ export default async function generateEntityScenarios({
   if (!result) {
     console.log(
       `CodeYam Error: Error Generating entity ${error ? 'error ' : ''}scenarios failed: Invalid JSON response from AI`,
-      response.finishReason,
+      JSON.stringify(response, null, 2),
     );
     throw new Error(
       `CodeYam Error: Error Generating entity ${error ? 'error ' : ''}scenarios failed: Invalid JSON response from AI`,
@@ -195,316 +195,146 @@ function generateSystemMessage(
   context?: string,
   scenarioCount?: number,
 ): string {
-  return `We want to generate data scenarios that will demonstrate the behavior of a function.
-
-${
-  context
-    ? `## Business Logic Context
+  const scenarioCountText = scenarioCount
+    ? `Generate exactly ${scenarioCount} scenario${scenarioCount > 1 ? 's' : ''}.`
+    : 'Generate 1-4 scenarios.';
 
+  const contextSection = context
+    ? `## Business Context
 ${context}
 
-Focus your scenarios on demonstrating this specific change. Generate scenarios with the data conditions needed to reveal this new behavior.
+Focus scenarios on demonstrating this specific behavior change.
 
 `
-    : ''
-}
-
-${scenarioCount ? `Generate ${scenarioCount} scenario${scenarioCount > 1 ? 's' : ''}.` : 'Generate a few (between one and four) scenarios.'}
-
-## The ${DEFAULT_SCENARIO_NAME}:
-
-- Start with the "${DEFAULT_SCENARIO_NAME}" - Call this exactly that, "${DEFAULT_SCENARIO_NAME}" and just that (case sensitive, no other text).
-- The "${DEFAULT_SCENARIO_NAME}" should provide a robust demonstration of the function with instructions for all key attributes provided. 
-  - Fill in all key attributes in the "keyAttributes" list with valid values from the "validValueOptions" list.
-  - All values provided must be from the "validValueOptions" list in the "keyAttributes" list. Do not make up values that are not in the "validValueOptions" list.
-  - Ignore any error attributes (e.g. an attribute called "error"). These should not be included or set to null.
-  - If a front-end (visual) function accepts "children" as an argument this must be populated with a valid value or the output may be blank.
-  - Do not include any "playwrightInstructions" in the "${DEFAULT_SCENARIO_NAME}" as we want a screenshot of the function before any user interactions take place.
-
-## Other scenarios:
+    : '';
 
-- Other scenarios should produce distinct output (for a front-end (visual) function this means a visually distinct screenshot, for back-end this means a distinct return value or side effect). Focus on varying the key attributes to create distinctly different outputs.
-- You do not need to specify key attributes that are the same as the ${DEFAULT_SCENARIO_NAME}.
-- Again ignore any error attributes. These should not be included or set to null.
-- If the function is a front-end (visual) function that accepts user actions and will change it's appearance based on those user actions, then create a non-default scenario that includes "playwrightInstructions" to trigger those user actions.
+  return `You are a test scenario designer. Generate data scenarios that demonstrate a function's behavior.
 
-## Instructions
+${contextSection}${scenarioCountText}
 
-- Each scenario should have: 
-  - a unique name (should be short and concise with absolutely no special characters other than spaces).
-  - a "testName" written in the style of Jest the focuses on specific expectations for the test. Try to avoid generic names like "it('should work')" or "it('should render')" and describe more specific expectations.
-  - a description that describes why the key attributes were changed from the default scenario.
-  - "keyAttributeInstructions" specifying how the key attributes should be set. All key attributes should be set with valid values from the "validValueOptions" list in the "keyAttributes" list.
-  - Optional "playwrightInstructions" that provide the necessary code to run in Playwright to put the function into the correct state to demonstrate the scenario.
-- Focus on positive scenarios that showcase the intended behavior of this function. We have another prompt for generating error scenarios. These scenarios should focus on robust but different data between scenarios that vary key attributes to demonstrate different aspects of the function's behavior.
-
-## Dependencies
-
-This function may dependend on other functions that have key attributes as well. You can leverage those to generate data scenarios also by creating key attribute instructions for those key attributes in the same manner. Generally speaking key attributes for dependencies are necessary for robust scenarios.
-
-## Relative Dates
-
-If a relative date is required you can describe it in the "keyAttributeInstructions", e.g. 'today', 'tomorrow', 'next week', 'last month'.
-
-## Rules
+## Default Scenario Rules
+The FIRST scenario MUST be named exactly "${DEFAULT_SCENARIO_NAME}" (case-sensitive).
+- Fill ALL key attributes using values from their \`validValueOptions\` list
+- If "children" is an argument, populate it (otherwise output may be blank)
+- Ignore error-related attributes (set to null)
+- NEVER include \`playwrightInstructions\` - we need a screenshot BEFORE any user interaction
+- Do NOT add playwrightInstructions even if the component has forms/buttons - default shows initial state only
 
-- If the key attributes require react elements, keep them simple (e.g. <div> or <span>). Do not reference custom jsx elements as they will not exist.
-
-- Do not reference any external libraries, such as React, in the "keyAttributeInstructions". Assume no external libraries are available. Do not reference custom jsx elements. 
-
-## Response Structure
-
-Respond with the data scenarios in a JSON object format, without additional information or delimiters. Ensure clarity and specificity in each data scenario to facilitate accurate data generation for testing or demonstration purposes.
-
-IMPORTANT: For keyAttributeInstructions, use the "dataStructurePath" from the Key Attributes as the key (e.g., "useDiffModal().diffView"), and include both the "localVariable" name and the "instruction" in the value object:
+## Other Scenarios
+- Each produces DISTINCT output (visual: different screenshot; backend: different return/side-effect)
+- Only specify attributes that DIFFER from default
+- May include \`playwrightInstructions\` for user interactions (clicks, form fills)
 
+## keyAttributeInstructions Format
+Use \`dataStructurePath\` as key, include both variable name and instruction:
+\`\`\`json
 {
-  "dataScenarios": [
-    {
-      "name": string;
-      "testName": string;
-      "description": string;
-      "keyAttributeInstructions": {
-        ["dataStructurePath"]: {
-          "localVariable": string;  // The local variable name (e.g., "diffView")
-          "instruction": string;    // How to set this attribute for the scenario
-        }
-      },
-      "playwrightInstructions?": {
-        "selectorFn": string;
-        "selectorArgs": string[];
-        "actionFn": string;
-        "actionArgs": string[];
-      }[]
-    }
-  ]
+  "useDiffModal().diffView": {
+    "localVariable": "diffView",
+    "instruction": "Set to 'split' mode"
+  }
 }
+\`\`\`
 
-Optionally you can include playwright instructions for front-end functions to put the function into the correct state to demonstrate the scenario.
-
-Usually playwright instructions should not be included in the ${DEFAULT_SCENARIO_NAME}. If playwright instructions will cause the front-end function's results to look different than create a non-default scenario that includes those instructions.
-
-This is often the case if the key attributes are only used through a button click or form submission or if the data required for this scenario is not listed as a key attribute and must be provided directly by the user.
-
-If the data won't exist or be used without user actions then use the "playwrightInstructions" to trigger execution of that code through the user actions.
-
-For \`playwrightInstructions\`, provide an array of strings representing the necessary code to run.
+## playwrightInstructions (optional, non-default only)
 \`\`\`json
 {
   "playwrightInstructions": [
-    {
-      "selectorFn": "getByLabel",
-      "selectorArgs": ["email"],
-      "actionFn": "fill",
-      "actionArgs": ["test@example.com"]
-    },
-    {
-      "selectorFn": "getByText",
-      "selectorArgs": ["Submit"],
-      "actionFn": "click",
-      "actionArgs": []
-    }
+    { "selectorFn": "getByLabel", "selectorArgs": ["Email"], "actionFn": "fill", "actionArgs": ["test@example.com"] },
+    { "selectorFn": "getByRole", "selectorArgs": ["button", { "name": "Submit" }], "actionFn": "click", "actionArgs": [] }
   ]
 }
 \`\`\`
+Note: selectorArgs values must be JSON strings, not JavaScript regex literals.
 
-## Example Response
+Use when: data only appears after user action (button click, form submit), or key attribute isn't in data structure.
 
+## Rules
+- Relative dates OK in instructions: "today", "tomorrow", "last month"
+- React elements: use simple elements (\`<div>\`, \`<span>\`) - no custom JSX
+- No external library references - plain JS/TS values only
+- Scenario names: letters, numbers, spaces only (no special characters)
+- testName: Jest style with specific expectations, e.g. \`it("displays error when email invalid")\`
+- All values must be valid JSON (strings, numbers, booleans, arrays, objects) - no JavaScript literals like regex
+
+## Response Format
 \`\`\`json
 {
   "dataScenarios": [
     {
-      "name": ${DEFAULT_SCENARIO_NAME},
-      "description": "The component displays notifications. As a default state demonstrates common usage, there are 3 unread notifications and two read notifications.",
-      "testName": "it(\"displays notifications indicating unread status with a green dot\")",
+      "name": "${DEFAULT_SCENARIO_NAME}",
+      "testName": "it(\"displays notifications with unread indicator\")",
+      "description": "Default state with 3 unread and 2 read notifications",
       "keyAttributeInstructions": {
-        "useNotifications().notifications[]": {
-          "localVariable": "notifications[]",
-          "instruction": "Create 5 notifications"
-        },
-        "useNotifications().notifications[].read": {
-          "localVariable": "notifications[].read",
-          "instruction": "Set to false for 3 notifications and true for 2 notifications"
-        },
-        "useNotifications().notifications[].message": {
-          "localVariable": "notifications[].message",
-          "instruction": "Messages should be no longer than 200 characters"
-        }
+        "useNotifications().notifications[]": { "localVariable": "notifications[]", "instruction": "Create 5 notifications" },
+        "useNotifications().notifications[].read": { "localVariable": "notifications[].read", "instruction": "false for 3, true for 2" }
       }
     },
     {
-      "name": "No notifications",
-      "testName": "it(\"renders a default message when there are no notifications\")",
-      "description": "A user has no notifications at all.",
+      "name": "Empty state",
+      "testName": "it(\"shows placeholder when no notifications\")",
+      "description": "User has no notifications",
       "keyAttributeInstructions": {
-        "useNotifications().notifications[]": {
-          "localVariable": "notifications[]",
-          "instruction": "Should be an empty array"
-        }
-      }
-    },
-    {
-      "name": "Many notifications, all unread, one long message",
-      "testName": "it(\"properly truncates long messages with the title containing the full message\")",
-      "description": "A user has many notifications, all unread, with one notification featuring a long message.",
-      "keyAttributeInstructions": {
-        "useNotifications().notifications[]": {
-          "localVariable": "notifications[]",
-          "instruction": "Create 10 notifications"
-        },
-        "useNotifications().notifications[].read": {
-          "localVariable": "notifications[].read",
-          "instruction": "Set to false for all notifications"
-        },
-        "useNotifications().notifications[].message": {
-          "localVariable": "notifications[].message",
-          "instruction": "Ensure at least one message is longer than 500 characters"
-        }
+        "useNotifications().notifications[]": { "localVariable": "notifications[]", "instruction": "Empty array" }
       }
     }
   ]
 }
 \`\`\`
-
-Remember:
-
-- Name the first scenario exactly "${DEFAULT_SCENARIO_NAME}".
-- For the ${DEFAULT_SCENARIO_NAME} scenario fill in all key attributes with valid values from the "validValueOptions" list in the "keyAttributes" list. Do not leave any key attributes out of the "keyAttributeInstructions" unless they are error attributes.
-- For other scenarios, find ways to create distinctly different outputs using other valid values for key attributes or providing playwright instructions to trigger user interactions.
-- Do not use any special characters in the scenario names. Keep them short and concise and only use letters, numbers, and spaces.
-- Do not use playwright instructions in the ${DEFAULT_SCENARIO_NAME} as we want a screenshot of the function before any user interactions.
 `;
 }
 
 const SYSTEM_MESSAGE = generateSystemMessage();
 
-const ERROR_SYSTEM_MESSAGE = `What data will cause this funtion to fail with an uncaught error?
-
-In "errorDataScenarios", give each scenario a description that explains what the predicted error is, a code snippet (or multiple) showing where it will occur, a description of how it can be fixed along with example code, and provide detailed "keyAttributeInstructions" on how to generate the necessary data to cause the error.
-
-For each error scenario also provide two evaluation dynamics:
+const ERROR_SYSTEM_MESSAGE = `You are a security/reliability analyst. Identify data inputs that will cause UNCAUGHT ERRORS in this function.
 
-1) How likely is this error to occur? (1-10)
-- 1 = Unlikely. It would require passing in data that is clearly wrong and not suited for the function.
-- 10 = Guaranteed. There is a bug in the function that will happen regardless of the data passed in.
+## What Qualifies as an Error Scenario
+- MUST cause an actual thrown error (not awkward behavior)
+- MUST be fixable by changing THIS function's code
+- MUST NOT rely on type errors caught by static analysis
+- MUST NOT assume dependent functions will fail
 
-2) How severe is the error? (1 or 2)
-- 1 = Minor. The error will not break the application. It may cause confusion or unexpected behavior, but will not cause a direct failure.
-- 2 = Major. The error will cause the function to fail and will need to be fixed.
+## Likelihood Scale (1-10)
+- 1-3: Requires clearly wrong/unusual data
+- 4-6: Plausible edge case
+- 7-9: Common real-world scenario
+- 10: ONLY if guaranteed bug regardless of input
 
-## Instructions
+Be conservative with high scores—they should surface truly likely errors.
 
-Another AI will then read the "keyAttributeInstructions" and generate the necessary data. You can assume the other AI will generate reasonable default data to satisfy the data structure, so only provide instructions for the essential parts of the data that should be generated.
-
-We can only generate data for the exact data structure provided, regardless of the code for the function. Do not provide "keyAttributeInstructions" for data that is not in the data structure.
-
-All data must be plain that can be run in a node environment (not in the browser). Do not reference any external libraries in the "keyAttributeInstructions". If an external library is required by the function, then provide instructructions on how to fake or mock that data. 
-
-Focus on "Major" errors. Only include "Minor" errors is they are very likely to occur.
-
-## Response
-
-For each error scenario, start with a data mapping between the phrase you want to use in the "keyAttributeInstructions" and the exact variable in the data strucure. Then provide a name and a description that predicts how the function will error out and a suggested way to fix the error. The name should be unique and short (no more than 30 characters), and the description should provide context for the error scenario.
+## Severity Scale (1-2)
+- 1 = Minor: Unexpected behavior, no crash
+- 2 = Major: Function fails completely (focus here)
 
 ## Rules
+- Only reference data in the provided data structure
+- React elements: simple only (\`<div>\`, \`<span>\`)
+- No external library references—mock with plain JS
+- Each scenario must cause a DISTINCT error type
+- If no errors possible: \`{ "errorDataScenarios": "No errors found" }\`
 
-- Do not provide "keyAttributeInstructions" for data that is not in the data structure. 
-
-- If the data structure calls for react elements, keep them simple (e.g. <div> or <span>). Do not reference custom jsx elements as they will not exist.
-
-- Do not reference any external libraries, such as React, in the "keyAttributeInstructions". Assume no external libraries are available. Do not reference custom jsx elements. If needed describe how to mock the enternal library data using plain javascript that can be run in a node environment.
-
-- Only create new error scenarios if the scenario will literally cause an error. We are not looking for awkward or unintended results, only literal errors. Do not create an error scenario if you are not confident it will cause an error. 
-
-- Do not assume that another function might cause an error. We are looking for errors that are a direct result of the code in this function.
-
-- Do not create errors that can be caught through normal type detection. We only want errors that are reasonably likely to happen and won't be caught by basic static code analysis.
-
-- Only create error scenarios that can be fixed by changing the code in this function. Do not create error scenarios that require changes to other functions or external libraries. 
-
-- Look to create a few error scenarios, but if you can not identify any way to cause an error then do not generate any error scenarios. Each error scenario should represent a distinctly different way to cause an error. If there are no errors you can respond with:
+Note: In JS/TS, any non-zero value satisfies a boolean check—this won't error.
 
-\`\`\`
-{
-  "errorDataScenarios": "No errors found"
-}
-\`\`\`
-
-- Make sure each error scenario has a unique name.
-
-## Response Structure
-
-Respond with the data scenarios in a JSON object format, without additional information or delimiters. Ensure clarity and specificity in each data scenario to facilitate accurate data generation for testing or demonstration purposes.
-
-{
-  "errorDataScenarios": [
-    {
-      "dataMapping": { [key: string]: string };
-      "name": string;
-      "codeSnippet": string;
-      "description": string;
-      "fix": string;
-      "fixSnippet": string;
-      "likelihood": number;
-      "likelihoodDescription": string;
-      "severity": number;
-      "severityDescription": string;      
-      "instructions": string[];
-    }
-  ]
-}
-
-## Example
-Given the following data structure:
-
-\`\`\`
-{
-  "arguments": [
-    {
-      "notifications": {
-        "message": "string",
-        "read": "boolean"
-      }[]
-    }
-  ]
-}
-\`\`\`
-
-The full response might be:
-
-\`\`\`
+## Response Format
+\`\`\`json
 {
   "errorDataScenarios": [
     {
-      "dataMapping": {
-        "notifications array": "arguments - notifications"
-      },
-      "name": "Error: Message with non-utf8 characters",
-      "codeSnippet": "...\nconst encodedMessage = encodeURIComponent(message);\n...",
-      "description": "If the message contains non-utf8 characters the function will error out. The \`encodeURIComponent\` call will throw an error which is not caught.",
-      "fix": "Wrap the \`encodeURIComponent\` call in a try/catch block.",
-      "fixSnippet: "...\nlet encodedMessage: string | undefined;\ntry {\n  encodedMessage = encodeURIComponent(message)\n} catch (e) {\n  console.error('Error encoding message:', e)\n..."
+      "dataMapping": { "notifications array": "arguments - notifications" },
+      "name": "Non-utf8 message encoding",
+      "codeSnippet": "const encoded = encodeURIComponent(message);",
+      "description": "encodeURIComponent throws on non-utf8 characters",
+      "fix": "Wrap in try/catch",
+      "fixSnippet": "try {\\n  encoded = encodeURIComponent(message);\\n} catch (e) {\\n  // handle\\n}",
       "likelihood": 7,
-      "likelihoodDescription": "The international nature of the function makes it likely that a user will input a message with non-utf8 characters.",
+      "likelihoodDescription": "International users may input non-utf8 characters",
       "severity": 2,
-      "severityDescription": "The function will error out if a message contains non-utf8 characters.",
+      "severityDescription": "Function throws uncaught error",
       "keyAttributeInstructions": {
-        "notifications[]": "Set the \"notifications array\" to an array of objects containing at least one notification with a message that contains non-utf8 characters.",
+        "notifications[]": "Array with message containing non-utf8 characters"
       }
     }
   ]
 }
 \`\`\`
-
-Please write both the \`codeSnippet\` and \`fixSnippet\` with appropriate line breaks to increase readability.
-
-Assume that all functions this function depends on exist even if they are not provided in the prompt. We have isolated this function for analysis but those dependencies do exist.
-
-Only create error scenarios based on the code that is in the function provided.
-
-Common Errors In Your Analysis:
-- Typescript/javascript: 
-    - Any object or primitive other than 0 can be used to satisfy a boolean. This will not cause an error.
-
-Do not mark anything as a "10" for likelihood unless the error will literally happen every time the function is called. In general be cautious about high likelihood scores so that errors that are truly most likely to happen show up as higher priority.
 `;

package/analyzer-template/packages/ai/src/lib/generateStatementAnalysis.ts

@@ -4,7 +4,7 @@ import { saveLlmCall } from '~codeyam/aws/dynamodb';
 import generateEntityPropsStructureGenerator from './promptGenerators/generateEntityPropsStructureGenerator';
 import identifyReserved, { ReservedFeature } from './identifyReserved';
 import splitOutsideParentheses from './splitOutsideParentheses';
-import { generateSha, loadStatement, saveStatement } from '~codeyam/supabase';
+import { generateSha, loadStatement, saveStatement } from '~codeyam/database';
 import { ScopeInfo } from './dataStructure/ScopeDataStructure';
 import { AI, parseJsonSafe } from '~codeyam/ai';
 
@@ -152,85 +152,52 @@ export default async function generateStatementAnalysis({
   return { sha, structure, equivalentVariables, llmCall };
 }
 
-const SYSTEM_MESSAGE = (reservedStrategies: string[]) => `**Task:**  
+const SYSTEM_MESSAGE = (
+  reservedStrategies: string[],
+) => `Analyze a code snippet to extract:
 
-We have a code snippet we need to analyze.
+1. **structure**: The data type of each variable and property path (string, number, boolean, array, object, function, or unknown)
+2. **equivalentVariables**: Assignments between variables, where the key is the target (left side) and value is the source (right side)
 
-We want to determine:
+## Type Rules
 
-1) What is the data structure of the variables in the code snippet?
-3) What variables or aspects of variables are equivalent in the code snippet?
+- Use type annotations when available; otherwise infer from context or use "unknown"
+- Non-primitive types are "object"
+- Function calls are "function"
 
-If there is any type information in the code snippet leverage it to inform the data structure of the variables but do not otherwise worry about it or include it. If a type is not a primitive simply label it as "object".
+## Equivalency Rules
 
-**Definitions:**
+For assignments like \`const a = b\`, record \`"a": "b"\`.
 
-Data Structure: 
-- Every variable in the code snippet has a data structure.
-- The data structure of a variable is the type of data it holds. For example, a variable could hold a string, a number, an array, an object, a function, etc.
-- We want to identify every aspect of every variable in the code snippet.
+For destructuring like \`const { x } = obj\`, record \`"x": "obj.x"\`.
 
-Example:
-\`\`\`typescript
-const { name, age } = person;
-\`\`\`
+For function calls like \`const result = foo(arg)\`:
+- Record \`"result": "foo(arg).functionCallReturnValue"\`
+- Record \`"foo(arg).signature[0]": "arg"\`
 
-In this case three variables are declared: \`name\`, \`age\`, and \`person\` so the overall structure would be:
+For destructured function returns like \`const { data } = foo()\`:
+- Record \`"data": "foo().functionCallReturnValue.data"\`
 
-\`\`\`json
-{
-  "structure": {
-    "person": "object",
-    "person.name": "string",
-    "person.age": "number"
-    "name": "string",
-    "age": "number"
-  }
-}
-\`\`\`
-
-Equivalent Variables:
-- In the code variables or aspects of a variable may be assigned to one another, passed in as arguments to a function call, or assigned to the return value of a function call.
-- We want to track all of these equivalent variables so that we can merge the data structure of all equivalencies together.
-- The key should be the variable or aspect of a variable that is recieving existing data from the other variable, which is the path.
+## Example
 
-Example:
 \`\`\`typescript
-const { name, hobbies } = person;
-hobbies[0].started = selectedHobby.alreadyStarted;
+const { name } = person;
+const result = process(name);
 \`\`\`
 
-Here we have a number of equivalencies:
-
-\`\`\`
-{
-  "equivalentVariables": {
-    "name": "person.name",
-    "hobbies": "person.hobbies",
-    "hobbies[0].started": "selectedHobby.alreadyStarted"    
-  }
-}
-\`\`\`
-
-**Response:**
-
-Combine these together to form the response:
-
 \`\`\`json
 {
   "structure": {
     "person": "object",
     "person.name": "string",
-    "person.hobbies": "array",
-    "person.hobbies[0]": "object",
-    "person.hobbies[0].started": "boolean",
-    "selectedHobby": "object",
-    "selectedHobby.alreadyStarted": "boolean"
+    "name": "string",
+    "process(name)": "function",
+    "result": "unknown"
   },
   "equivalentVariables": {
     "name": "person.name",
-    "hobbies": "person.hobbies",
-    "hobbies[0].started": "selectedHobby.alreadyStarted"    
+    "process(name).signature[0]": "name",
+    "result": "process(name).functionCallReturnValue"
   }
 }
 \`\`\`
@@ -239,10 +206,7 @@ ${relevantExamples(reservedStrategies)}
 
 ---
 
-**Important:**
-
-- Take your time and analyze the code snippet carefully. Capture all the data structures, function calls, and equivalencies you can find. If you miss any the simulation will fail.
-- Double check your work to ensure nothing was missed and all rules are followed.
+Analyze carefully. Missing equivalencies will cause simulation failures.
 `;
 
 function keywords(reservedStrategies: string[]) {
@@ -348,7 +312,20 @@ const STRATEGIES = {
     name: 'Basic Variable Assignment',
     examples: [
       {
-        name: 'Simple',
+        name: 'Simple Assignment',
+        code: `const selectedPerson = person;`,
+        response: `{
+    "structure": {
+      "selectedPerson": "unknown",
+      "person": "unknown"
+    },
+    "equivalentVariables": {
+      "selectedPerson": "person"
+    }
+  }`,
+      },
+      {
+        name: 'Property Assignment',
         code: `selectedPerson.position = position.name;`,
         response: `{
     "structure": {
@@ -363,7 +340,7 @@ const STRATEGIES = {
   }`,
       },
       {
-        name: 'Basic Deconstruction',
+        name: 'Destructuring',
         code: `const { name, age } = getPerson(personId);`,
         response: `{
     "structure": {
@@ -404,10 +381,10 @@ const STRATEGIES = {
         response: `{
     "structure": {
       "person": "object",
-      "options: "object"
+      "options": "object"
     },
     "equivalentVariables": {
-      "person": "signature[0]": 
+      "person": "signature[0]",
       "options": "signature[1]"
     }
   }`,
@@ -477,7 +454,7 @@ const STRATEGIES = {
       "name": "string",
       "title": "string",
       "category": "string",
-      "age": "number",
+      "age": "number"
     },
     "equivalentVariables": {
       "name": "signature[0].name",
@@ -932,10 +909,10 @@ const STRATEGIES = {
         response: `{
     "structure": {
       "age": "number",
-      "returnValue": "number",
+      "returnValue": "number"
     },
     "equivalentVariables": {
-      "returnValue: "age"
+      "returnValue": "age"
     }
   }`,
       },
@@ -988,7 +965,7 @@ const STRATEGIES = {
     "structure": {
       "items": "array",
       "items.filter(cyScope1())": "function",
-      "cyScope1()" : "function",
+      "cyScope1()": "function",
       "List()": "function",
       "div()": "function"
     },
@@ -1684,7 +1661,7 @@ const STRATEGIES = {
     "foo(arg1).bar({ arg2, arg3 }).bar().baz(arg4, arg5).boo()": "function"
   },
   "equivalentVariables": {
-   "data": "foo(arg1).bar({ arg2, arg3 }).bar().baz(arg4, arg5).boo().functionCallReturnValue.data"
+   "data": "foo(arg1).bar({ arg2, arg3 }).bar().baz(arg4, arg5).boo().functionCallReturnValue.data",
    "error": "foo(arg1).bar({ arg2, arg3 }).bar().baz(arg4, arg5).boo().functionCallReturnValue.error"
   }
 }`,