From 54b8606327196c8d95d8d94dc25ffb7b9c89bb34 Mon Sep 17 00:00:00 2001
From: saoshreyass <saoshreyass07@gmail.com>
Date: Fri, 13 Mar 2026 17:21:08 -0700
Subject: [PATCH 1/3] commit

---
 vscode-extension/package-lock.json            | 99 +++++++++++++++++--
 vscode-extension/package.json                 |  6 +-
 vscode-extension/src/panels/LMApiHandler.ts   | 24 ++++-
 vscode-extension/src/server/retag.ts          |  5 +-
 vscode-extension/webview-ui/package-lock.json | 25 ++---
 vscode-extension/webview-ui/package.json      |  2 +-
 vscode-extension/webview-ui/src/tools.tsx     |  8 +-
 vscode-extension/webview-ui/tsconfig.json     |  3 +-
 8 files changed, 143 insertions(+), 29 deletions(-)

diff --git a/vscode-extension/package-lock.json b/vscode-extension/package-lock.json
index ac53854..92d3dff 100644
--- a/vscode-extension/package-lock.json
+++ b/vscode-extension/package-lock.json
@@ -20,7 +20,9 @@
         "@types/express": "^4.17.21",
         "@types/glob": "^7.1.3",
         "@types/node": "^22.0.2",
-        "@types/vscode": "^1.91.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@types/vscode": "^1.109.0",
         "@types/ws": "^8.5.12",
         "@typescript-eslint/eslint-plugin": "^4.14.1",
         "@typescript-eslint/parser": "^4.14.1",
@@ -354,6 +356,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/send": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -378,10 +400,11 @@
       }
     },
     "node_modules/@types/vscode": {
-      "version": "1.92.0",
-      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.92.0.tgz",
-      "integrity": "sha512-DcZoCj17RXlzB4XJ7IfKdPTcTGDLYvTOcTNkvtjXWF+K2TlKzHHkBEXNWQRpBIXixNEUgx39cQeTFunY0E2msw==",
-      "dev": true
+      "version": "1.109.0",
+      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.109.0.tgz",
+      "integrity": "sha512-0Pf95rnwEIwDbmXGC08r0B4TQhAbsHQ5UyTIgVgoieDe4cOnf92usuR5dEczb6bTKEp7ziZH4TV1TRGPPCExtw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/ws": {
       "version": "8.5.12",
@@ -1052,6 +1075,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -2634,6 +2664,25 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-inspector": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-9.0.0.tgz",
+      "integrity": "sha512-w/VJucSeHxlwRa2nfM2k7YhpT1r5EtlDOClSR+L7DyQP91QMdfFEDXDs9bPYN4kzP7umFtom7L0b2GGjph4Kow==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -3576,6 +3625,22 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "dev": true
     },
+    "@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "requires": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "requires": {}
+    },
     "@types/send": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -3598,9 +3663,9 @@
       }
     },
     "@types/vscode": {
-      "version": "1.92.0",
-      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.92.0.tgz",
-      "integrity": "sha512-DcZoCj17RXlzB4XJ7IfKdPTcTGDLYvTOcTNkvtjXWF+K2TlKzHHkBEXNWQRpBIXixNEUgx39cQeTFunY0E2msw==",
+      "version": "1.109.0",
+      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.109.0.tgz",
+      "integrity": "sha512-0Pf95rnwEIwDbmXGC08r0B4TQhAbsHQ5UyTIgVgoieDe4cOnf92usuR5dEczb6bTKEp7ziZH4TV1TRGPPCExtw==",
       "dev": true
     },
     "@types/ws": {
@@ -4054,6 +4119,12 @@
         "which": "^2.0.1"
       }
     },
+    "csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true
+    },
     "debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -5182,6 +5253,18 @@
         "unpipe": "1.0.0"
       }
     },
+    "react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "peer": true
+    },
+    "react-inspector": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-9.0.0.tgz",
+      "integrity": "sha512-w/VJucSeHxlwRa2nfM2k7YhpT1r5EtlDOClSR+L7DyQP91QMdfFEDXDs9bPYN4kzP7umFtom7L0b2GGjph4Kow==",
+      "requires": {}
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
diff --git a/vscode-extension/package.json b/vscode-extension/package.json
index 1c6d373..5c188af 100644
--- a/vscode-extension/package.json
+++ b/vscode-extension/package.json
@@ -10,6 +10,7 @@
   },
   "main": "./out/extension.js",
   "contributes": {
+    
     "viewsContainers": {
       "activitybar": [
         {
@@ -89,7 +90,9 @@
     "@types/express": "^4.17.21",
     "@types/glob": "^7.1.3",
     "@types/node": "^22.0.2",
-    "@types/vscode": "^1.91.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/vscode": "^1.109.0",
     "@types/ws": "^8.5.12",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
@@ -105,6 +108,7 @@
     "diff": "^8.0.0-beta",
     "express": "^4.19.2",
     "openai": "^4.53.2",
+    "react-inspector": "^9.0.0",
     "ws": "^8.18.0"
   },
   "extensionDependencies": [
diff --git a/vscode-extension/src/panels/LMApiHandler.ts b/vscode-extension/src/panels/LMApiHandler.ts
index 740ae47..c0cd0fc 100644
--- a/vscode-extension/src/panels/LMApiHandler.ts
+++ b/vscode-extension/src/panels/LMApiHandler.ts
@@ -27,7 +27,17 @@ export class LMApiHandler {
       console.log(`Selecting model with options:`, modelOptions);
       //console.log('HERE', await vscode.lm.selectChatModels());
       // gpt-5-mini gpt-4o-mini copilot-fast gpt-4o claude-haiku-4.5 gpt-4.1 oswe-vscode-prime auto
-      const [model] = await vscode.lm.selectChatModels(modelOptions);
+    const allModels = await vscode.lm.selectChatModels({});
+    console.log('ALL AVAILABLE MODELS:', JSON.stringify(allModels.map(m => ({
+      name: m.name,
+      vendor: m.vendor,
+      family: m.family,
+      version: m.version,
+      id: m.id
+    })), null, 2));
+
+    const [model] = await vscode.lm.selectChatModels(modelOptions);
+    console.log('SELECTED MODEL:', model ? `${model.vendor}/${model.family}` : 'NONE');
       
       if (!model) {
         this.sendErrorResponse(message, JSON.stringify({
@@ -51,9 +61,19 @@ export class LMApiHandler {
       const clientWantsStreaming = message.data.options?.stream === true;
       console.log(`Client wants streaming: ${clientWantsStreaming}`);
       
+      const formattedMessages = message.data.messages.map((msg: any) => {
+      if (msg.role === 'user') {
+        return vscode.LanguageModelChatMessage.User(msg.content);
+      } else if (msg.role === 'assistant') {
+        return vscode.LanguageModelChatMessage.Assistant(msg.content);
+      } else {
+        // system messages get treated as user messages in VSCode LM API
+        return vscode.LanguageModelChatMessage.User(msg.content);
+      }
+      });
       // Send the request - all requests return a stream in newer VSCode API
       const response = await model.sendRequest(
-        message.data.messages,
+        formattedMessages,
         message.data.options || {},
         cancelTokenSource.token
       );
diff --git a/vscode-extension/src/server/retag.ts b/vscode-extension/src/server/retag.ts
index e198de2..9eb0902 100644
--- a/vscode-extension/src/server/retag.ts
+++ b/vscode-extension/src/server/retag.ts
@@ -132,9 +132,10 @@ async function copilotPromptGPTForJSON(t: string) {
     const response = await model.sendRequest(craftedPrompt, {}, new vscode.CancellationTokenSource().token);
     console.log('Got response:', response);
     let fullResponse = '';
-    for await (const chunk of response.text) {
+    for await (const chunk of response.stream) {
       console.debug('Got chunk:', chunk);
-      fullResponse += chunk;
+      const text = (chunk as any).part?.value ?? '';
+      fullResponse += text;
     }
     return fullResponse;
     // TODO figure out how to get the completion here
diff --git a/vscode-extension/webview-ui/package-lock.json b/vscode-extension/webview-ui/package-lock.json
index 90d97a8..4da0eca 100644
--- a/vscode-extension/webview-ui/package-lock.json
+++ b/vscode-extension/webview-ui/package-lock.json
@@ -21,7 +21,7 @@
         "@types/react-dom": "^18.0.0",
         "@types/vscode-webview": "^1.57.0",
         "@vitejs/plugin-react": "^1.0.7",
-        "typescript": "^4.4.4",
+        "typescript": "^5.9.3",
         "vite": "^2.9.13"
       }
     },
@@ -2431,16 +2431,17 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unified": {
@@ -3142,7 +3143,7 @@
         "react-dropzone": "^14.2.3",
         "react-inspector": "^6.0.2",
         "react-markdown": "^9.0.1",
-        "typescript": "^4.4.4",
+        "typescript": "^5.9.3",
         "vite": "^2.9.13"
       },
       "dependencies": {
@@ -4717,9 +4718,9 @@
           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         },
         "typescript": {
-          "version": "4.5.4",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-          "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+          "version": "5.9.3",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+          "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
           "dev": true
         },
         "unified": {
@@ -5882,9 +5883,9 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true
     },
     "unified": {
diff --git a/vscode-extension/webview-ui/package.json b/vscode-extension/webview-ui/package.json
index e52b50a..3417d04 100644
--- a/vscode-extension/webview-ui/package.json
+++ b/vscode-extension/webview-ui/package.json
@@ -22,7 +22,7 @@
     "@types/react-dom": "^18.0.0",
     "@types/vscode-webview": "^1.57.0",
     "@vitejs/plugin-react": "^1.0.7",
-    "typescript": "^4.4.4",
+    "typescript": "^5.9.3",
     "vite": "^2.9.13"
   }
 }
diff --git a/vscode-extension/webview-ui/src/tools.tsx b/vscode-extension/webview-ui/src/tools.tsx
index ed7fae2..947838f 100644
--- a/vscode-extension/webview-ui/src/tools.tsx
+++ b/vscode-extension/webview-ui/src/tools.tsx
@@ -663,10 +663,12 @@
             } else {
               try {
                 response = await lmApi.chat(presentationPrompt, {
-                  vendor: 'copilot-chat',
+                  vendor: 'copilot',
                   family: 'gpt-4o',
                   temperature: 0.7
                 });
+                console.log('SENDING RESPONSE:', JSON.stringify(response));
+                console.log('RESPONSE LENGTH:', response.length);
               } catch (apiError) {
                 console.log('API call failed, falling back to mock:', apiError);
                 response = `**What the code does:**
@@ -732,10 +734,12 @@
             } else {
               try {
                 response = await lmApi.chat(inDepthPrompt, {
-                  vendor: 'copilot-chat',
+                  vendor: 'copilot',
                   family: 'gpt-4o',
                   temperature: 0.7
                 });
+                console.log('SENDING RESPONSE:', JSON.stringify(response));
+                console.log('RESPONSE LENGTH:', response.length);
               } catch (apiError) {
                 console.log('API call failed, falling back to mock:', apiError);
                 response = JSON.stringify({
diff --git a/vscode-extension/webview-ui/tsconfig.json b/vscode-extension/webview-ui/tsconfig.json
index e24fc7e..d5731b2 100644
--- a/vscode-extension/webview-ui/tsconfig.json
+++ b/vscode-extension/webview-ui/tsconfig.json
@@ -10,7 +10,8 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    //"moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

From 7ac04a81c978fd380eb7f59152c3a187f13dbbe9 Mon Sep 17 00:00:00 2001
From: capanator <160444832+ansoncchen@users.noreply.github.com>
Date: Fri, 10 Apr 2026 20:47:49 -0700
Subject: [PATCH 2/3] fixed some ui bugs and adjusted it to more markdown
 focused

---
 vscode-extension/package-lock.json        |  50 +-
 vscode-extension/webview-ui/src/App.css   |  10 +
 vscode-extension/webview-ui/src/tools.tsx | 783 +++++++++++-----------
 3 files changed, 385 insertions(+), 458 deletions(-)

diff --git a/vscode-extension/package-lock.json b/vscode-extension/package-lock.json
index 1669837..d56c55b 100644
--- a/vscode-extension/package-lock.json
+++ b/vscode-extension/package-lock.json
@@ -13,6 +13,7 @@
         "diff": "^8.0.0-beta",
         "express": "^4.19.2",
         "openai": "^4.53.2",
+        "react-inspector": "^9.0.0",
         "ws": "^8.18.0"
       },
       "devDependencies": {
@@ -354,26 +355,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/react": {
-      "version": "19.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
-      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.2.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.2.0"
-      }
-    },
     "node_modules/@types/send": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -1072,13 +1053,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -3622,22 +3596,6 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "dev": true
     },
-    "@types/react": {
-      "version": "19.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
-      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
-      "requires": {
-        "csstype": "^3.2.2"
-      }
-    },
-    "@types/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
-      "requires": {}
-    },
     "@types/send": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -4116,12 +4074,6 @@
         "which": "^2.0.1"
       }
     },
-    "csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true
-    },
     "debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
diff --git a/vscode-extension/webview-ui/src/App.css b/vscode-extension/webview-ui/src/App.css
index 67d90e7..5c2a157 100644
--- a/vscode-extension/webview-ui/src/App.css
+++ b/vscode-extension/webview-ui/src/App.css
@@ -31,6 +31,16 @@ main {
   max-width: -webkit-fill-available !important;
 }
 
+.annotation-tile img {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+.annotation-tile pre {
+  overflow-x: auto;
+  max-width: 100% !important;
+}
+
 .annotation-tile.selected {
   background-color: #e0e0e0; /* Slightly darker background when selected */
 }
diff --git a/vscode-extension/webview-ui/src/tools.tsx b/vscode-extension/webview-ui/src/tools.tsx
index d24d95a..fa485ed 100644
--- a/vscode-extension/webview-ui/src/tools.tsx
+++ b/vscode-extension/webview-ui/src/tools.tsx
@@ -6,6 +6,75 @@
     import LMUnitTest from "./LMUnitTest";
     import ShowDebuggedExample from "./ShowDebuggedExample";
     import { ChatMessage, lmApi, mockLmApi } from "./lm-api-client";
+    // Lightweight markdown renderer (react-markdown v9 is ESM-only and incompatible with Vite 2.9)
+    const SimpleMarkdown: React.FC<{ children: string }> = ({ children }) => {
+      const escapeHtml = (s: string) =>
+        s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+      const renderInline = (text: string): string =>
+        escapeHtml(text)
+          .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+          .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+          .replace(/\*(.+?)\*/g, '<em>$1</em>')
+          // Inline code: subtle italic monospace, no heavy background
+          .replace(/`([^`]+)`/g, '<span style="font-family:monospace;font-style:italic;font-size:13px">$1</span>');
+
+      const renderMarkdown = (text: string): string => {
+        // Split into blocks on blank lines
+        const blocks = text.split(/\n{2,}/);
+        return blocks.map(block => {
+          const trimmed = block.trim();
+          if (!trimmed) return '';
+
+          const blockLines = trimmed.split('\n');
+          const headerMatch = blockLines[0].trim().match(/^(#{1,3})\s+(.+)$/);
+          if (headerMatch) {
+            const headerLevel = headerMatch[1].length;
+            const headerText = headerMatch[2];
+            const remainder = blockLines.slice(1).join('\n').trim();
+            const headerStyle =
+              headerLevel === 1
+                ? 'font-weight:700;font-size:15px;margin:8px 0 4px'
+                : headerLevel === 2
+                  ? 'font-weight:600;font-size:14px;margin:8px 0 4px'
+                  : 'font-weight:600;font-size:13px;margin:8px 0 4px';
+
+            return `<p style="${headerStyle}">${renderInline(headerText)}</p>${
+              remainder ? renderMarkdown(remainder) : ''
+            }`;
+          }
+
+          // Code block
+          const codeMatch = trimmed.match(/^```(?:\w*)\n?([\s\S]*?)```$/);
+          if (codeMatch) {
+            return `<pre style="background:#f5f5f5;padding:6px 8px;border-radius:3px;overflow-x:auto;font-family:monospace;font-size:12px;margin:4px 0">${escapeHtml(codeMatch[1].trim())}</pre>`;
+          }
+
+      // Unordered list block
+          const unorderedListLines = blockLines.filter(l => /^[-•]\s/.test(l.trim()));
+          if (unorderedListLines.length === blockLines.length) {
+            const items = unorderedListLines.map(l => `<li style="margin:2px 0">${renderInline(l.trim().slice(2))}</li>`).join('');
+            return `<ul style="margin:6px 0;padding-left:22px;line-height:1.5">${items}</ul>`;
+          }
+
+          // Ordered list block
+          const orderedListLines = blockLines.filter(l => /^\d+\.\s/.test(l.trim()));
+          if (orderedListLines.length === blockLines.length) {
+            const items = orderedListLines.map(l => `<li style="margin:2px 0">${renderInline(l.trim().replace(/^\d+\.\s/, ''))}</li>`).join('');
+            return `<ol style="margin:6px 0;padding-left:24px;line-height:1.5">${items}</ol>`;
+          }
+
+          // Plain paragraph (handle soft line breaks within)
+          const lines = trimmed.split('\n').map(l => renderInline(l)).join(' ');
+          return `<p style="margin:8px 0;line-height:1.6">${lines}</p>`;
+        }).join('');
+      };
+
+      return React.createElement('div', {
+        style: { fontFamily: 'Poppins, sans-serif', fontSize: '13px', color: 'black' },
+        dangerouslySetInnerHTML: { __html: renderMarkdown(children || '') }
+      });
+    };
     import { vscode } from "./utilities/vscode";
 
     type AnnotationType = React.FC<AnnotationEditorProps>
@@ -552,6 +621,7 @@
 
       // Get the highlighted code and document context
       const highlightedCode = props.utils.getText();
+      const hasHighlightedCode = highlightedCode.trim().length > 0;
       const documentText = props.value.document || '';
       const startPos = props.value.start;
       const endPos = props.value.end;
@@ -906,14 +976,14 @@
             }}>
               <button
                 onClick={generateExplanation}
-                disabled={isLoading}
+                disabled={isLoading || !hasHighlightedCode}
                 style={{
                   padding: "8px 16px",
-                  backgroundColor: isLoading ? "#e0e0e0" : "#0078D4",
+                  backgroundColor: (isLoading || !hasHighlightedCode) ? "#e0e0e0" : "#0078D4",
                   color: "white",
                   border: "none",
                   borderRadius: "4px",
-                  cursor: isLoading ? "not-allowed" : "pointer",
+                  cursor: (isLoading || !hasHighlightedCode) ? "not-allowed" : "pointer",
                   fontSize: "14px",
                   fontWeight: "500",
                   transition: "background-color 0.2s"
@@ -921,6 +991,11 @@
               >
                 {isLoading ? "Generating..." : "Generate Explanation"}
               </button>
+              {!hasHighlightedCode && (
+                <span style={{ fontSize: "12px", color: "#8a6d3b" }}>
+                  Select text in the editor to enable explanation.
+                </span>
+              )}
               
               <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                 <label style={{ fontSize: "13px", color: "#666", fontWeight: "500" }}>
@@ -1902,160 +1977,74 @@
   const Generator: React.FC<AnnotationEditorProps> = (props) => {
   // State management
   const [userInput, setUserInput] = useState(props.value.metadata.userInput || '');
-  const [generatedCode, setGeneratedCode] = useState(props.value.metadata.generatedCode || '');
+  const [draftText, setDraftText] = useState(props.value.metadata.annotationDraftText || '');
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [hasGenerated, setHasGenerated] = useState(!!(props.value.metadata.annotationDraftText));
+  const [isFinalized, setIsFinalized] = useState(props.value.metadata.isFinalized || false);
   const [useMock, setUseMock] = useState(false);
-  const [apiDiagnostics, setApiDiagnostics] = useState<string>('');
-  const [GeneratedComponent, setGeneratedComponent] = useState<React.FC<AnnotationEditorProps> | null>(null);
+  const annotationTitle = props.value.metadata.annotationTitle || userInput || '';
+
+  const dynamicActions = [
+    {
+      id: 'explain',
+      label: 'Explain Highlighted Code',
+      pattern: /\b(explain|what does this do|what does this code do|how does this work)\b/i,
+      systemPrompt: `You write concise annotation text that explains highlighted code for learners.
+Return markdown only. No title. Prefer short paragraphs and section headers like ### Purpose or ### Behavior. Use numbered lists for step-by-step logic. Preserve inline code with backticks.`,
+      userSuffix: 'Explain the highlighted code clearly.',
+    },
+    {
+      id: 'summarize',
+      label: 'Summarize',
+      pattern: /\b(summari[sz]e|summary|overview|brief|tldr|tl;dr)\b/i,
+      systemPrompt: `You write a concise summary of highlighted code.
+Return markdown only. No title. Keep it to 2-4 sentences max. Focus on what the code accomplishes at a high level, not implementation details.`,
+      userSuffix: 'Summarize the highlighted code in a few sentences.',
+    },
+    {
+      id: 'step-by-step',
+      label: 'Step-by-Step Walkthrough',
+      pattern: /\b(step[- ]by[- ]step|walkthrough|trace|line[- ]by[- ]line|walk through)\b/i,
+      systemPrompt: `You write a step-by-step walkthrough of highlighted code.
+Return markdown only. No title. Use a numbered list where each step explains what one logical chunk of the code does, in execution order. Keep each step to one sentence.`,
+      userSuffix: 'Walk through the highlighted code step by step.',
+    },
+    {
+      id: 'context',
+      label: 'How Does This Fit In?',
+      pattern: /\b(context|fit|role|purpose|why is this|relationship|how does this fit|within the)\b/i,
+      systemPrompt: `You explain how a piece of highlighted code fits within its surrounding class, module, or file.
+Return markdown only. No title. Focus on the role this code plays in the larger structure: what calls it, what it enables, why it exists here rather than elsewhere.`,
+      userSuffix: 'Explain how the highlighted code fits within the overall class or module.',
+    },
+  ];
+
+  const draftIsEmpty = !draftText.trim();
+  const visibleActions = draftIsEmpty
+    ? dynamicActions
+    : dynamicActions.filter(a => a.pattern.test(userInput || annotationTitle));
   
   const isMounted = useRef(true);
 
-  // Fallback mock API - only used when real API completely fails
-  // This does NOT generate predetermined templates - it shows the actual error
-  const fallbackMockLmApi = {
-    chat: async (messages: any, options?: any, errorDetails?: string) => {
-      console.log('[FallbackMockAPI] Real API failed - showing error component with details');
-      
-      // Escape the error message for safe inclusion in JavaScript string
-      const safeErrorDetails = (errorDetails || 'Unknown error')
-        .replace(/\\/g, '\\\\')
-        .replace(/'/g, "\\'")
-        .replace(/"/g, '\\"')
-        .replace(/\n/g, '\\n')
-        .replace(/\r/g, '\\r');
-      
-      // Return an error component that displays the actual error
-      return `
-const [showDetails, setShowDetails] = useState(false);
-
-console.log('[FallbackComponent] Real API failed, showing error');
-
-return React.createElement('div',
-  { style: { padding: '10px', fontFamily: 'Poppins, sans-serif' } },
-  React.createElement('div',
-    { style: { padding: '12px', backgroundColor: '#FED9CC', border: '2px solid #D83B01', borderRadius: '6px', marginBottom: '10px' } },
-    React.createElement('h3', 
-      { style: { ...commonTextStyle, marginBottom: '10px', color: '#D83B01', fontSize: '16px' } },
-      '⚠️ API Error'
-    ),
-    React.createElement('p',
-      { style: { ...commonTextStyle, fontSize: '13px', marginBottom: '10px' } },
-      'The component generation API failed. See error details below:'
-    ),
-    React.createElement('div',
-      { style: { marginTop: '10px', marginBottom: '10px' } },
-      React.createElement('button',
-        {
-          onClick: () => setShowDetails(!showDetails),
-          style: {
-            padding: '6px 12px',
-            backgroundColor: '#D83B01',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '12px'
-          }
-        },
-        showDetails ? '▼ Hide Error Details' : '▶ Show Error Details'
-      )
-    ),
-    showDetails && React.createElement('pre',
-      {
-        style: {
-          marginTop: '10px',
-          padding: '10px',
-          backgroundColor: '#fff',
-          border: '1px solid #D83B01',
-          borderRadius: '4px',
-          fontSize: '11px',
-          overflow: 'auto',
-          maxHeight: '200px',
-          fontFamily: 'monospace',
-          whiteSpace: 'pre-wrap',
-          wordBreak: 'break-word'
-        }
-      },
-      '${safeErrorDetails}'
-    )
-  ),
-  React.createElement('div',
-    { style: { padding: '10px', backgroundColor: '#F0F0F0', borderRadius: '4px', fontSize: '12px' } },
-    React.createElement('p',
-      { style: { ...commonTextStyle, fontWeight: 'bold', marginBottom: '8px' } },
-      'Your request:'
-    ),
-    React.createElement('p',
-      { style: { ...commonTextStyle, fontSize: '12px', fontStyle: 'italic', marginBottom: '10px' } },
-      props.value.metadata.userInput || 'No request provided'
-    ),
-    React.createElement('p',
-      { style: { ...commonTextStyle, fontWeight: 'bold', marginBottom: '8px' } },
-      'Highlighted text:'
-    ),
-    React.createElement('pre',
-      { style: { ...commonTextStyle, fontSize: '11px', backgroundColor: '#fff', padding: '8px', borderRadius: '4px', overflow: 'auto', maxHeight: '100px' } },
-      props.utils.getText() || 'No text highlighted'
-    )
-  )
-);
-      `.trim();
-    }
-  };
-
+  // Check API availability on mount
   useEffect(() => {
-    // Comprehensive API diagnostics
-    const diagnostics = [];
-    
-    diagnostics.push('=== API Diagnostics ===');
-    diagnostics.push(`vscode: ${typeof vscode} ${vscode ? '✓' : '✗'}`);
-    diagnostics.push(`lmApi: ${typeof lmApi} ${lmApi ? '✓' : '✗'}`);
-    
-    if (lmApi) {
-      diagnostics.push(`lmApi.chat: ${typeof lmApi.chat} ${typeof lmApi.chat === 'function' ? '✓' : '✗'}`);
-    }
-    
-    diagnostics.push(`fallbackMockLmApi: ${typeof fallbackMockLmApi} ${fallbackMockLmApi ? '✓' : '✗'}`);
-    
-    const diagText = diagnostics.join('\n');
-    setApiDiagnostics(diagText);
-    console.log(diagText);
-    
-    // Only use mock if the real API is not available
     const lmApiAvailable = typeof lmApi !== 'undefined' && lmApi !== null && typeof lmApi.chat === 'function';
-    
     if (!lmApiAvailable) {
-      console.warn('[Generator] Real lmApi not available - fallback mode enabled');
       setUseMock(true);
-    } else {
-      console.log('[Generator] Real lmApi is available');
-      setUseMock(false);
-    }
-    
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  // Load existing generated component on mount
-  useEffect(() => {
-    if (generatedCode && isMounted.current) {
-      try {
-        compileComponent(generatedCode);
-      } catch (err) {
-        console.error("[Generator] Failed to compile existing code:", err);
-      }
     }
+    return () => { isMounted.current = false; };
   }, []);
 
   // Save state to metadata
   useEffect(() => {
     props.utils.setMetadata({
       userInput,
-      generatedCode,
+      annotationDraftText: draftText,
+      annotationTitle: userInput || annotationTitle,
+      isFinalized,
     });
-  }, [userInput, generatedCode]);
+  }, [userInput, draftText, isFinalized]);
 
   // Get document context
   const anchorText = props.utils.getText();
@@ -2065,11 +2054,9 @@ return React.createElement('div',
 
   const createFormattedDocument = () => {
     if (!documentText) return '';
-    
     const before = documentText.substring(0, startPos);
     const highlighted = documentText.substring(startPos, endPos);
     const after = documentText.substring(endPos);
-    
     return `${before}<<<HIGHLIGHTED>${highlighted}</HIGHLIGHTED>>>${after}`;
   };
 
@@ -2084,173 +2071,53 @@ return React.createElement('div',
 
     try {
       const formattedDocument = createFormattedDocument();
-      
+
       const prompt: ChatMessage[] = [
         {
           role: "system",
-          content: `You are an expert React developer creating annotation components for a code annotation system. 
-
-CONTEXT:
-- You will receive a description of what the annotation should do
-- You have access to the highlighted code/text and surrounding document context
-- The annotation component receives props of type AnnotationEditorProps with these key utilities:
-  * props.utils.getText() - gets the highlighted text
-  * props.utils.setText(newText) - updates the highlighted text
-  * props.utils.setMetadata(obj) - persists data across sessions
-  * props.value.metadata - retrieves persisted data
-  * props.value.document - the full document text for context
-  * props.value.start/end - position of highlighted text
-
-CRITICAL REQUIREMENT - NO JSX:
-You MUST use React.createElement() instead of JSX syntax because the code will be compiled without a JSX transformer.
-DO NOT use angle brackets like <div>, <button>, etc.
-Instead use: React.createElement('div', { style: {...} }, 'content')
-
-REQUIREMENTS:
-1. Generate ONLY the component function body using React.createElement
-2. Do NOT include: imports, export statements, or the component function declaration
-3. Use React hooks (useState, useEffect, useRef) as needed - they're available from React destructuring
-4. Store all state in metadata using props.utils.setMetadata() for persistence
-5. Use the commonTextStyle constant for consistent styling: { fontFamily: "Poppins, sans-serif", fontSize: "14px", color: "black" }
-6. Include comprehensive console.log statements for debugging with format: console.log('[ComponentName] message', data)
-7. Handle errors gracefully with try-catch blocks
-8. The lmApi is available with this EXACT signature:
-   const response = await lmApi.chat(messages, { vendor: 'copilot', family: 'gpt-4o', temperature: 0.32 });
-   IMPORTANT: lmApi.chat() returns a STRING directly, NOT an object. Use it like: const text = await lmApi.chat(messages, options);
-9. Use props.value.document to understand code context for better defaults and behavior
-10. Keep explanations and messages concise and user-friendly
-11. GENERATE EXACTLY WHAT THE USER REQUESTS - do not fall back to predetermined templates
-
-OUTPUT FORMAT:
-Return ONLY valid JavaScript code using React.createElement().
-Start directly with useState/useEffect declarations or the return statement.
-DO NOT wrap code in markdown code blocks.
-
-EXAMPLE OUTPUT STRUCTURE:
-const [value, setValue] = useState(props.value.metadata.value || '');
-console.log('[ComponentName] Initialized with value:', value);
-
-useEffect(() => {
-  props.utils.setMetadata({ value });
-}, [value]);
-
-const handleAction = async () => {
-  console.log('[ComponentName] Action triggered');
-  try {
-    const result = await lmApi.chat([
-      { role: 'system', content: 'You are helpful.' },
-      { role: 'user', content: 'Hello' }
-    ], { vendor: 'copilot', family: 'gpt-4o', temperature: 0.5 });
-    console.log('[ComponentName] Got result:', result);
-  } catch (error) {
-    console.error('[ComponentName] Error:', error);
-  }
-};
-
-return React.createElement('div', 
-  { style: { padding: "10px", fontFamily: "Poppins, sans-serif" } },
-  React.createElement('button', 
-    { onClick: handleAction, style: commonTextStyle },
-    'Click Me'
-  ),
-  React.createElement('p', { style: commonTextStyle }, value)
-);`
+          content: `You write concise annotation text that fulfills the user's requested annotation.
+
+Return markdown only for the annotation body.
+Do not include a title.
+Do not default to generic "explain highlighted code" wording unless the user explicitly asked for an explanation.
+Match the user's request closely.
+Prefer short paragraphs and section headers only when they improve readability.
+Preserve inline code formatting with backticks where useful.
+Keep it clean enough to display directly inside an annotation.`
         },
         {
           role: "user",
-          content: `Create an annotation component based on this EXACT description:
-${userInput}
-
-Document context (highlighted section marked):
-${formattedDocument || 'No document context available'}
-
-Highlighted text:
-${anchorText || 'No text highlighted'}
-
-IMPORTANT: Generate a component that fulfills the EXACT request above. Do not use predetermined templates or generic components. Create custom functionality that matches what the user specifically asked for.
-
-Generate the component implementation now.`
+          content:
+            `User request: ${userInput}\n\n` +
+            `Highlighted code with context:\n\n${formattedDocument || anchorText}\n\n` +
+            `Write the annotation text now.`
         }
       ];
 
-      console.log('[Generator] Starting generation...');
-      console.log('[Generator] Force fallback mode:', useMock);
-      console.log('[Generator] User request:', userInput);
-      
       let response: string;
-      let apiUsed = 'unknown';
-      
       if (useMock) {
-        console.log('[Generator] Using fallback API (manual override - NOT RECOMMENDED)');
-        response = await fallbackMockLmApi.chat(prompt, undefined, 'Manual fallback mode enabled - real API was not attempted');
-        apiUsed = 'fallback-manual';
+        await new Promise(r => setTimeout(r, 500));
+        response = '### Purpose\nThis method compares Song objects to determine their ordering.\n\n### Behavior\n1. **Null Check**: Throws if the other song is null.\n2. **Title**: Compares titles lexicographically.\n3. **Artist**: If titles match, compares artists.\n4. **Duration**: If both match, compares duration numerically.\n5. **Genre**: Final tiebreaker on genre.';
       } else {
-        console.log('[Generator] Attempting real lmApi...');
-        console.log('[Generator] lmApi type:', typeof lmApi);
-        console.log('[Generator] lmApi.chat type:', typeof lmApi?.chat);
-        
-        try {
-          const startTime = Date.now();
-          response = await lmApi.chat(prompt, {
-            vendor: 'copilot',
-            family: 'gpt-4o',
-            temperature: 0.3
-          });
-          const elapsed = Date.now() - startTime;
-          console.log(`[Generator] Real API succeeded in ${elapsed}ms`);
-          apiUsed = 'real';
-        } catch (apiError: unknown) {
-          console.error('[Generator] Real API failed:', apiError);
-          console.error('[Generator] Error type:', (apiError as any)?.constructor?.name);
-          console.error('[Generator] Error message:', (apiError instanceof Error) ? apiError.message : String(apiError));
-          console.log('[Generator] Falling back to error component');
-          
-          // Format the error details for display
-          let errorDetails = '';
-          if (apiError instanceof Error) {
-            errorDetails = `Error: ${apiError.message}\n\nStack trace:\n${apiError.stack || 'No stack trace available'}`;
-          } else {
-            errorDetails = `Error: ${String(apiError)}\n\nType: ${(apiError as any)?.constructor?.name || 'unknown'}`;
-          }
-          
-          // Add any additional error properties
-          if (typeof apiError === 'object' && apiError !== null) {
-            const errorObj = apiError as any;
-            const extraProps = Object.keys(errorObj).filter(k => k !== 'message' && k !== 'stack' && k !== 'name');
-            if (extraProps.length > 0) {
-              errorDetails += '\n\nAdditional details:\n';
-              extraProps.forEach(prop => {
-                errorDetails += `${prop}: ${JSON.stringify(errorObj[prop], null, 2)}\n`;
-              });
-            }
-          }
-          
-          response = await fallbackMockLmApi.chat(prompt, undefined, errorDetails);
-          apiUsed = 'fallback-auto';
-        }
-      }
-
-      console.log('[Generator] API used:', apiUsed);
-      console.log('[Generator] Response length:', response?.length);
-      console.log('[Generator] Response preview:', response?.substring(0, 100));
-
-      // Extract code from response (remove markdown code blocks if present)
-      let code = response.trim();
-      const codeBlockMatch = code.match(/```(?:javascript|typescript|jsx|tsx)?\n([\s\S]*?)\n```/);
-      if (codeBlockMatch) {
-        code = codeBlockMatch[1].trim();
-        console.log('[Generator] Extracted code from markdown block');
+        response = await lmApi.chat(prompt, {
+          vendor: 'copilot',
+          family: 'gpt-4o',
+          temperature: 0.35
+        });
       }
 
-      console.log('[Generator] Final code length:', code.length);
-      
       if (isMounted.current) {
-        setGeneratedCode(code);
-        compileComponent(code);
-        console.log('[Generator] Component compiled successfully');
+        const nextDraft = response.trim();
+        setDraftText(nextDraft);
+        setHasGenerated(true);
+        setIsFinalized(false);
+        props.utils.setMetadata({
+          annotationDraftText: nextDraft,
+          annotationTitle: userInput,
+        });
       }
     } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : 'An error occurred while generating the annotation';
+      const errorMsg = err instanceof Error ? err.message : 'An error occurred while generating';
       console.error('[Generator] Error:', errorMsg, err);
       if (isMounted.current) {
         setError(errorMsg);
@@ -2262,61 +2129,141 @@ Generate the component implementation now.`
     }
   };
 
-  const compileComponent = (code: string) => {
-    try {
-      console.log('[Generator] Compiling component...');
-      
-      const commonTextStyle = {
-        fontFamily: "Poppins, sans-serif",
-        fontSize: "14px",
-        color: "black",
-      };
+  const runDynamicAction = async (action: typeof dynamicActions[number]) => {
+    if (!anchorText.trim()) {
+      setError('No highlighted code selected');
+      return;
+    }
 
-      // Create a function that returns a React component
-      const componentFunction = new Function(
-        'React',
-        'props',
-        'lmApi',
-        'mockLmApi',
-        'vscode',
-        'commonTextStyle',
-        `
-        const { useState, useEffect, useRef } = React;
-        ${code}
-        `
-      );
+    setIsGenerating(true);
+    setError(null);
 
-      // Create a wrapper component
-      const WrappedComponent: React.FC<AnnotationEditorProps> = (componentProps) => {
-        return componentFunction(
-          React,
-          componentProps,
-          lmApi,
-          mockLmApi,
-          vscode,
-          commonTextStyle
-        );
-      };
+    try {
+      const formattedDocument = createFormattedDocument();
+      const prompt: ChatMessage[] = [
+        { role: "system", content: action.systemPrompt },
+        {
+          role: "user",
+          content:
+            `${action.userSuffix}\n\n` +
+            `Highlighted code with context:\n\n${formattedDocument || anchorText}`
+        }
+      ];
+
+      let response: string;
+      if (useMock) {
+        await new Promise(r => setTimeout(r, 500));
+        response = `Mock result for "${action.label}".\n\nThis is placeholder text from the mock API.`;
+      } else {
+        response = await lmApi.chat(prompt, {
+          vendor: 'copilot',
+          family: 'gpt-4o',
+          temperature: 0.35
+        });
+      }
 
-      setGeneratedComponent(() => WrappedComponent);
-      console.log('[Generator] Component compiled and set successfully');
+      if (isMounted.current) {
+        const nextDraft = response.trim();
+        setDraftText(nextDraft);
+        setHasGenerated(true);
+        props.utils.setMetadata({ annotationDraftText: nextDraft });
+      }
     } catch (err) {
-      console.error('[Generator] Compilation error:', err);
-      throw new Error(`Failed to compile generated component: ${err instanceof Error ? err.message : String(err)}`);
+      const errorMsg = err instanceof Error ? err.message : `Failed: ${action.label}`;
+      console.error(`[Generator] ${action.id} error:`, errorMsg, err);
+      if (isMounted.current) {
+        setError(errorMsg);
+      }
+    } finally {
+      if (isMounted.current) {
+        setIsGenerating(false);
+      }
     }
   };
 
   const resetGenerator = () => {
-    console.log('[Generator] Resetting generator');
-    setGeneratedCode('');
-    setGeneratedComponent(null);
+    setDraftText('');
     setError(null);
+    setHasGenerated(false);
+    setIsFinalized(false);
+    props.utils.setMetadata({
+      annotationDraftText: '',
+      annotationTitle: '',
+      isFinalized: false,
+    });
   };
 
-  // If we have a generated component, render it
-  if (GeneratedComponent) {
+  const finalizeAnnotation = () => {
+    props.utils.setMetadata({
+      annotationDraftText: draftText,
+      annotationTitle: userInput || annotationTitle,
+      isFinalized: true,
+    });
+    setIsFinalized(true);
+  };
+
+  const editAnnotation = () => {
+    setIsFinalized(false);
+  };
+
+  // Finalized state
+  if (hasGenerated && isFinalized) {
+    return (
+      <div style={{
+        padding: "10px",
+        fontFamily: "Poppins, sans-serif",
+        overflow: "hidden",
+        width: "100%",
+        boxSizing: "border-box",
+      }}>
+        <div style={{
+          marginBottom: "8px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          fontSize: "11px",
+          color: "#666",
+        }}>
+          <span style={{ fontStyle: "italic" }}>{userInput || annotationTitle || 'Annotation'}</span>
+          <button
+            onClick={editAnnotation}
+            style={{
+              padding: "3px 8px",
+              backgroundColor: "transparent",
+              color: "#0078D4",
+              border: "1px solid #0078D4",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "11px",
+            }}
+          >
+            Edit
+          </button>
+        </div>
+        <div style={{
+          width: "100%",
+          boxSizing: "border-box",
+          wordWrap: "break-word",
+          overflowWrap: "break-word",
+        }}>
+          <div style={{ ...commonTextStyle, lineHeight: "1.6" }}>
+            <SimpleMarkdown>{draftText || "(No generated text yet)"}</SimpleMarkdown>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Active state: editing draft
+  if (hasGenerated && !isFinalized) {
     return (
-      <div style={{ padding: "10px", fontFamily: "Poppins, sans-serif" }}>
+      <div style={{
+        padding: "10px",
+        fontFamily: "Poppins, sans-serif",
+        overflow: "hidden",
+        width: "100%",
+        boxSizing: "border-box",
+      }}>
         <div style={{
           marginBottom: "10px",
           padding: "8px",
@@ -2329,22 +2276,100 @@ Generate the component implementation now.`
           alignItems: "center"
         }}>
           <span>✓ Generated annotation active</span>
-          <button
-            onClick={resetGenerator}
-            style={{
-              padding: "4px 8px",
-              backgroundColor: "#f44336",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer",
-              fontSize: "12px"
-            }}
-          >
-            Reset
-          </button>
+          <div style={{ display: "flex", gap: "6px" }}>
+            <button
+              onClick={finalizeAnnotation}
+              style={{
+                padding: "4px 8px",
+                backgroundColor: "#4CAF50",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "12px"
+              }}
+            >
+              Finalize
+            </button>
+            <button
+              onClick={resetGenerator}
+              style={{
+                padding: "4px 8px",
+                backgroundColor: "#f44336",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "12px"
+              }}
+            >
+              Reset
+            </button>
+          </div>
         </div>
-        <GeneratedComponent {...props} />
+        <div style={{ marginTop: "10px" }}>
+            {visibleActions.length > 0 && (
+              <div style={{ marginBottom: "10px", display: "flex", gap: "6px", flexWrap: "wrap" }}>
+                {visibleActions.map(action => (
+                  <button
+                    key={action.id}
+                    onClick={() => runDynamicAction(action)}
+                    disabled={isGenerating}
+                    style={{
+                      padding: "5px 10px",
+                      backgroundColor: isGenerating ? "#cccccc" : "#ffffff",
+                      color: "#111111",
+                      border: "1px solid #888",
+                      borderRadius: "4px",
+                      cursor: isGenerating ? "default" : "pointer",
+                      fontSize: "13px",
+                    }}
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+            <textarea
+              value={draftText}
+              onChange={(e) => {
+                setDraftText(e.target.value);
+                props.utils.setMetadata({
+                  annotationDraftText: e.target.value,
+                  explanation: e.target.value,
+                  content: e.target.value,
+                  text: e.target.value,
+                  summary: e.target.value,
+                });
+              }}
+              style={{
+                width: "100%",
+                minHeight: "260px",
+                fontFamily: "Poppins, sans-serif",
+                fontSize: "13px",
+                padding: "8px",
+                borderRadius: "4px",
+                border: "1px solid #ccc",
+                resize: "vertical",
+                boxSizing: "border-box",
+                marginBottom: "8px",
+                lineHeight: "1.5",
+              }}
+            />
+        </div>
+
+        {error && (
+          <div style={{
+            color: "#D83B01",
+            backgroundColor: "#FED9CC",
+            padding: "8px",
+            borderRadius: "4px",
+            marginTop: "8px",
+            fontSize: "13px",
+          }}>
+            {error}
+          </div>
+        )}
       </div>
     );
   }
@@ -2352,23 +2377,6 @@ Generate the component implementation now.`
   // Otherwise, show the input interface
   return (
     <div style={{ padding: "10px", fontFamily: "Poppins, sans-serif" }}>
-      {apiDiagnostics && (
-        <details style={{ marginBottom: "15px", fontSize: "11px", color: "#666" }}>
-          <summary style={{ cursor: "pointer", fontWeight: "bold" }}>
-            API Diagnostics (click to expand)
-          </summary>
-          <pre style={{
-            marginTop: "8px",
-            padding: "8px",
-            backgroundColor: "#f5f5f5",
-            borderRadius: "4px",
-            overflow: "auto"
-          }}>
-            {apiDiagnostics}
-          </pre>
-        </details>
-      )}
-      
       <div style={{ marginBottom: "12px" }}>
         <label style={{
           display: "block",
@@ -2412,25 +2420,6 @@ Generate the component implementation now.`
           {isGenerating ? "Generating..." : "Generate"}
         </button>
 
-        <label style={{
-          display: "flex",
-          alignItems: "center",
-          fontSize: "12px",
-          cursor: "pointer",
-          marginLeft: "10px"
-        }}>
-          <input
-            type="checkbox"
-            checked={useMock}
-            onChange={() => setUseMock(!useMock)}
-            style={{ marginRight: "5px" }}
-          />
-          Force fallback mode (shows error - for testing only)
-        </label>
-        
-        <span style={{ fontSize: "11px", color: "#666", marginLeft: "10px" }}>
-          {useMock ? "⚠️ Fallback Mode" : "✓ Real API"}
-        </span>
       </div>
 
       {error && (
@@ -2446,30 +2435,6 @@ Generate the component implementation now.`
         </div>
       )}
 
-      {generatedCode && !GeneratedComponent && (
-        <div style={{
-          marginTop: "15px",
-          padding: "10px",
-          backgroundColor: "#FFF3CD",
-          border: "1px solid #FFC107",
-          borderRadius: "4px",
-          fontSize: "12px"
-        }}>
-          <strong>Generated code (failed to compile):</strong>
-          <pre style={{
-            marginTop: "8px",
-            padding: "8px",
-            backgroundColor: "#F5F5F5",
-            borderRadius: "4px",
-            overflow: "auto",
-            maxHeight: "200px",
-            fontSize: "11px"
-          }}>
-            {generatedCode}
-          </pre>
-        </div>
-      )}
-
       <div style={{
         marginTop: "15px",
         padding: "10px",

From 5194f99665ff3c3a433ed70ea366189fcdd23390 Mon Sep 17 00:00:00 2001
From: saoshreyas <saoshreyass07@gmail.com>
Date: Tue, 21 Apr 2026 11:31:33 -0700
Subject: [PATCH 3/3] change tools file and put Generator in own file.

---
 vscode-extension/webview-ui/src/Generator.tsx |  490 +++
 vscode-extension/webview-ui/src/tools.tsx     | 2689 ++---------------
 2 files changed, 776 insertions(+), 2403 deletions(-)
 create mode 100644 vscode-extension/webview-ui/src/Generator.tsx

diff --git a/vscode-extension/webview-ui/src/Generator.tsx b/vscode-extension/webview-ui/src/Generator.tsx
new file mode 100644
index 0000000..b39e781
--- /dev/null
+++ b/vscode-extension/webview-ui/src/Generator.tsx
@@ -0,0 +1,490 @@
+import { AnnotationEditorProps } from "./App";
+import React, { useEffect, useState, useRef } from "react";
+import e from "cors";
+import "./tools.css";
+import { ChatMessage, lmApi } from "./lm-api-client";
+
+
+const Generator: React.FC<AnnotationEditorProps> = (props) => {
+  // State management
+  const [userInput, setUserInput] = useState(props.value.metadata.userInput || '');
+  const [draftText, setDraftText] = useState(props.value.metadata.annotationDraftText || '');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasGenerated, setHasGenerated] = useState(!!(props.value.metadata.annotationDraftText));
+  const [isFinalized, setIsFinalized] = useState(props.value.metadata.isFinalized || false);
+  const [useMock, setUseMock] = useState(false);
+  const annotationTitle = props.value.metadata.annotationTitle || userInput || '';
+
+  const dynamicActions = [
+    {
+      id: 'explain',
+      label: 'Explain Highlighted Code',
+      pattern: /\b(explain|what does this do|what does this code do|how does this work)\b/i,
+      systemPrompt: `You write concise annotation text that explains highlighted code for learners.
+Return markdown only. No title. Prefer short paragraphs and section headers like ### Purpose or ### Behavior. Use numbered lists for step-by-step logic. Preserve inline code with backticks.`,
+      userSuffix: 'Explain the highlighted code clearly.',
+    },
+    {
+      id: 'summarize',
+      label: 'Summarize',
+      pattern: /\b(summari[sz]e|summary|overview|brief|tldr|tl;dr)\b/i,
+      systemPrompt: `You write a concise summary of highlighted code.
+Return markdown only. No title. Keep it to 2-4 sentences max. Focus on what the code accomplishes at a high level, not implementation details.`,
+      userSuffix: 'Summarize the highlighted code in a few sentences.',
+    },
+    {
+      id: 'step-by-step',
+      label: 'Step-by-Step Walkthrough',
+      pattern: /\b(step[- ]by[- ]step|walkthrough|trace|line[- ]by[- ]line|walk through)\b/i,
+      systemPrompt: `You write a step-by-step walkthrough of highlighted code.
+Return markdown only. No title. Use a numbered list where each step explains what one logical chunk of the code does, in execution order. Keep each step to one sentence.`,
+      userSuffix: 'Walk through the highlighted code step by step.',
+    },
+    {
+      id: 'context',
+      label: 'How Does This Fit In?',
+      pattern: /\b(context|fit|role|purpose|why is this|relationship|how does this fit|within the)\b/i,
+      systemPrompt: `You explain how a piece of highlighted code fits within its surrounding class, module, or file.
+Return markdown only. No title. Focus on the role this code plays in the larger structure: what calls it, what it enables, why it exists here rather than elsewhere.`,
+      userSuffix: 'Explain how the highlighted code fits within the overall class or module.',
+    },
+  ];
+
+  const draftIsEmpty = !draftText.trim();
+  const visibleActions = draftIsEmpty
+    ? dynamicActions
+    : dynamicActions.filter(a => a.pattern.test(userInput || annotationTitle));
+
+  const isMounted = useRef(true);
+
+  // Check API availability on mount
+  useEffect(() => {
+    const lmApiAvailable = typeof lmApi !== 'undefined' && lmApi !== null && typeof lmApi.chat === 'function';
+    if (!lmApiAvailable) {
+      setUseMock(true);
+    }
+    return () => { isMounted.current = false; };
+  }, []);
+
+  // Save state to metadata
+  useEffect(() => {
+    props.utils.setMetadata({
+      userInput,
+      annotationDraftText: draftText,
+      annotationTitle: userInput || annotationTitle,
+      isFinalized,
+    });
+  }, [userInput, draftText, isFinalized]);
+
+  // Get document context
+  const anchorText = props.utils.getText();
+  const documentText = props.value.document || '';
+  const startPos = props.value.start;
+  const endPos = props.value.end;
+
+  const createFormattedDocument = () => {
+    if (!documentText) return '';
+    const before = documentText.substring(0, startPos);
+    const highlighted = documentText.substring(startPos, endPos);
+    const after = documentText.substring(endPos);
+    return `${before}<<<HIGHLIGHTED>${highlighted}</HIGHLIGHTED>>>${after}`;
+  };
+
+  const generateAnnotation = async () => {
+    if (!userInput.trim()) {
+      setError('Please describe what you want the annotation to do');
+      return;
+    }
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      const formattedDocument = createFormattedDocument();
+
+      const prompt: ChatMessage[] = [
+        {
+          role: "system",
+          content: `You write concise annotation text that fulfills the user's requested annotation.
+
+Return markdown only for the annotation body.
+Do not include a title.
+Do not default to generic "explain highlighted code" wording unless the user explicitly asked for an explanation.
+Match the user's request closely.
+Prefer short paragraphs and section headers only when they improve readability.
+Preserve inline code formatting with backticks where useful.
+Keep it clean enough to display directly inside an annotation.`
+        },
+        {
+          role: "user",
+          content:
+            `User request: ${userInput}\n\n` +
+            `Highlighted code with context:\n\n${formattedDocument || anchorText}\n\n` +
+            `Write the annotation text now.`
+        }
+      ];
+
+      let response: string;
+      if (useMock) {
+        await new Promise(r => setTimeout(r, 500));
+        response = '### Purpose\nThis method compares Song objects to determine their ordering.\n\n### Behavior\n1. **Null Check**: Throws if the other song is null.\n2. **Title**: Compares titles lexicographically.\n3. **Artist**: If titles match, compares artists.\n4. **Duration**: If both match, compares duration numerically.\n5. **Genre**: Final tiebreaker on genre.';
+      } else {
+        response = await lmApi.chat(prompt, {
+          vendor: 'copilot',
+          family: 'gpt-4o',
+          temperature: 0.35
+        });
+      }
+
+      if (isMounted.current) {
+        const nextDraft = response.trim();
+        setDraftText(nextDraft);
+        setHasGenerated(true);
+        setIsFinalized(false);
+        props.utils.setMetadata({
+          annotationDraftText: nextDraft,
+          annotationTitle: userInput,
+        });
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'An error occurred while generating';
+      console.error('[Generator] Error:', errorMsg, err);
+      if (isMounted.current) {
+        setError(errorMsg);
+      }
+    } finally {
+      if (isMounted.current) {
+        setIsGenerating(false);
+      }
+    }
+  };
+
+  const runDynamicAction = async (action: typeof dynamicActions[number]) => {
+    if (!anchorText.trim()) {
+      setError('No highlighted code selected');
+      return;
+    }
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      const formattedDocument = createFormattedDocument();
+      const prompt: ChatMessage[] = [
+        { role: "system", content: action.systemPrompt },
+        {
+          role: "user",
+          content:
+            `${action.userSuffix}\n\n` +
+            `Highlighted code with context:\n\n${formattedDocument || anchorText}`
+        }
+      ];
+
+      let response: string;
+      if (useMock) {
+        await new Promise(r => setTimeout(r, 500));
+        response = `Mock result for "${action.label}".\n\nThis is placeholder text from the mock API.`;
+      } else {
+        response = await lmApi.chat(prompt, {
+          vendor: 'copilot',
+          family: 'gpt-4o',
+          temperature: 0.35
+        });
+      }
+
+      if (isMounted.current) {
+        const nextDraft = response.trim();
+        setDraftText(nextDraft);
+        setHasGenerated(true);
+        props.utils.setMetadata({ annotationDraftText: nextDraft });
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : `Failed: ${action.label}`;
+      console.error(`[Generator] ${action.id} error:`, errorMsg, err);
+      if (isMounted.current) {
+        setError(errorMsg);
+      }
+    } finally {
+      if (isMounted.current) {
+        setIsGenerating(false);
+      }
+    }
+  };
+
+  const resetGenerator = () => {
+    setDraftText('');
+    setError(null);
+    setHasGenerated(false);
+    setIsFinalized(false);
+    props.utils.setMetadata({
+      annotationDraftText: '',
+      annotationTitle: '',
+      isFinalized: false,
+    });
+  };
+
+  const finalizeAnnotation = () => {
+    props.utils.setMetadata({
+      annotationDraftText: draftText,
+      annotationTitle: userInput || annotationTitle,
+      isFinalized: true,
+    });
+    setIsFinalized(true);
+  };
+
+  const editAnnotation = () => {
+    setIsFinalized(false);
+  };
+
+  // Finalized state
+  if (hasGenerated && isFinalized) {
+    return (
+      <div style={{
+        padding: "10px",
+        fontFamily: "Poppins, sans-serif",
+        overflow: "hidden",
+        width: "100%",
+        boxSizing: "border-box",
+      }}>
+        <div style={{
+          marginBottom: "8px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          fontSize: "11px",
+          color: "#666",
+        }}>
+          <span style={{ fontStyle: "italic" }}>{userInput || annotationTitle || 'Annotation'}</span>
+          <button
+            onClick={editAnnotation}
+            style={{
+              padding: "3px 8px",
+              backgroundColor: "transparent",
+              color: "#0078D4",
+              border: "1px solid #0078D4",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "11px",
+            }}
+          >
+            Edit
+          </button>
+        </div>
+        <div style={{
+          width: "100%",
+          boxSizing: "border-box",
+          wordWrap: "break-word",
+          overflowWrap: "break-word",
+        }}>
+          <div style={{ ...commonTextStyle, lineHeight: "1.6" }}>
+            <SimpleMarkdown>{draftText || "(No generated text yet)"}</SimpleMarkdown>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Active state: editing draft
+  if (hasGenerated && !isFinalized) {
+    return (
+      <div style={{
+        padding: "10px",
+        fontFamily: "Poppins, sans-serif",
+        overflow: "hidden",
+        width: "100%",
+        boxSizing: "border-box",
+      }}>
+        <div style={{
+          marginBottom: "10px",
+          padding: "8px",
+          backgroundColor: "#E8F5E9",
+          border: "1px solid #4CAF50",
+          borderRadius: "4px",
+          fontSize: "12px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}>
+          <span>✓ Generated annotation active</span>
+          <div style={{ display: "flex", gap: "6px" }}>
+            <button
+              onClick={finalizeAnnotation}
+              style={{
+                padding: "4px 8px",
+                backgroundColor: "#4CAF50",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "12px"
+              }}
+            >
+              Finalize
+            </button>
+            <button
+              onClick={resetGenerator}
+              style={{
+                padding: "4px 8px",
+                backgroundColor: "#f44336",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "12px"
+              }}
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        <div style={{ marginTop: "10px" }}>
+          {visibleActions.length > 0 && (
+            <div style={{ marginBottom: "10px", display: "flex", gap: "6px", flexWrap: "wrap" }}>
+              {visibleActions.map(action => (
+                <button
+                  key={action.id}
+                  onClick={() => runDynamicAction(action)}
+                  disabled={isGenerating}
+                  style={{
+                    padding: "5px 10px",
+                    backgroundColor: isGenerating ? "#cccccc" : "#ffffff",
+                    color: "#111111",
+                    border: "1px solid #888",
+                    borderRadius: "4px",
+                    cursor: isGenerating ? "default" : "pointer",
+                    fontSize: "13px",
+                  }}
+                >
+                  {action.label}
+                </button>
+              ))}
+            </div>
+          )}
+          <textarea
+            value={draftText}
+            onChange={(e) => {
+              setDraftText(e.target.value);
+              props.utils.setMetadata({
+                annotationDraftText: e.target.value,
+                explanation: e.target.value,
+                content: e.target.value,
+                text: e.target.value,
+                summary: e.target.value,
+              });
+            }}
+            style={{
+              width: "100%",
+              minHeight: "260px",
+              fontFamily: "Poppins, sans-serif",
+              fontSize: "13px",
+              padding: "8px",
+              borderRadius: "4px",
+              border: "1px solid #ccc",
+              resize: "vertical",
+              boxSizing: "border-box",
+              marginBottom: "8px",
+              lineHeight: "1.5",
+            }}
+          />
+        </div>
+
+        {error && (
+          <div style={{
+            color: "#D83B01",
+            backgroundColor: "#FED9CC",
+            padding: "8px",
+            borderRadius: "4px",
+            marginTop: "8px",
+            fontSize: "13px",
+          }}>
+            {error}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Otherwise, show the input interface
+  return (
+    <div style={{ padding: "10px", fontFamily: "Poppins, sans-serif" }}>
+      <div style={{ marginBottom: "12px" }}>
+        <label style={{
+          display: "block",
+          marginBottom: "6px",
+          fontWeight: "bold",
+          fontSize: "14px"
+        }}>
+          Describe the annotation you want to create:
+        </label>
+        <textarea
+          value={userInput}
+          onChange={(e) => setUserInput(e.target.value)}
+          placeholder="Example: Create a color picker that lets me change the hex color value in this code... or Create a timer that counts down from the number in this variable..."
+          style={{
+            width: "100%",
+            padding: "8px",
+            borderRadius: "4px",
+            border: "1px solid #ccc",
+            fontSize: "14px",
+            minHeight: "80px",
+            resize: "vertical",
+            fontFamily: "Poppins, sans-serif"
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: "15px", display: "flex", gap: "10px", alignItems: "center" }}>
+        <button
+          onClick={generateAnnotation}
+          disabled={isGenerating || !userInput.trim()}
+          style={{
+            padding: "6px 12px",
+            backgroundColor: isGenerating ? "#cccccc" : "#0078D4",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: isGenerating ? "default" : "pointer",
+            fontSize: "14px"
+          }}
+        >
+          {isGenerating ? "Generating..." : "Generate"}
+        </button>
+
+      </div>
+
+      {error && (
+        <div style={{
+          color: "#D83B01",
+          backgroundColor: "#FED9CC",
+          padding: "8px",
+          borderRadius: "4px",
+          marginBottom: "12px",
+          fontSize: "14px"
+        }}>
+          {error}
+        </div>
+      )}
+
+      <div style={{
+        marginTop: "15px",
+        padding: "10px",
+        backgroundColor: "#F0F0F0",
+        borderRadius: "4px",
+        fontSize: "12px",
+        color: "#666"
+      }}>
+        <strong>Tips:</strong>
+        <ul style={{ marginTop: "5px", marginBottom: "0", paddingLeft: "20px" }}>
+          <li>Be specific about what the annotation should do</li>
+          <li>Describe the exact behavior and UI you want</li>
+          <li>Mention if it should interact with the highlighted text</li>
+          <li>State if data should persist across sessions</li>
+          <li>Examples: "rating stars", "color picker", "countdown timer", "progress tracker"</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export {Generator};
\ No newline at end of file
diff --git a/vscode-extension/webview-ui/src/tools.tsx b/vscode-extension/webview-ui/src/tools.tsx
index fa485ed..aec339b 100644
--- a/vscode-extension/webview-ui/src/tools.tsx
+++ b/vscode-extension/webview-ui/src/tools.tsx
@@ -1,190 +1,141 @@
-    import { AnnotationEditorProps } from "./App";
-    import React, { useEffect, useState, useRef  } from "react";
-    import { ObjectInspector } from "react-inspector";
-    import e from "cors";
-    import './tools.css';
-    import LMUnitTest from "./LMUnitTest";
-    import ShowDebuggedExample from "./ShowDebuggedExample";
-    import { ChatMessage, lmApi, mockLmApi } from "./lm-api-client";
-    // Lightweight markdown renderer (react-markdown v9 is ESM-only and incompatible with Vite 2.9)
-    const SimpleMarkdown: React.FC<{ children: string }> = ({ children }) => {
-      const escapeHtml = (s: string) =>
-        s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-      const renderInline = (text: string): string =>
-        escapeHtml(text)
-          .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
-          .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-          .replace(/\*(.+?)\*/g, '<em>$1</em>')
-          // Inline code: subtle italic monospace, no heavy background
-          .replace(/`([^`]+)`/g, '<span style="font-family:monospace;font-style:italic;font-size:13px">$1</span>');
-
-      const renderMarkdown = (text: string): string => {
-        // Split into blocks on blank lines
-        const blocks = text.split(/\n{2,}/);
-        return blocks.map(block => {
-          const trimmed = block.trim();
-          if (!trimmed) return '';
-
-          const blockLines = trimmed.split('\n');
-          const headerMatch = blockLines[0].trim().match(/^(#{1,3})\s+(.+)$/);
-          if (headerMatch) {
-            const headerLevel = headerMatch[1].length;
-            const headerText = headerMatch[2];
-            const remainder = blockLines.slice(1).join('\n').trim();
-            const headerStyle =
-              headerLevel === 1
-                ? 'font-weight:700;font-size:15px;margin:8px 0 4px'
-                : headerLevel === 2
-                  ? 'font-weight:600;font-size:14px;margin:8px 0 4px'
-                  : 'font-weight:600;font-size:13px;margin:8px 0 4px';
-
-            return `<p style="${headerStyle}">${renderInline(headerText)}</p>${
-              remainder ? renderMarkdown(remainder) : ''
-            }`;
-          }
+import { AnnotationEditorProps } from "./App";
+import React, { useEffect, useState, useRef } from "react";
+import e from "cors";
+import "./tools.css";
+import LMUnitTest from "./LMUnitTest";
+import ShowDebuggedExample from "./ShowDebuggedExample";
+import { ChatMessage, lmApi, mockLmApi } from "./lm-api-client";
+import { vscode } from "./utilities/vscode";
+
+import {
+  FormalSpecification,
+  ExplainInEnglish,
+  OutputVisualizer,
+} from "./additionalTools";
+import Generator from "./Generator";
+
+import MarkdownNote from "./MarkdownEditor";
+
+type AnnotationType = React.FC<AnnotationEditorProps>;
+interface ImageData {
+  file: File;
+  src: string;
+}
+
+const commonTextStyle: React.CSSProperties = {
+  fontFamily: "Poppins, sans-serif",
+  fontSize: "14px",
+  color: "black",
+};
 
-          // Code block
-          const codeMatch = trimmed.match(/^```(?:\w*)\n?([\s\S]*?)```$/);
-          if (codeMatch) {
-            return `<pre style="background:#f5f5f5;padding:6px 8px;border-radius:3px;overflow-x:auto;font-family:monospace;font-size:12px;margin:4px 0">${escapeHtml(codeMatch[1].trim())}</pre>`;
-          }
+const ColorPicker: AnnotationType = (props) => {
+  return (
+    <div className="color-picker">
+      <input
+        value={props.value.metadata.colorName}
+        onChange={(e) => props.utils.setMetadata({ colorName: e.target.value })}
+      />
+      <input
+        type="color"
+        value={props.utils.getText()}
+        onChange={(e) => props.utils.setText(e.target.value)}
+      />
+    </div>
+  );
+};
 
-      // Unordered list block
-          const unorderedListLines = blockLines.filter(l => /^[-•]\s/.test(l.trim()));
-          if (unorderedListLines.length === blockLines.length) {
-            const items = unorderedListLines.map(l => `<li style="margin:2px 0">${renderInline(l.trim().slice(2))}</li>`).join('');
-            return `<ul style="margin:6px 0;padding-left:22px;line-height:1.5">${items}</ul>`;
-          }
+const Comment: React.FC<AnnotationEditorProps> = (props) => {
+  type Reply = {
+    datetime: string;
+    text: string;
+  };
 
-          // Ordered list block
-          const orderedListLines = blockLines.filter(l => /^\d+\.\s/.test(l.trim()));
-          if (orderedListLines.length === blockLines.length) {
-            const items = orderedListLines.map(l => `<li style="margin:2px 0">${renderInline(l.trim().replace(/^\d+\.\s/, ''))}</li>`).join('');
-            return `<ol style="margin:6px 0;padding-left:24px;line-height:1.5">${items}</ol>`;
-          }
+  const [comment, setComment] = useState(props.value.metadata.comment || "");
+  const [replies, setReplies] = useState<Reply[]>(props.value.metadata.replies || []);
+  const [newReplyText, setNewReplyText] = useState("");
 
-          // Plain paragraph (handle soft line breaks within)
-          const lines = trimmed.split('\n').map(l => renderInline(l)).join(' ');
-          return `<p style="margin:8px 0;line-height:1.6">${lines}</p>`;
-        }).join('');
-      };
+  // useEffect(() => {
+  //   const handler = setTimeout(() => {
+  //     props.utils.setMetadata({ comment, replies });
+  //   }, 300);
 
-      return React.createElement('div', {
-        style: { fontFamily: 'Poppins, sans-serif', fontSize: '13px', color: 'black' },
-        dangerouslySetInnerHTML: { __html: renderMarkdown(children || '') }
-      });
-    };
-    import { vscode } from "./utilities/vscode";
+  //   return () => {
+  //     clearTimeout(handler);
+  //   };
+  // }, [comment, replies]);
 
-    type AnnotationType = React.FC<AnnotationEditorProps>
-    interface ImageData {
-      file: File;
-      src: string;
+  const handleAddReply = () => {
+    if (newReplyText.trim() !== "") {
+      setReplies([...replies, { text: newReplyText, datetime: new Date().toLocaleString() }]);
+      setNewReplyText("");
     }
+  };
 
-    const commonTextStyle: React.CSSProperties = {
-      fontFamily: "Poppins, sans-serif",
-      fontSize: "14px",
-      color: "black",
-    };
-
-    const ColorPicker: AnnotationType = (props) => {
-      return (
-        <div className="color-picker">
-          <input
-            value={props.value.metadata.colorName}
-            onChange={(e) => props.utils.setMetadata({ colorName: e.target.value })}
-          />
-          <input
-            type="color"
-            value={props.utils.getText()}
-            onChange={(e) => props.utils.setText(e.target.value)}
-          />
+  const handleDeleteReply = (index: number) => {
+    const newReplies = replies.filter((_, i) => i !== index);
+    setReplies(newReplies);
+  };
+  // setComment(e.target.value)}
+  return (
+    <div style={{ marginBottom: "10px" }}>
+      <div
+        style={{
+          fontFamily: "Poppins, sans-serif",
+          display: "flex",
+          gap: "10px",
+          alignItems: "center",
+        }}>
+        <div style={{ fontWeight: "bold", fontSize: "12px" }}>Alex Smith</div>
+        <div
+          style={{
+            fontSize: "10px",
+            // align bottom of line
+          }}>
+          Today at 12:00 PM
         </div>
-      );
-    };
-
-    const Comment: React.FC<AnnotationEditorProps> = (props) => {
-      type Reply = {
-        datetime: string;
-        text: string;
-      };
-
-      const [comment, setComment] = useState(props.value.metadata.comment || "");
-      const [replies, setReplies] = useState<Reply[]>(props.value.metadata.replies || []);
-      const [newReplyText, setNewReplyText] = useState("");
-
-      // useEffect(() => {
-      //   const handler = setTimeout(() => {
-      //     props.utils.setMetadata({ comment, replies });
-      //   }, 300);
-
-      //   return () => {
-      //     clearTimeout(handler);
-      //   };
-      // }, [comment, replies]);
-
-      const handleAddReply = () => {
-        if (newReplyText.trim() !== "") {
-          setReplies([...replies, { text: newReplyText, datetime: new Date().toLocaleString() }]);
-          setNewReplyText("");
-        }
-      };
+      </div>
+      <div style={{ display: "flex" }}>
+        {/* user icon */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="30"
+          height="30"
+          fill="currentColor"
+          viewBox="0 0 64 64"
+          style={{ margin: "10px", marginLeft: "5px" }}>
+          <circle cx="32" cy="32" r="30" fill="none" stroke="#999" stroke-width="2" />
+          <circle cx="32" cy="20" r="12" fill="#ccc" stroke="#999" stroke-width="2" />
+          <path
+            d="M16 52c0-8.8 7.2-16 16-16s16 7.2 16 16v4H16v-4z"
+            fill="#ccc"
+            stroke="#999"
+            stroke-width="2"
+          />
+        </svg>
 
-      const handleDeleteReply = (index: number) => {
-        const newReplies = replies.filter((_, i) => i !== index);
-        setReplies(newReplies);
-      };
-              // setComment(e.target.value)}
-      return (
-        <div style={{ marginBottom: "10px" }}>
-          <div style={{ fontFamily: "Poppins, sans-serif", display: 'flex', gap: '10px', alignItems: 'center' }}>
-            <div style={{ fontWeight: 'bold', fontSize: "12px" }}>Alex Smith</div>
-            <div style={{
-              fontSize: "10px", 
-              // align bottom of line
-            }}>Today at 12:00 PM</div>
-          </div>
-          <div style={{ display: 'flex' }}>
-            {/* user icon */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="30"
-              height="30"
-              fill="currentColor"
-              viewBox="0 0 64 64"
-              style={{ margin: "10px", marginLeft: "5px" }}
-            >
-              <circle cx="32" cy="32" r="30" fill="none" stroke="#999" stroke-width="2"/>
-              <circle cx="32" cy="20" r="12" fill="#ccc" stroke="#999" stroke-width="2"/>
-              <path d="M16 52c0-8.8 7.2-16 16-16s16 7.2 16 16v4H16v-4z" fill="#ccc" stroke="#999" stroke-width="2"/>
-            </svg>
-          
-          <textarea
-            value={props.value.metadata.comment}
-            onChange={(e) => props.utils.setMetadata({ comment: e.target.value })}
-            placeholder="Enter your comment here..."
-            className="textarea"
-            style={{
-              ...commonTextStyle,
-              width: "calc(100% - 22px)",
-              height: "80px",
-              padding: "4px",
-              border: "none", //"1px solid #ccc",
-              // borderRadius: "4px",
-              backgroundColor: "transparent",
-              lineHeight: "16px",
-              fontSize: "12px",
-            }}
-            />
-          </div>
-          {/* reply button */}
-          <div style={{ display: 'flex', gap: '5px', alignItems: 'center', marginLeft: '40px' }}>
-            ⤷
-            <div style={{ fontSize: '12px' }}>Reply</div>
-          </div>
-          {/* <div style={{ marginTop: "10px" }}>
+        <textarea
+          value={props.value.metadata.comment}
+          onChange={(e) => props.utils.setMetadata({ comment: e.target.value })}
+          placeholder="Enter your comment here..."
+          className="textarea"
+          style={{
+            ...commonTextStyle,
+            width: "calc(100% - 22px)",
+            height: "80px",
+            padding: "4px",
+            border: "none", //"1px solid #ccc",
+            // borderRadius: "4px",
+            backgroundColor: "transparent",
+            lineHeight: "16px",
+            fontSize: "12px",
+          }}
+        />
+      </div>
+      {/* reply button */}
+      <div style={{ display: "flex", gap: "5px", alignItems: "center", marginLeft: "40px" }}>
+        ⤷<div style={{ fontSize: "12px" }}>Reply</div>
+      </div>
+      {/* <div style={{ marginTop: "10px" }}>
             <strong style={{ color: "#525252" }}>Replies:</strong>
             {replies.map((reply, index) => (
               <div
@@ -221,309 +172,71 @@
               Add Reply
             </button>
           </div> */}
-        </div>
-      );
-    };
+    </div>
+  );
+};
 
-    const ImageUpload: React.FC<AnnotationEditorProps> = (props) => {
-      const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files[0]) {
-          const reader = new FileReader();
-          reader.onload = (event) => {
-            if (event.target && event.target.result) {
-              props.utils.setMetadata({ image: event.target.result as string });
-            }
-          };
-          reader.readAsDataURL(e.target.files[0]);
+const ImageUpload: React.FC<AnnotationEditorProps> = (props) => {
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target && event.target.result) {
+          props.utils.setMetadata({ image: event.target.result as string });
         }
       };
+      reader.readAsDataURL(e.target.files[0]);
+    }
+  };
 
-      return (
-        <div>
-          <input type="file" accept="image/*" onChange={handleImageUpload} style={commonTextStyle} />
-          {props.value.metadata.image && <img src={props.value.metadata.image} alt="Uploaded" />}
+  return (
+    <div>
+      <input type="file" accept="image/*" onChange={handleImageUpload} style={commonTextStyle} />
+      {props.value.metadata.image && (
+        <div
+          style={{
+            width: "320px",
+            height: "220px",
+            resize: "both",
+            overflow: "auto",
+            border: "1px solid #ccc",
+            marginTop: "8px",
+          }}>
+          <img
+            src={props.value.metadata.image}
+            alt="Uploaded"
+            style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }}
+          />
         </div>
-      );
-    };
-
-    const DisplayHTML: React.FC<AnnotationEditorProps> = (props) => {
-      const [htmlContent, setHtmlContent] = useState(props.value.metadata.html || 
-        //get text
-        props.utils.getText() || ""
-      );
-
-      const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-        const newHtmlContent = e.target.value;
-        setHtmlContent(newHtmlContent);
-        props.utils.setMetadata({ html: newHtmlContent });
-      };
-
-      return (
-        <div>
-          {/* <textarea
-            value={htmlContent}
-            onChange={handleChange}
-            placeholder="Write your HTML code here"
-            style={{ ...commonTextStyle, width: "100%", height: "150px" }}
-          /> */}
-          <div dangerouslySetInnerHTML={{ __html: htmlContent }} style={{ height: '50px', resize: 'both', overflow: 'auto', border: "1px solid #ccc", }} />
-        </div >
-      );
-    };
-
-    const RunCodeSegment: React.FC<AnnotationEditorProps> = (props) => {
-      const [apiResName, setApiResName] = useState<string>(props.value.metadata.apiResName || "");
-      const [apiRes, setApiRes] = useState<string>(props.value.metadata.apiRes || "");
-      const [code, setCode] = useState<string[]>(props.value.metadata.code || ["", "", ""]);
-      const [pinBody, setPinBody] = useState<boolean>(props.value.metadata.pinBody || false);
-      const [showHead, setShowHead] = useState<boolean>(props.value.metadata.showHead || false);
-      const [showTail, setShowTail] = useState<boolean>(props.value.metadata.showTail || false);
-
-      function addReturn(code: string): string {
-        const lines = code.trim().split("\n");
-        if (lines.length === 0) {
-          return "";
-        }
-        const lastLine = lines[lines.length - 1];
-        lines[lines.length - 1] = `return ${lastLine.trim()}`;
-        return lines.join("\n");
-      }
-
-      async function runAndUpdateCode(): Promise<void> {
-        try {
-          let empty = true;
-          for (let i = 0; i < code.length; i++) {
-            if (String(code[i]).trim() !== "") {
-              empty = false;
-              break;
-            }
-          }
-          if (apiRes !== "" && apiResName === "") {
-            empty = false;
-          }
-          if (empty) {
-            props.utils.setMetadata({
-              error: "No code to run",
-              response: undefined,
-              code: code,
-            });
-            return;
-          }
-
-          let joinedCode = code.join("\n");
-          if (apiRes !== "" && apiResName !== "") {
-            joinedCode = `const ${apiResName} = Promise.resolve(${apiRes});\n${joinedCode}`;
-          }
-
-          const asyncFunction = new Function(`return (async () => { ${joinedCode} })();`);
-          let result = await asyncFunction();
-
-          if (result === undefined) {
-            const newCode = addReturn(joinedCode);
-            try {
-              const asyncReturnFunction = new Function(`return (async () => { ${newCode} })();`);
-              result = await asyncReturnFunction();
-            } catch {}
-          }
-
-          props.utils.setMetadata({
-            response: result || "Undefined",
-            error: undefined,
-            code,
-            apiRes,
-            apiResName,
-          });
-        } catch (e) {
-          props.utils.setMetadata({
-            response: undefined,
-            error: e instanceof Error ? e.message : String(e),
-            code,
-            apiRes,
-            apiResName,
-          });
-        }
-      }
+      )}
+    </div>
+  );
+};
 
-      return (
-        <div style={{ marginBottom: "10px" }}>
-          
-          <div style={{ marginBottom: "10px" }}>
-            <label style={commonTextStyle}>
-              <strong>Cached API Response</strong>
-            </label>
-            <div style={{ marginBottom: "10px" }}>
-              <label style={commonTextStyle}>Mock Response:</label>
-              <br></br>
-              <textarea
-                rows={4}
-                value={apiRes}
-                placeholder="Enter a JavaScript object..."
-                onChange={(e) => setApiRes(e.target.value)}
-                style={{
-                  ...commonTextStyle,
-                  width: "-webkit-fill-available",
-                  padding: "5px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                }}
-              />
-            </div>
-            <div style={{ marginBottom: "10px" }}>
-              <label style={commonTextStyle}>Mock Response Variable Name:</label>
-              <br />
-              <input
-                value={apiResName}
-                placeholder="Enter a variable name..."
-                onChange={(e) => setApiResName(e.target.value)}
-                style={{
-                  ...commonTextStyle,
-                  marginBottom: "10px",
-                  width: "-webkit-fill-available",
-                  padding: "5px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                }}
-              />
-            </div>
-            <div style={{ marginBottom: "10px" }}>
-              <label style={commonTextStyle}>Head:</label>
-              <br></br>
-              <textarea
-                rows={4}
-                value={code[0]}
-                placeholder="Enter other JS preprocessing code..."
-                onChange={(e) => {
-                  const newCode = [...code];
-                  newCode[0] = e.target.value;
-                  setCode(newCode);
-                }}
-                style={{
-                  ...commonTextStyle,
-                  width: "-webkit-fill-available",
-                  marginBottom: "10px",
-                  padding: "5px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                }}
-              />
-            </div>
-            <div style={{ marginBottom: "10px" }}>
-              <label style={commonTextStyle}>Body:</label>
-              <br></br>
-              <textarea
-                rows={4}
-                placeholder="Enter a JavaScript expression..."
-                value={pinBody ? props.utils.getText() : code[1]}
-                onChange={(e) => {
-                  if (!pinBody) {
-                    const newCode = [...code];
-                    newCode[1] = e.target.value;
-                    setCode(newCode);
-                  }
-                }}
-                style={{
-                  ...commonTextStyle,
-                  width: "-webkit-fill-available",
-                  padding: "5px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                }}
-              />
-              <div>
-                <label style={commonTextStyle}>
-                  <input
-                    type="checkbox"
-                    checked={pinBody}
-                    onChange={() => {
-                      setPinBody(!pinBody);
-                      props.utils.setMetadata({ pinBody: !pinBody });
-                    }}
-                  />
-                  Pin body to annotated document text
-                </label>
-              </div>
-            </div>
-            <div style={{ marginBottom: "10px" }}>
-              <label style={commonTextStyle}>Tail:</label>
-              <br></br>
-              <textarea
-                rows={4}
-                placeholder="Enter other JS postprocessing code..."
-                value={code[2]}
-                onChange={(e) => {
-                  const newCode = [...code];
-                  newCode[2] = e.target.value;
-                  setCode(newCode);
-                }}
-                style={{
-                  ...commonTextStyle,
-                  width: "-webkit-fill-available",
-                  marginBottom: "10px",
-                  padding: "5px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                }}
-              />
-            </div>
-          </div>
-          {props.value.metadata.error && (
-            <div style={{ color: "red", marginBottom: "10px", ...commonTextStyle }}>
-              An error occurred: {props.value.metadata.error}
-            </div>
-          )}
-          {props.value.metadata.response && (
-            <div style={{ marginBottom: "10px", ...commonTextStyle }}>
-              <strong>Response:</strong> <ObjectInspector data={props.value.metadata.response} />
-            </div>
-          )}
-          <div style={{ marginBottom: "10px" }}>
-            <button
-              onClick={runAndUpdateCode}
-              style={{
-                marginRight: "10px",
-                ...commonTextStyle,
-                padding: "5px 10px",
-                border: "1px solid #ccc",
-                borderRadius: "4px",
-                cursor: "pointer",
-              }}>
-              Run Code
-            </button>
-            { props.value.metadata.response
-            && <button
-                onClick={() =>
-                  props.utils.setMetadata({
-                    response: undefined,
-                    error: undefined,
-                  })
-                }
-                style={{
-                  ...commonTextStyle,
-                  padding: "5px 10px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                }}>
-                Clear Output
-              </button>
-            }
-          </div>
-        </div>
-      );
-    };
+const DisplayHTML: React.FC<AnnotationEditorProps> = (props) => {
+  return (
+    <div>
+      <div
+        dangerouslySetInnerHTML={{ __html: props.utils.getText() }}
+        style={{ height: "50px", resize: "both", overflow: "auto", border: "1px solid #ccc" }}
+      />
+    </div>
+  );
+};
 
-    const Odyssey: React.FC<AnnotationEditorProps> = (props) => {
-      const [expression, setExpression] = useState(props.value.metadata.expression || "loading...");
-      const [retryParse, setRetryParse] = useState(false);
+const Odyssey: React.FC<AnnotationEditorProps> = (props) => {
+  const [expression, setExpression] = useState(props.value.metadata.expression || "loading...");
+  const [retryParse, setRetryParse] = useState(false);
+  const [sessionLink, setSessionLink] = useState(props.value.metadata.odysseySessionLink || "");
 
-      useEffect(() => {
-        // Only make API call if expression is "loading..." or retry was clicked
-        if (expression === "loading..." || retryParse) {
-          const parseText = async (text: string) => {
-            const prompt: ChatMessage[] = [
-              {
-                role: "system",
-                content: `Can you parse this piece of text or code to find an expression 
+  useEffect(() => {
+    // Only make API call if expression is "loading..." or retry was clicked
+    if (expression === "loading..." || retryParse) {
+      const parseText = async (text: string) => {
+        const prompt: ChatMessage[] = [
+          {
+            role: "system",
+            content: `Can you parse this piece of text or code to find an expression 
                   and convert it to mathjs parsable syntax? All math.h operators are allowed. 
                   If a term of the expression can be written with simple mathematical operators,
                   use those instead of 'function' like operators, for example, use 'x^y' instead of
@@ -534,1959 +247,129 @@
                   
                   The text to parse is as follows:
                   ${text}
-                `
-              }
-            ]
-            const parsed = await lmApi.chat(prompt, {
-              vendor: 'copilot',
-              family: 'gpt-4o',
-              temperature: 0.3
-            })
-        
-            const newExpression = parsed;
-            setExpression(newExpression);
-            // Store in metadata for persistence
-            props.utils.setMetadata({ expression: newExpression });
-            setRetryParse(false);
-          }
-
-          parseText(props.utils.getText());
-        }
-      }, [props.utils, retryParse]);
+                `,
+          },
+        ];
+        const parsed = await lmApi.chat(prompt, {
+          vendor: "copilot",
+          family: "gpt-4o",
+          temperature: 0.3,
+        });
 
-      // Update metadata when user manually edits the expression
-      const handleExpressionChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-        const newExpression = evt.target.value;
+        const newExpression = parsed;
         setExpression(newExpression);
         props.utils.setMetadata({ expression: newExpression });
+        setRetryParse(false);
       };
 
-      const odysseyBase = "https://herbie-fp.github.io/odyssey/?spec="
-      const url = odysseyBase + encodeURIComponent(expression);
-
-      return (
-        <div className="odyssey">
-          <p>Parsed the following expression from highlighted text:</p>
-          <input type="text" className="odyssey-text"
-            onChange={handleExpressionChange} value={expression}/>
-          <button onClick={() => setRetryParse(true)}>Retry</button>
-          <p>
-            Explore floating-point error in this expression with
-            <button className="open-external" onClick={() => vscode.postMessage({command: "open-external", url})}>
-              Odyssey 
-              <svg className="open-external-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg>
-            </button>
-          </p>
-        </div>
-      );
-    };
-
-    /* TODO: Define additional tools as React components here. */
-    const ExplainInEnglish: React.FC<AnnotationEditorProps> = (props) => {
-      // State management for explanations
-      const [explanations, setExplanations] = useState({
-        what: props.value.metadata.whatExplanation || '',
-        how: props.value.metadata.howExplanation || '',
-        context: props.value.metadata.contextExplanation || '',
-        why: props.value.metadata.whyExplanation || ''
-      });
-      
-      const [presentationSummary, setPresentationSummary] = useState(
-        props.value.metadata.presentationSummary || ''
-      );
-      
-      const [explanationMode, setExplanationMode] = useState<'presentation' | 'in-depth'>(
-        props.value.metadata.explanationMode || 'presentation'
-      );
-      
-      const [isLoading, setIsLoading] = useState(false);
-      const [error, setError] = useState<string | null>(null);
-      const [executionResult, setExecutionResult] = useState<string | null>(
-        props.value.metadata.executionResult || null
-      );
-      const [executionError, setExecutionError] = useState<string | null>(
-        props.value.metadata.executionError || null
-      );
-      const [useMock, setUseMock] = useState(false);
-      const [isExecuting, setIsExecuting] = useState(false);
-      
-      // Track if component is mounted
-      const isMounted = useRef(true);
-
-      useEffect(() => {
-        return () => {
-          isMounted.current = false;
-        };
-      }, []);
-
-      // Get the highlighted code and document context
-      const highlightedCode = props.utils.getText();
-      const hasHighlightedCode = highlightedCode.trim().length > 0;
-      const documentText = props.value.document || '';
-      const startPos = props.value.start;
-      const endPos = props.value.end;
-
-      // Save state changes to metadata
-      useEffect(() => {
-        props.utils.setMetadata({ 
-          whatExplanation: explanations.what,
-          howExplanation: explanations.how,
-          contextExplanation: explanations.context,
-          whyExplanation: explanations.why,
-          presentationSummary,
-          explanationMode,
-          executionResult,
-          executionError
-        });
-      }, [explanations, presentationSummary, explanationMode, executionResult, executionError]);
-
-      // Create formatted document with highlighted section
-      const createFormattedDocument = () => {
-        if (!documentText) {
-          return '';
-        }
-        
-        const before = documentText.substring(0, startPos);
-        const highlighted = documentText.substring(startPos, endPos);
-        const after = documentText.substring(endPos);
-        
-        return `${before}<<<HIGHLIGHTED>${highlighted}</HIGHLIGHTED>>>${after}`;
-      };
-
-      // Generate English explanation
-      const generateExplanation = async () => {
-        if (!highlightedCode.trim()) {
-          setError('No code selected to explain');
-          return;
-        }
-
-        setIsLoading(true);
-        setError(null);
-
-        try {
-          const formattedDocument = createFormattedDocument();
-          
-          const basePrompt = `You are a helpful assistant that explains JavaScript code in simple, clear English. 
-
-    You will be given a document with a highlighted section marked by <<<HIGHLIGHTED>...</HIGHLIGHTED>>> tags.
-
-    Please provide explanations for the highlighted code in four specific categories:
-
-    1. WHAT: What does this code do? (describe the main functionality and purpose)
-    2. HOW: How does this code work? (explain the technical implementation and logic flow)
-    3. CONTEXT: What is this code's function in the context of the entire class/component it belongs to? (explain its role in the larger system)
-    4. WHY: Why is this code needed? (explain the problem it solves and its importance)
-
-    Use clear, non-technical language that a beginner could understand. Focus on being concise but comprehensive.`;
-
-          if (explanationMode === 'presentation') {
-            const presentationPrompt: ChatMessage[] = [
-              { 
-                role: "system", 
-                content: `${basePrompt}
-
-    Format your response as a single cohesive explanation with bullet points for each category:
-
-    **What the code does:**
-    • [2-3 concise bullet points]
-
-    **How the code works:**
-    • [2-3 concise bullet points]
-
-    **Context within the class/component:**
-    • [2-3 concise bullet points]
-
-    **Why it's needed:**
-    • [2-3 concise bullet points]
-
-    Keep each bullet point to 1-2 sentences maximum. This should be easy to read without scrolling.`
-              },
-              { 
-                role: "user", 
-                content: `Here is the code with the highlighted section:\n\n${formattedDocument || highlightedCode}\n\n` +
-                        `Please explain the highlighted code in presentation format.`
-              }
-            ];
-
-            let response: string;
-            if (useMock) {
-              await new Promise(resolve => setTimeout(resolve, 1000));
-              response = `**What the code does:**
-    • Sets up state variables for managing user interface interactions
-    • Handles data processing and validation logic
-    • Manages component lifecycle and cleanup operations
-
-    **How the code works:**
-    • Uses React hooks to track component state changes
-    • Implements async functions for API communication
-    • Applies error handling with try-catch blocks
-
-    **Context within the class/component:**
-    • Serves as the core data processing logic for the component
-    • Integrates with other component methods for state management
-    • Provides essential functionality for user interactions
-
-    **Why it's needed:**
-    • Ensures proper data flow and state consistency
-    • Prevents memory leaks and handles edge cases
-    • Enables responsive user experience and error recovery`;
-            } else {
-              try {
-                response = await lmApi.chat(presentationPrompt, {
-                  vendor: 'copilot',
-                  family: 'gpt-4o',
-                  temperature: 0.7
-                });
-                console.log('SENDING RESPONSE:', JSON.stringify(response));
-                console.log('RESPONSE LENGTH:', response.length);
-              } catch (apiError) {
-                console.log('API call failed, falling back to mock:', apiError);
-                response = `**What the code does:**
-    • Sets up state variables for managing user interface interactions
-    • Handles data processing and validation logic
-    • Manages component lifecycle and cleanup operations
-
-    **How the code works:**
-    • Uses React hooks to track component state changes
-    • Implements async functions for API communication
-    • Applies error handling with try-catch blocks
-
-    **Context within the class/component:**
-    • Serves as the core data processing logic for the component
-    • Integrates with other component methods for state management
-    • Provides essential functionality for user interactions
-
-    **Why it's needed:**
-    • Ensures proper data flow and state consistency
-    • Prevents memory leaks and handles edge cases
-    • Enables responsive user experience and error recovery`;
-              }
-            }
-
-            if (isMounted.current) {
-              setPresentationSummary(response);
-            }
-          } else {
-            // In-depth mode - get detailed explanations for each category
-            const inDepthPrompt: ChatMessage[] = [
-              { 
-                role: "system", 
-                content: `${basePrompt}
-
-    You MUST respond with ONLY a valid JSON object. No additional text, explanations, or formatting outside the JSON.
-
-    The JSON should have exactly this structure:
-    {
-      "what": "Detailed explanation of what the code does (3-5 sentences)...",
-      "how": "Detailed explanation of how it works technically (3-5 sentences)...",
-      "context": "Detailed explanation of its role in the larger system (3-5 sentences)...",
-      "why": "Detailed explanation of why it's necessary (3-5 sentences)..."
+      parseText(props.utils.getText());
     }
+  }, [props.utils, retryParse]);
 
-    Each value should be a single string with 3-5 sentences. Do not include any markdown, formatting, or line breaks within the strings.`
-              },
-              { 
-                role: "user", 
-                content: `Here is the code with the highlighted section:\n\n${formattedDocument || highlightedCode}\n\n` +
-                        `Please provide detailed explanations for each category in JSON format.`
-              }
-            ];
-
-            let response: string;
-            if (useMock) {
-              await new Promise(resolve => setTimeout(resolve, 1000));
-              response = JSON.stringify({
-                what: "This code defines state management and UI interaction logic for a React component. It establishes multiple state variables using the useState hook to track different aspects of the component's behavior, including user inputs, loading states, error conditions, and execution results. The code also sets up effect hooks to handle component lifecycle events and data persistence.\n\nThe primary function is to create a controlled interface that responds to user actions while maintaining data integrity. It manages both the visual presentation of information and the underlying data processing that supports the component's functionality.\n\nAdditionally, this code implements proper cleanup mechanisms to prevent memory leaks and ensures that asynchronous operations are handled correctly even when the component unmounts during execution.",
-                how: "The implementation uses React's built-in hooks pattern to manage state and side effects. The useState hooks create reactive state variables that automatically trigger re-renders when their values change. Each state variable serves a specific purpose and is updated through setter functions that maintain immutability principles.\n\nThe useEffect hooks create a dependency tracking system that automatically runs cleanup or update logic when specific values change. This creates a reactive programming model where changes in one part of the system automatically propagate to other dependent parts.\n\nThe code also implements proper error boundary patterns using try-catch blocks and loading states, ensuring that the user interface remains responsive and informative even when operations fail or take time to complete.",
-                context: "Within the larger component architecture, this code serves as the foundational state management layer that all other component methods depend on. It acts as the single source of truth for the component's current status and provides the reactive infrastructure that other functions can interact with.\n\nThis state management setup enables other parts of the component to perform operations like API calls, user input handling, and data validation while maintaining consistent state across the entire component lifecycle. It integrates with the component's rendering logic to ensure that UI changes reflect the current application state.\n\nThe code also establishes the communication patterns between this component and its parent components or global state management systems, ensuring that data flows correctly throughout the application hierarchy.",
-                why: "This state management structure is essential for creating a reliable and user-friendly interface. Without proper state tracking, the component would not be able to provide visual feedback to users about loading states, errors, or successful operations, leading to a poor user experience.\n\nThe structured approach to state management prevents common React pitfalls like state inconsistencies, memory leaks from unmounted components, and race conditions from asynchronous operations. This defensive programming approach ensures the component remains stable even under adverse conditions.\n\nFurthermore, this pattern establishes a maintainable codebase where future developers can easily understand and modify the component's behavior. The clear separation of concerns and consistent naming conventions make the code self-documenting and reduce the likelihood of bugs during maintenance or feature additions."
-              });
-            } else {
-              try {
-                response = await lmApi.chat(inDepthPrompt, {
-                  vendor: 'copilot',
-                  family: 'gpt-4o',
-                  temperature: 0.7
-                });
-                console.log('SENDING RESPONSE:', JSON.stringify(response));
-                console.log('RESPONSE LENGTH:', response.length);
-              } catch (apiError) {
-                console.log('API call failed, falling back to mock:', apiError);
-                response = JSON.stringify({
-                  what: "This code defines state management and UI interaction logic for a React component. It establishes multiple state variables using the useState hook to track different aspects of the component's behavior, including user inputs, loading states, error conditions, and execution results. The code also sets up effect hooks to handle component lifecycle events and data persistence.",
-                  how: "The implementation uses React's built-in hooks pattern to manage state and side effects. The useState hooks create reactive state variables that automatically trigger re-renders when their values change. Each state variable serves a specific purpose and is updated through setter functions that maintain immutability principles.",
-                  context: "Within the larger component architecture, this code serves as the foundational state management layer that all other component methods depend on. It acts as the single source of truth for the component's current status and provides the reactive infrastructure that other functions can interact with.",
-                  why: "This state management structure is essential for creating a reliable and user-friendly interface. Without proper state tracking, the component would not be able to provide visual feedback to users about loading states, errors, or successful operations, leading to a poor user experience."
-                });
-              }
-            }
-
-            try {
-              // Try to parse as JSON first
-              const parsedResponse = JSON.parse(response);
-              if (isMounted.current) {
-                setExplanations({
-                  what: parsedResponse.what || '',
-                  how: parsedResponse.how || '',
-                  context: parsedResponse.context || '',
-                  why: parsedResponse.why || ''
-                });
-              }
-            } catch (parseError) {
-              // If JSON parsing fails, try to extract content between JSON markers or use fallback
-              console.log('JSON parsing failed, attempting to extract or use fallback:', parseError);
-              
-              try {
-                // Try to find JSON content within the response
-                const jsonMatch = response.match(/\{[\s\S]*\}/);
-                if (jsonMatch) {
-                  const parsedResponse = JSON.parse(jsonMatch[0]);
-                  if (isMounted.current) {
-                    setExplanations({
-                      what: parsedResponse.what || '',
-                      how: parsedResponse.how || '',
-                      context: parsedResponse.context || '',
-                      why: parsedResponse.why || ''
-                    });
-                  }
-                } else {
-                  // Fallback: treat the response as a single explanation and distribute it
-                  const fallbackText = response.trim();
-                  const sections = fallbackText.split(/(?:\n\s*){2,}/); // Split on double line breaks
-                  
-                  if (isMounted.current) {
-                    setExplanations({
-                      what: sections[0] || fallbackText,
-                      how: sections[1] || 'Technical implementation details for the highlighted code.',
-                      context: sections[2] || 'This code functions as part of the larger component/class structure.',
-                      why: sections[3] || 'This code is necessary to ensure proper functionality and user experience.'
-                    });
-                  }
-                }
-              } catch (secondParseError) {
-                console.log('All parsing attempts failed, using basic fallback');
-                if (isMounted.current) {
-                  setExplanations({
-                    what: response || 'Unable to generate explanation',
-                    how: 'Technical implementation could not be parsed from the response.',
-                    context: 'Context information could not be extracted.',
-                    why: 'Reasoning could not be determined from the response.'
-                  });
-                }
-              }
-            }
-          }
-        } catch (err) {
-          const errorMsg = err instanceof Error ? err.message : 'An error occurred while generating explanation';
-          
-          if (isMounted.current) {
-            setError(errorMsg);
-          }
-        } finally {
-          if (isMounted.current) {
-            setIsLoading(false);
-          }
-        }
-      };
-
-      // Execute the highlighted code (keeping original logic)
-      const executeCode = async () => {
-        setIsExecuting(true);
-        setExecutionError(null);
-        setExecutionResult(null);
-
-        try {
-          const code = highlightedCode.trim();
-          let result;
-          
-          try {
-            const asyncFunction = new Function(`
-              'use strict';
-              return (async () => {
-                ${code}
-              })();
-            `);
-            result = await asyncFunction();
-          } catch (firstError) {
-            const lines = code.split('\n');
-            if (lines.length > 0) {
-              const lastLine = lines[lines.length - 1].trim();
-              if (!lastLine.startsWith('return') && !lastLine.startsWith('throw')) {
-                lines[lines.length - 1] = `return ${lastLine}`;
-                const modifiedCode = lines.join('\n');
-                
-                try {
-                  const asyncFunction = new Function(`
-                    'use strict';
-                    return (async () => {
-                      ${modifiedCode}
-                    })();
-                  `);
-                  result = await asyncFunction();
-                } catch (secondError) {
-                  throw firstError;
-                }
-              } else {
-                throw firstError;
-              }
-            } else {
-              throw firstError;
-            }
-          }
-
-          if (result === undefined) {
-            setExecutionResult('undefined');
-          } else if (result === null) {
-            setExecutionResult('null');
-          } else if (typeof result === 'object') {
-            setExecutionResult(JSON.stringify(result, null, 2));
-          } else {
-            setExecutionResult(String(result));
-          }
-        } catch (err) {
-          setExecutionError(err instanceof Error ? err.message : String(err));
-        } finally {
-          setIsExecuting(false);
-        }
-      };
-
-      return (
-        <div style={{ 
-          padding: "12px", 
-          fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, sans-serif",
-          fontSize: "14px",
-          maxWidth: "100%"
-        }}>
-          <div style={{ marginBottom: "16px" }}>
-            <h3 style={{ 
-              margin: "0 0 12px 0", 
-              fontSize: "16px", 
-              fontWeight: "600",
-              color: "#333"
-            }}>
-              Code Explanation in Plain English
-            </h3>
-            
-            <div style={{ 
-              display: "flex", 
-              gap: "10px", 
-              alignItems: "center",
-              marginBottom: "12px",
-              flexWrap: "wrap"
-            }}>
-              <button
-                onClick={generateExplanation}
-                disabled={isLoading || !hasHighlightedCode}
-                style={{
-                  padding: "8px 16px",
-                  backgroundColor: (isLoading || !hasHighlightedCode) ? "#e0e0e0" : "#0078D4",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
-                  cursor: (isLoading || !hasHighlightedCode) ? "not-allowed" : "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  transition: "background-color 0.2s"
-                }}
-              >
-                {isLoading ? "Generating..." : "Generate Explanation"}
-              </button>
-              {!hasHighlightedCode && (
-                <span style={{ fontSize: "12px", color: "#8a6d3b" }}>
-                  Select text in the editor to enable explanation.
-                </span>
-              )}
-              
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <label style={{ fontSize: "13px", color: "#666", fontWeight: "500" }}>
-                  Mode:
-                </label>
-                <select
-                  value={explanationMode}
-                  onChange={(e) => setExplanationMode(e.target.value as 'presentation' | 'in-depth')}
-                  style={{
-                    padding: "6px 10px",
-                    borderRadius: "4px",
-                    border: "1px solid #ccc",
-                    fontSize: "13px",
-                    backgroundColor: "white"
-                  }}
-                >
-                  <option value="presentation">Presentation (Summary)</option>
-                  <option value="in-depth">In-Depth (Detailed)</option>
-                </select>
-              </div>
-              
-              <label style={{ 
-                display: "flex", 
-                alignItems: "center", 
-                fontSize: "13px",
-                cursor: "pointer",
-                color: "#666"
-              }}>
-                <input 
-                  type="checkbox"
-                  checked={useMock}
-                  onChange={() => setUseMock(!useMock)}
-                  style={{ marginRight: "6px" }}
-                />
-                Use mock API
-              </label>
-            </div>
-
-            {error && (
-              <div style={{ 
-                color: "#D83B01", 
-                backgroundColor: "#FFF4F2", 
-                padding: "10px", 
-                borderRadius: "4px",
-                marginBottom: "12px",
-                fontSize: "13px",
-                border: "1px solid #FDBCB4"
-              }}>
-                ⚠️ {error}
-              </div>
-            )}
-
-            {explanationMode === 'presentation' ? (
-              <div style={{ marginBottom: "16px" }}>
-                <label style={{ 
-                  display: "block", 
-                  marginBottom: "8px", 
-                  fontWeight: "600",
-                  fontSize: "14px",
-                  color: "#444"
-                }}>
-                  Code Explanation Summary:
-                </label>
-                <textarea
-                  value={presentationSummary}
-                  onChange={(e) => setPresentationSummary(e.target.value)}
-                  placeholder="Click 'Generate Explanation' to get a concise summary with bullet points for What, How, Context, and Why..."
-                  style={{
-                    width: "100%",
-                    minHeight: "200px",
-                    padding: "12px",
-                    borderRadius: "4px",
-                    border: "1px solid #ccc",
-                    fontSize: "14px",
-                    lineHeight: "1.6",
-                    resize: "vertical",
-                    fontFamily: "inherit",
-                    backgroundColor: "#FAFAFA"
-                  }}
-                />
-              </div>
-            ) : (
-              <div style={{ marginBottom: "16px" }}>
-                {[
-                  { key: 'what', title: 'What does this code do?', color: '#E3F2FD' },
-                  { key: 'how', title: 'How does this code work?', color: '#F3E5F5' },
-                  { key: 'context', title: 'Context within the class/component', color: '#E8F5E8' },
-                  { key: 'why', title: 'Why is this code needed?', color: '#FFF3E0' }
-                ].map(({ key, title, color }) => (
-                  <div key={key} style={{ marginBottom: "16px" }}>
-                    <label style={{ 
-                      display: "block", 
-                      marginBottom: "8px", 
-                      fontWeight: "600",
-                      fontSize: "14px",
-                      color: "#444"
-                    }}>
-                      {title}
-                    </label>
-                    <textarea
-                      value={explanations[key as keyof typeof explanations]}
-                      onChange={(e) => setExplanations(prev => ({ ...prev, [key]: e.target.value }))}
-                      placeholder={`Detailed explanation of ${key}...`}
-                      style={{
-                        width: "100%",
-                        minHeight: "120px",
-                        padding: "12px",
-                        borderRadius: "4px",
-                        border: "1px solid #ccc",
-                        fontSize: "14px",
-                        lineHeight: "1.6",
-                        resize: "vertical",
-                        fontFamily: "inherit",
-                        backgroundColor: color
-                      }}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-
-            <div style={{ 
-              borderTop: "1px solid #E1E1E1",
-              paddingTop: "16px",
-              marginTop: "16px"
-            }}>
-              <h4 style={{ 
-                margin: "0 0 12px 0", 
-                fontSize: "15px", 
-                fontWeight: "600",
-                color: "#333"
-              }}>
-                Code Execution
-              </h4>
-              
-              <button
-                onClick={executeCode}
-                disabled={isExecuting || !highlightedCode.trim()}
-                style={{
-                  padding: "8px 16px",
-                  backgroundColor: isExecuting ? "#e0e0e0" : "#107C10",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
-                  cursor: (isExecuting || !highlightedCode.trim()) ? "not-allowed" : "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  marginBottom: "12px",
-                  transition: "background-color 0.2s"
-                }}
-              >
-                {isExecuting ? "Executing..." : "▶ Execute Code"}
-              </button>
-
-              {executionResult !== null && (
-                <div style={{ 
-                  backgroundColor: "#F0FFF4",
-                  border: "1px solid #B7EB8F",
-                  borderRadius: "4px",
-                  padding: "12px",
-                  marginTop: "12px"
-                }}>
-                  <div style={{ 
-                    fontWeight: "600", 
-                    marginBottom: "8px",
-                    color: "#52C41A",
-                    fontSize: "13px"
-                  }}>
-                    ✓ Execution Result:
-                  </div>
-                  <pre style={{ 
-                    margin: 0,
-                    fontFamily: "Consolas, Monaco, 'Courier New', monospace",
-                    fontSize: "13px",
-                    whiteSpace: "pre-wrap",
-                    wordBreak: "break-word",
-                    color: "#333",
-                    backgroundColor: "white",
-                    padding: "8px",
-                    borderRadius: "3px"
-                  }}>
-                    {executionResult}
-                  </pre>
-                </div>
-              )}
-
-              {executionError && (
-                <div style={{ 
-                  backgroundColor: "#FFF2F0",
-                  border: "1px solid #FFCCC7",
-                  borderRadius: "4px",
-                  padding: "12px",
-                  marginTop: "12px"
-                }}>
-                  <div style={{ 
-                    fontWeight: "600", 
-                    marginBottom: "8px",
-                    color: "#FF4D4F",
-                    fontSize: "13px"
-                  }}>
-                    ✗ Execution Error:
-                  </div>
-                  <pre style={{ 
-                    margin: 0,
-                    fontFamily: "Consolas, Monaco, 'Courier New', monospace",
-                    fontSize: "13px",
-                    whiteSpace: "pre-wrap",
-                    wordBreak: "break-word",
-                    color: "#8B0000",
-                    backgroundColor: "white",
-                    padding: "8px",
-                    borderRadius: "3px"
-                  }}>
-                    {executionError}
-                  </pre>
-                </div>
-              )}
-            </div>
-
-            <div style={{
-              marginTop: "16px",
-              padding: "10px",
-              backgroundColor: "#F5F5F5",
-              borderRadius: "4px",
-              fontSize: "12px",
-              color: "#666"
-            }}>
-              <strong>Highlighted Code:</strong>
-              <pre style={{
-                margin: "8px 0 0 0",
-                padding: "8px",
-                backgroundColor: "white",
-                borderRadius: "3px",
-                fontSize: "12px",
-                overflow: "auto",
-                border: "1px solid #E0E0E0"
-              }}>
-                {highlightedCode || "(No code selected)"}
-              </pre>
-            </div>
-          </div>
-        </div>
-      );
-    };
-
-    const OutputVisualizer: React.FC<AnnotationEditorProps> = (props) => {
-      const [predictedOutput, setPredictedOutput] = useState(
-        props.value.metadata.predictedOutput || ''
-      );
-      const [variableChanges, setVariableChanges] = useState(
-        props.value.metadata.variableChanges || []
-      );
-      const [llmExplanation, setLlmExplanation] = useState(
-        props.value.metadata.llmExplanation || ''
-      );
-      const [confidence, setConfidence] = useState(
-        props.value.metadata.confidence || 'medium'
-      );
-      const [isAnalyzing, setIsAnalyzing] = useState(false);
-      const [testInputs, setTestInputs] = useState(
-        props.value.metadata.testInputs || ''
-      );
-      const [actualOutput, setActualOutput] = useState(
-        props.value.metadata.actualOutput || null
-      );
-      const [executionError, setExecutionError] = useState(
-        props.value.metadata.executionError || null
-      );
-
-      // Get the highlighted code and document context
-      const highlightedCode = props.utils.getText();
-      const documentText = props.value.document || '';
-
-      // Save state to metadata
-      useEffect(() => {
-        props.utils.setMetadata({
-          predictedOutput,
-          variableChanges,
-          llmExplanation,
-          confidence,
-          testInputs,
-          actualOutput,
-          executionError
-        });
-      }, [predictedOutput, variableChanges, llmExplanation, confidence, testInputs, actualOutput, executionError]);
-
-      // Analyze code and predict output
-      const analyzeCode = async () => {
-        setIsAnalyzing(true);
-        
-        // Simulate analysis (in real implementation, this would call an LLM API)
-        setTimeout(() => {
-          const code = highlightedCode.trim();
-          
-          // Check if it's the quickSort function
-          if (code.includes('quickSort') && code.includes('partition')) {
-            setPredictedOutput('A sorted version of the input array \'arr\'');
-            setVariableChanges([
-              {
-                variable: 'arr',
-                before: 'The input array passed to quickSort',
-                after: 'The sorted version of the input array'
-              }
-            ]);
-            setLlmExplanation('The highlighted \'quickSort\' function sorts the input array \'arr\' in-place using the partitioning logic defined in the \'partition\' function. The \'arr\' variable is modified directly during the sorting process.');
-            setConfidence('high');
-          }
-          // Check if it's the partition function
-          else if (code.includes('partition') && code.includes('pivot')) {
-            setPredictedOutput('The index position where the pivot element is placed after partitioning');
-            setVariableChanges([
-              {
-                variable: 'arr',
-                before: 'The array segment between low and high indices',
-                after: 'Rearranged with elements less than pivot on left, greater on right'
-              },
-              {
-                variable: 'i',
-                before: 'Initialized to low - 1',
-                after: 'Final position before the pivot'
-              }
-            ]);
-            setLlmExplanation('The \'partition\' function rearranges the array segment between \'low\' and \'high\' indices, using the last element as a pivot. It returns the final position of the pivot after partitioning.');
-            setConfidence('high');
-          }
-          // Generic function detection
-          else if (code.includes('function') || code.includes('=>')) {
-            setPredictedOutput('Function output depends on input parameters');
-            setVariableChanges([]);
-            setLlmExplanation('This appears to be a function definition. The actual output will depend on the input parameters provided when the function is called.');
-            setConfidence('low');
-          }
-          // Default case
-          else {
-            setPredictedOutput('Code execution result');
-            setVariableChanges([]);
-            setLlmExplanation('The highlighted code performs operations. Specific output depends on the context and any variables it uses.');
-            setConfidence('low');
-          }
-          
-          setIsAnalyzing(false);
-        }, 1000);
-      };
-
-      // Execute code with test inputs
-      const executeCode = async () => {
-        if (!testInputs.trim()) {
-          setExecutionError('Please provide test inputs to execute the function');
-          return;
-        }
-
-        try {
-          const code = highlightedCode.trim();
-          let executionCode = code;
-          
-          // Detect if it's a function and create test call
-          const functionMatch = code.match(/function\s+(\w+)/);
-          if (functionMatch) {
-            executionCode = `${code}\n\n${functionMatch[1]}(${testInputs})`;
-          }
-
-          const asyncFunction = new Function(`
-            'use strict';
-            return (async () => {
-              ${executionCode}
-            })();
-          `);
-          
-          const result = await asyncFunction();
-          
-          if (result === undefined) {
-            setActualOutput('undefined (no return value)');
-          } else if (result === null) {
-            setActualOutput('null');
-          } else if (typeof result === 'object') {
-            setActualOutput(JSON.stringify(result, null, 2));
-          } else {
-            setActualOutput(String(result));
-          }
-          setExecutionError(null);
-        } catch (err) {
-          setExecutionError(err instanceof Error ? err.message : String(err));
-          setActualOutput(null);
-        }
-      };
-
-      const getConfidenceColor = () => {
-        switch(confidence) {
-          case 'high': return '#22c55e';
-          case 'medium': return '#f59e0b';
-          case 'low': return '#ef4444';
-          default: return '#6b7280';
-        }
-      };
-
-      return (
-        <div style={{
-          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-          fontSize: "14px",
-          lineHeight: "1.6",
-          color: "#1f2937"
-        }}>
-          {/* Predicted Output Section */}
-          <div style={{
-            backgroundColor: "#f9fafb",
-            padding: "16px",
-            borderRadius: "8px",
-            marginBottom: "16px"
-          }}>
-            <div style={{
-              fontWeight: "600",
-              marginBottom: "8px",
-              fontSize: "15px"
-            }}>
-              Predicted return / output:
-            </div>
-            <div style={{
-              backgroundColor: "white",
-              padding: "12px",
-              borderRadius: "6px",
-              border: "1px solid #e5e7eb"
-            }}>
-              {predictedOutput || 
-                <span style={{ color: "#9ca3af", fontStyle: "italic" }}>
-                  Click "Analyze Code" to predict output
-                </span>
-              }
-            </div>
-          </div>
-
-          {/* Variable Changes Section */}
-          <div style={{
-            backgroundColor: "#f9fafb",
-            padding: "16px",
-            borderRadius: "8px",
-            marginBottom: "16px"
-          }}>
-            <div style={{
-              fontWeight: "600",
-              marginBottom: "12px",
-              fontSize: "15px"
-            }}>
-              Predicted variable changes:
-            </div>
-            {variableChanges.length > 0 ? (
-              <table style={{
-                width: "100%",
-                backgroundColor: "white",
-                borderRadius: "6px",
-                overflow: "hidden",
-                border: "1px solid #e5e7eb"
-              }}>
-                <thead>
-                  <tr style={{ backgroundColor: "#f3f4f6" }}>
-                    <th style={{
-                      padding: "10px",
-                      textAlign: "left",
-                      fontWeight: "600",
-                      borderBottom: "1px solid #e5e7eb",
-                      width: "20%"
-                    }}>
-                      Variable
-                    </th>
-                    <th style={{
-                      padding: "10px",
-                      textAlign: "left",
-                      fontWeight: "600",
-                      borderBottom: "1px solid #e5e7eb",
-                      width: "40%"
-                    }}>
-                      Before
-                    </th>
-                    <th style={{
-                      padding: "10px",
-                      textAlign: "left",
-                      fontWeight: "600",
-                      borderBottom: "1px solid #e5e7eb",
-                      width: "40%"
-                    }}>
-                      After
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {variableChanges.map((change: any, index: number) => (
-                    <tr key={index}>
-                      <td style={{
-                        padding: "10px",
-                        fontFamily: "monospace",
-                        fontSize: "13px",
-                        fontWeight: "500"
-                      }}>
-                        {change.variable}
-                      </td>
-                      <td style={{
-                        padding: "10px",
-                        fontSize: "13px",
-                        color: "#4b5563"
-                      }}>
-                        {change.before}
-                      </td>
-                      <td style={{
-                        padding: "10px",
-                        fontSize: "13px",
-                        color: "#4b5563"
-                      }}>
-                        {change.after}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            ) : (
-              <div style={{
-                backgroundColor: "white",
-                padding: "12px",
-                borderRadius: "6px",
-                border: "1px solid #e5e7eb",
-                color: "#9ca3af",
-                fontStyle: "italic"
-              }}>
-                No variable changes predicted
-              </div>
-            )}
-          </div>
-
-          {/* LLM Explanation Section */}
-          <div style={{
-            backgroundColor: "#f9fafb",
-            padding: "16px",
-            borderRadius: "8px",
-            marginBottom: "16px"
-          }}>
-            <div style={{
-              fontWeight: "600",
-              marginBottom: "8px",
-              fontSize: "15px"
-            }}>
-              LLM explanation:
-            </div>
-            <div style={{
-              backgroundColor: "white",
-              padding: "12px",
-              borderRadius: "6px",
-              border: "1px solid #e5e7eb",
-              color: "#374151"
-            }}>
-              {llmExplanation || 
-                <span style={{ color: "#9ca3af", fontStyle: "italic" }}>
-                  Click "Analyze Code" to get explanation
-                </span>
-              }
-            </div>
-            {llmExplanation && (
-              <div style={{
-                marginTop: "8px",
-                fontSize: "13px",
-                display: "flex",
-                alignItems: "center",
-                gap: "6px"
-              }}>
-                <span style={{ color: "#6b7280" }}>Confidence:</span>
-                <span style={{
-                  color: getConfidenceColor(),
-                  fontWeight: "600"
-                }}>
-                  {confidence}
-                </span>
-              </div>
-            )}
-          </div>
-
-          {/* Control Buttons */}
-          <div style={{
-            display: "flex",
-            gap: "12px",
-            marginBottom: "16px"
-          }}>
-            <button
-              onClick={analyzeCode}
-              disabled={isAnalyzing || !highlightedCode.trim()}
-              style={{
-                padding: "8px 20px",
-                backgroundColor: isAnalyzing ? "#e5e7eb" : "#3b82f6",
-                color: isAnalyzing ? "#9ca3af" : "white",
-                border: "none",
-                borderRadius: "6px",
-                cursor: (isAnalyzing || !highlightedCode.trim()) ? "not-allowed" : "pointer",
-                fontSize: "14px",
-                fontWeight: "500",
-                transition: "background-color 0.2s"
-              }}
-            >
-              {isAnalyzing ? "Analyzing..." : "Analyze Code"}
-            </button>
-          </div>
-
-          {/* Test Execution Section (Optional) */}
-          <details style={{ marginTop: "20px" }}>
-            <summary style={{
-              cursor: "pointer",
-              fontSize: "14px",
-              fontWeight: "600",
-              color: "#4b5563",
-              marginBottom: "12px",
-              userSelect: "none"
-            }}>
-              Test Execution (Optional)
-            </summary>
-            
-            <div style={{
-              backgroundColor: "#f9fafb",
-              padding: "16px",
-              borderRadius: "8px",
-              marginTop: "8px"
-            }}>
-              <div style={{ marginBottom: "12px" }}>
-                <label style={{
-                  display: "block",
-                  marginBottom: "6px",
-                  fontSize: "13px",
-                  fontWeight: "500",
-                  color: "#374151"
-                }}>
-                  Test Inputs:
-                </label>
-                <input
-                  value={testInputs}
-                  onChange={(e) => setTestInputs(e.target.value)}
-                  placeholder="e.g., [3, 5, 2, 8, 1], 0, 4"
-                  style={{
-                    width: "100%",
-                    padding: "8px",
-                    borderRadius: "4px",
-                    border: "1px solid #d1d5db",
-                    fontSize: "13px",
-                    fontFamily: "monospace"
-                  }}
-                />
-              </div>
-
-              <button
-                onClick={executeCode}
-                style={{
-                  padding: "6px 16px",
-                  backgroundColor: "#10b981",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                  fontSize: "13px",
-                  fontWeight: "500",
-                  marginBottom: "12px"
-                }}
-              >
-                Execute with Test Inputs
-              </button>
-
-              {actualOutput !== null && (
-                <div style={{
-                  backgroundColor: "white",
-                  padding: "10px",
-                  borderRadius: "4px",
-                  border: "1px solid #d1d5db",
-                  marginTop: "8px"
-                }}>
-                  <div style={{ fontSize: "12px", fontWeight: "600", marginBottom: "4px", color: "#059669" }}>
-                    Actual Output:
-                  </div>
-                  <pre style={{
-                    margin: 0,
-                    fontFamily: "monospace",
-                    fontSize: "12px",
-                    whiteSpace: "pre-wrap",
-                    color: "#1f2937"
-                  }}>
-                    {actualOutput}
-                  </pre>
-                </div>
-              )}
-
-              {executionError && (
-                <div style={{
-                  backgroundColor: "#fef2f2",
-                  padding: "10px",
-                  borderRadius: "4px",
-                  border: "1px solid #fecaca",
-                  marginTop: "8px"
-                }}>
-                  <div style={{ fontSize: "12px", fontWeight: "600", marginBottom: "4px", color: "#dc2626" }}>
-                    Execution Error:
-                  </div>
-                  <pre style={{
-                    margin: 0,
-                    fontFamily: "monospace",
-                    fontSize: "11px",
-                    whiteSpace: "pre-wrap",
-                    color: "#991b1b"
-                  }}>
-                    {executionError}
-                  </pre>
-                </div>
-              )}
-            </div>
-          </details>
-
-          {/* Code Reference */}
-          <details style={{ marginTop: "16px" }}>
-            <summary style={{
-              cursor: "pointer",
-              fontSize: "13px",
-              color: "#6b7280",
-              userSelect: "none"
-            }}>
-              View highlighted code
-            </summary>
-            <pre style={{
-              marginTop: "8px",
-              padding: "10px",
-              backgroundColor: "#f3f4f6",
-              borderRadius: "4px",
-              fontSize: "11px",
-              overflow: "auto",
-              fontFamily: "monospace",
-              color: "#374151"
-            }}>
-              {highlightedCode || "(No code selected)"}
-            </pre>
-          </details>
-        </div>
-      );
-    };
-    const FormalSpecification: React.FC<AnnotationEditorProps> = (props) => {
-    const [highlightedSpec, setHighlightedSpec] = useState({ formal: "", simple: "" });
-    const [isGenerating, setIsGenerating] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [expanded, setExpanded] = useState({ highlighted: true });
-
-    const highlightedCode = props.utils.getText() || "";
-
-    // persist specs to metadata
-    useEffect(() => {
-      props.utils.setMetadata({ highlightedSpec });
-    }, [highlightedSpec]);
-
-    const basePrompt = `
-  You are a formal methods assistant that writes CORRECT formal program specifications
-  for JavaScript code using clear mathematical notation.
-
-  Given the input code, produce two synchronized outputs:
-
-  1. "formal" — a formal specification suitable for program verification,
-    including preconditions, postconditions, invariants, and input-output relations,
-    using symbols like ∀, ∃, ⇒, ∧, ∨, =, and set-builder notation when needed.
-
-  2. "simple" — a plain-English presentation of the same specification (non-mathematical).
-
-  Respond with ONLY valid JSON of this form:
-  {
-    "formal": "...",
-    "simple": "..."
-  }
-  `;
-
-    // normalize LLM output
-    const extractTextFromResponse = (resp: any): string => {
-      if (typeof resp === "string") return resp;
-      if (resp && typeof resp === "object") {
-        if (resp.content) return resp.content;
-        if (resp.text) return resp.text;
-        if (Array.isArray(resp.choices) && resp.choices[0]?.message?.content)
-          return resp.choices[0].message.content;
-        if (Array.isArray(resp)) return resp.map((r) => r.content || r.text || "").join("\n");
-        try {
-          return JSON.stringify(resp);
-        } catch {
-          return String(resp);
-        }
-      }
-      return String(resp);
-    };
-
-    // parse JSON safely
-    const tryParseSpecFromText = (text: string) => {
-      const trimmed = text.trim();
-      try {
-        return { parsed: JSON.parse(trimmed) };
-      } catch {
-        const match = trimmed.match(/\{[\s\S]*\}/);
-        if (match) {
-          try {
-            return { parsed: JSON.parse(match[0]) };
-          } catch {
-            return { error: "Found JSON-like text but parsing failed." };
-          }
-        }
-        return { error: "No valid JSON found in response." };
-      }
-    };
-
-    const generateSpec = async () => {
-      const code = highlightedCode.trim();
-      if (!code) {
-        setError("No code selected for specification generation.");
-        return;
-      }
-
-      setIsGenerating(true);
-      setError(null);
-
-      const prompt: ChatMessage[] = [
-        { role: "system", content: basePrompt },
-        {
-          role: "user",
-          content: `Here is the highlighted code section:\n\n${code}\n\nPlease output JSON with keys "formal" and "simple".`,
-        },
-      ];
-
-      try {
-        const resp = await lmApi.chat(prompt, {
-          vendor: "copilot",
-          family: "gpt-4o",
-          temperature: 0.2,
-        });
-        const text = extractTextFromResponse(resp);
-        const { parsed, error: parseErr } = tryParseSpecFromText(text);
-
-        if (parseErr || !parsed?.formal || !parsed?.simple) {
-          setError("Unable to parse LLM response. Please retry.");
-          return;
-        }
-
-        const cleanSpec = {
-          formal: parsed.formal.trim(),
-          simple: parsed.simple.trim(),
-        };
-
-        setHighlightedSpec(cleanSpec);
-      } catch (err: any) {
-        setError(`Error generating specification: ${err.message || String(err)}`);
-      } finally {
-        setIsGenerating(false);
-      }
-    };
-
-    const renderSplitBox = (
-      title: string,
-      spec: { formal: string; simple: string }
-    ) => {
-      const isOpen = expanded.highlighted;
-      return (
-        <details
-          open={isOpen}
-          onToggle={(e) =>
-            setExpanded((prev) => ({
-              ...prev,
-              highlighted: (e.target as HTMLDetailsElement).open,
-            }))
-          }
-          style={{
-            marginBottom: "16px",
-            border: "1px solid #ccc",
-            borderRadius: "6px",
-            backgroundColor: "#fafafa",
-            overflow: "hidden",
-          }}
-        >
-          <summary
-            style={{
-              cursor: "pointer",
-              fontWeight: 600,
-              fontSize: "15px",
-              padding: "10px 12px",
-              backgroundColor: "#f3f4f6",
-              borderBottom: "1px solid #ddd",
-              userSelect: "none",
-            }}
-          >
-            {title}
-          </summary>
-          <div style={{ display: "flex", minHeight: "180px" }}>
-            <div
-              style={{
-                flex: 1,
-                padding: "12px",
-                backgroundColor: "#f9fafb",
-                borderRight: "1px solid #ddd",
-                fontFamily: "monospace",
-                fontSize: "13px",
-                whiteSpace: "pre-wrap",
-              }}
-            >
-              <strong>Formal Specification</strong>
-              <hr />
-              {spec.formal || (
-                <span style={{ color: "#999" }}>No specification yet</span>
-              )}
-            </div>
-            <div
-              style={{
-                flex: 1,
-                padding: "12px",
-                backgroundColor: "#ffffff",
-                fontFamily: "Poppins, sans-serif",
-                fontSize: "13px",
-                lineHeight: "1.5",
-                whiteSpace: "pre-wrap",
-              }}
-            >
-              <strong>Plain-English Explanation</strong>
-              <hr />
-              {spec.simple || (
-                <span style={{ color: "#999" }}>No explanation yet</span>
-              )}
-            </div>
-          </div>
-        </details>
-      );
-    };
-
-    return (
-      <div
-        style={{
-          fontFamily: "Poppins, sans-serif",
-          fontSize: "14px",
-          color: "#333",
-          padding: "12px",
-        }}
-      >
-        <h3 style={{ marginBottom: "12px", fontWeight: "600" }}>
-          🧮 Formal Program Specification Generator
-        </h3>
-
-        <div
-          style={{
-            display: "flex",
-            gap: "10px",
-            marginBottom: "16px",
-            flexWrap: "wrap",
-          }}
-        >
-          <button
-            onClick={() => generateSpec()}
-            disabled={isGenerating}
-            style={{
-              padding: "8px 16px",
-              backgroundColor: "#2563eb",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: isGenerating ? "not-allowed" : "pointer",
-              fontWeight: "500",
-            }}
-          >
-            {isGenerating ? "Generating..." : "Generate Specification"}
-          </button>
-        </div>
-
-        {error && (
-          <div
-            style={{
-              backgroundColor: "#fef2f2",
-              border: "1px solid #fecaca",
-              color: "#b91c1c",
-              padding: "10px",
-              borderRadius: "4px",
-              marginBottom: "16px",
-              fontSize: "13px",
-            }}
-          >
-            ⚠️ {error}
-          </div>
-        )}
-
-        {renderSplitBox("Specification for Highlighted Code", highlightedSpec)}
-      </div>
-    );
+  const handleExpressionChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const newExpression = evt.target.value;
+    setExpression(newExpression);
+    props.utils.setMetadata({ expression: newExpression });
   };
-  const Generator: React.FC<AnnotationEditorProps> = (props) => {
-  // State management
-  const [userInput, setUserInput] = useState(props.value.metadata.userInput || '');
-  const [draftText, setDraftText] = useState(props.value.metadata.annotationDraftText || '');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [hasGenerated, setHasGenerated] = useState(!!(props.value.metadata.annotationDraftText));
-  const [isFinalized, setIsFinalized] = useState(props.value.metadata.isFinalized || false);
-  const [useMock, setUseMock] = useState(false);
-  const annotationTitle = props.value.metadata.annotationTitle || userInput || '';
-
-  const dynamicActions = [
-    {
-      id: 'explain',
-      label: 'Explain Highlighted Code',
-      pattern: /\b(explain|what does this do|what does this code do|how does this work)\b/i,
-      systemPrompt: `You write concise annotation text that explains highlighted code for learners.
-Return markdown only. No title. Prefer short paragraphs and section headers like ### Purpose or ### Behavior. Use numbered lists for step-by-step logic. Preserve inline code with backticks.`,
-      userSuffix: 'Explain the highlighted code clearly.',
-    },
-    {
-      id: 'summarize',
-      label: 'Summarize',
-      pattern: /\b(summari[sz]e|summary|overview|brief|tldr|tl;dr)\b/i,
-      systemPrompt: `You write a concise summary of highlighted code.
-Return markdown only. No title. Keep it to 2-4 sentences max. Focus on what the code accomplishes at a high level, not implementation details.`,
-      userSuffix: 'Summarize the highlighted code in a few sentences.',
-    },
-    {
-      id: 'step-by-step',
-      label: 'Step-by-Step Walkthrough',
-      pattern: /\b(step[- ]by[- ]step|walkthrough|trace|line[- ]by[- ]line|walk through)\b/i,
-      systemPrompt: `You write a step-by-step walkthrough of highlighted code.
-Return markdown only. No title. Use a numbered list where each step explains what one logical chunk of the code does, in execution order. Keep each step to one sentence.`,
-      userSuffix: 'Walk through the highlighted code step by step.',
-    },
-    {
-      id: 'context',
-      label: 'How Does This Fit In?',
-      pattern: /\b(context|fit|role|purpose|why is this|relationship|how does this fit|within the)\b/i,
-      systemPrompt: `You explain how a piece of highlighted code fits within its surrounding class, module, or file.
-Return markdown only. No title. Focus on the role this code plays in the larger structure: what calls it, what it enables, why it exists here rather than elsewhere.`,
-      userSuffix: 'Explain how the highlighted code fits within the overall class or module.',
-    },
-  ];
-
-  const draftIsEmpty = !draftText.trim();
-  const visibleActions = draftIsEmpty
-    ? dynamicActions
-    : dynamicActions.filter(a => a.pattern.test(userInput || annotationTitle));
-  
-  const isMounted = useRef(true);
-
-  // Check API availability on mount
-  useEffect(() => {
-    const lmApiAvailable = typeof lmApi !== 'undefined' && lmApi !== null && typeof lmApi.chat === 'function';
-    if (!lmApiAvailable) {
-      setUseMock(true);
-    }
-    return () => { isMounted.current = false; };
-  }, []);
-
-  // Save state to metadata
-  useEffect(() => {
-    props.utils.setMetadata({
-      userInput,
-      annotationDraftText: draftText,
-      annotationTitle: userInput || annotationTitle,
-      isFinalized,
-    });
-  }, [userInput, draftText, isFinalized]);
 
-  // Get document context
-  const anchorText = props.utils.getText();
-  const documentText = props.value.document || '';
-  const startPos = props.value.start;
-  const endPos = props.value.end;
-
-  const createFormattedDocument = () => {
-    if (!documentText) return '';
-    const before = documentText.substring(0, startPos);
-    const highlighted = documentText.substring(startPos, endPos);
-    const after = documentText.substring(endPos);
-    return `${before}<<<HIGHLIGHTED>${highlighted}</HIGHLIGHTED>>>${after}`;
+  const handleSessionLinkChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const newLink = evt.target.value;
+    setSessionLink(newLink);
+    props.utils.setMetadata({ odysseySessionLink: newLink });
   };
 
-  const generateAnnotation = async () => {
-    if (!userInput.trim()) {
-      setError('Please describe what you want the annotation to do');
-      return;
-    }
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const formattedDocument = createFormattedDocument();
-
-      const prompt: ChatMessage[] = [
-        {
-          role: "system",
-          content: `You write concise annotation text that fulfills the user's requested annotation.
-
-Return markdown only for the annotation body.
-Do not include a title.
-Do not default to generic "explain highlighted code" wording unless the user explicitly asked for an explanation.
-Match the user's request closely.
-Prefer short paragraphs and section headers only when they improve readability.
-Preserve inline code formatting with backticks where useful.
-Keep it clean enough to display directly inside an annotation.`
-        },
-        {
-          role: "user",
-          content:
-            `User request: ${userInput}\n\n` +
-            `Highlighted code with context:\n\n${formattedDocument || anchorText}\n\n` +
-            `Write the annotation text now.`
-        }
-      ];
-
-      let response: string;
-      if (useMock) {
-        await new Promise(r => setTimeout(r, 500));
-        response = '### Purpose\nThis method compares Song objects to determine their ordering.\n\n### Behavior\n1. **Null Check**: Throws if the other song is null.\n2. **Title**: Compares titles lexicographically.\n3. **Artist**: If titles match, compares artists.\n4. **Duration**: If both match, compares duration numerically.\n5. **Genre**: Final tiebreaker on genre.';
-      } else {
-        response = await lmApi.chat(prompt, {
-          vendor: 'copilot',
-          family: 'gpt-4o',
-          temperature: 0.35
-        });
-      }
-
-      if (isMounted.current) {
-        const nextDraft = response.trim();
-        setDraftText(nextDraft);
-        setHasGenerated(true);
-        setIsFinalized(false);
-        props.utils.setMetadata({
-          annotationDraftText: nextDraft,
-          annotationTitle: userInput,
-        });
-      }
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : 'An error occurred while generating';
-      console.error('[Generator] Error:', errorMsg, err);
-      if (isMounted.current) {
-        setError(errorMsg);
-      }
-    } finally {
-      if (isMounted.current) {
-        setIsGenerating(false);
-      }
-    }
+  const openSessionLink = () => {
+    const urlToOpen = sessionLink.trim();
+    if (!urlToOpen) return;
+    vscode.postMessage({ command: "open-external", url: urlToOpen });
   };
 
-  const runDynamicAction = async (action: typeof dynamicActions[number]) => {
-    if (!anchorText.trim()) {
-      setError('No highlighted code selected');
-      return;
-    }
-
-    setIsGenerating(true);
-    setError(null);
-
+  const isValidSessionLink = (() => {
     try {
-      const formattedDocument = createFormattedDocument();
-      const prompt: ChatMessage[] = [
-        { role: "system", content: action.systemPrompt },
-        {
-          role: "user",
-          content:
-            `${action.userSuffix}\n\n` +
-            `Highlighted code with context:\n\n${formattedDocument || anchorText}`
-        }
-      ];
-
-      let response: string;
-      if (useMock) {
-        await new Promise(r => setTimeout(r, 500));
-        response = `Mock result for "${action.label}".\n\nThis is placeholder text from the mock API.`;
-      } else {
-        response = await lmApi.chat(prompt, {
-          vendor: 'copilot',
-          family: 'gpt-4o',
-          temperature: 0.35
-        });
-      }
-
-      if (isMounted.current) {
-        const nextDraft = response.trim();
-        setDraftText(nextDraft);
-        setHasGenerated(true);
-        props.utils.setMetadata({ annotationDraftText: nextDraft });
-      }
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : `Failed: ${action.label}`;
-      console.error(`[Generator] ${action.id} error:`, errorMsg, err);
-      if (isMounted.current) {
-        setError(errorMsg);
-      }
-    } finally {
-      if (isMounted.current) {
-        setIsGenerating(false);
-      }
+      if (!sessionLink.trim()) return false;
+      new URL(sessionLink.trim());
+      return true;
+    } catch {
+      return false;
     }
-  };
-
-  const resetGenerator = () => {
-    setDraftText('');
-    setError(null);
-    setHasGenerated(false);
-    setIsFinalized(false);
-    props.utils.setMetadata({
-      annotationDraftText: '',
-      annotationTitle: '',
-      isFinalized: false,
-    });
-  };
+  })();
 
-  const finalizeAnnotation = () => {
-    props.utils.setMetadata({
-      annotationDraftText: draftText,
-      annotationTitle: userInput || annotationTitle,
-      isFinalized: true,
-    });
-    setIsFinalized(true);
-  };
-
-  const editAnnotation = () => {
-    setIsFinalized(false);
-  };
+  const odysseyBase = "https://herbie-fp.github.io/odyssey/?spec=";
+  const url = odysseyBase + encodeURIComponent(expression);
 
-  // Finalized state
-  if (hasGenerated && isFinalized) {
-    return (
-      <div style={{
-        padding: "10px",
-        fontFamily: "Poppins, sans-serif",
-        overflow: "hidden",
-        width: "100%",
-        boxSizing: "border-box",
-      }}>
-        <div style={{
-          marginBottom: "8px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          fontSize: "11px",
-          color: "#666",
-        }}>
-          <span style={{ fontStyle: "italic" }}>{userInput || annotationTitle || 'Annotation'}</span>
-          <button
-            onClick={editAnnotation}
-            style={{
-              padding: "3px 8px",
-              backgroundColor: "transparent",
-              color: "#0078D4",
-              border: "1px solid #0078D4",
-              borderRadius: "4px",
-              cursor: "pointer",
-              fontSize: "11px",
-            }}
-          >
-            Edit
-          </button>
-        </div>
-        <div style={{
-          width: "100%",
-          boxSizing: "border-box",
-          wordWrap: "break-word",
-          overflowWrap: "break-word",
-        }}>
-          <div style={{ ...commonTextStyle, lineHeight: "1.6" }}>
-            <SimpleMarkdown>{draftText || "(No generated text yet)"}</SimpleMarkdown>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Active state: editing draft
-  if (hasGenerated && !isFinalized) {
-    return (
-      <div style={{
-        padding: "10px",
-        fontFamily: "Poppins, sans-serif",
-        overflow: "hidden",
-        width: "100%",
-        boxSizing: "border-box",
-      }}>
-        <div style={{
-          marginBottom: "10px",
-          padding: "8px",
-          backgroundColor: "#E8F5E9",
-          border: "1px solid #4CAF50",
-          borderRadius: "4px",
-          fontSize: "12px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}>
-          <span>✓ Generated annotation active</span>
-          <div style={{ display: "flex", gap: "6px" }}>
-            <button
-              onClick={finalizeAnnotation}
-              style={{
-                padding: "4px 8px",
-                backgroundColor: "#4CAF50",
-                color: "white",
-                border: "none",
-                borderRadius: "4px",
-                cursor: "pointer",
-                fontSize: "12px"
-              }}
-            >
-              Finalize
-            </button>
-            <button
-              onClick={resetGenerator}
-              style={{
-                padding: "4px 8px",
-                backgroundColor: "#f44336",
-                color: "white",
-                border: "none",
-                borderRadius: "4px",
-                cursor: "pointer",
-                fontSize: "12px"
-              }}
-            >
-              Reset
-            </button>
-          </div>
-        </div>
-        <div style={{ marginTop: "10px" }}>
-            {visibleActions.length > 0 && (
-              <div style={{ marginBottom: "10px", display: "flex", gap: "6px", flexWrap: "wrap" }}>
-                {visibleActions.map(action => (
-                  <button
-                    key={action.id}
-                    onClick={() => runDynamicAction(action)}
-                    disabled={isGenerating}
-                    style={{
-                      padding: "5px 10px",
-                      backgroundColor: isGenerating ? "#cccccc" : "#ffffff",
-                      color: "#111111",
-                      border: "1px solid #888",
-                      borderRadius: "4px",
-                      cursor: isGenerating ? "default" : "pointer",
-                      fontSize: "13px",
-                    }}
-                  >
-                    {action.label}
-                  </button>
-                ))}
-              </div>
-            )}
-            <textarea
-              value={draftText}
-              onChange={(e) => {
-                setDraftText(e.target.value);
-                props.utils.setMetadata({
-                  annotationDraftText: e.target.value,
-                  explanation: e.target.value,
-                  content: e.target.value,
-                  text: e.target.value,
-                  summary: e.target.value,
-                });
-              }}
-              style={{
-                width: "100%",
-                minHeight: "260px",
-                fontFamily: "Poppins, sans-serif",
-                fontSize: "13px",
-                padding: "8px",
-                borderRadius: "4px",
-                border: "1px solid #ccc",
-                resize: "vertical",
-                boxSizing: "border-box",
-                marginBottom: "8px",
-                lineHeight: "1.5",
-              }}
-            />
-        </div>
-
-        {error && (
-          <div style={{
-            color: "#D83B01",
-            backgroundColor: "#FED9CC",
-            padding: "8px",
-            borderRadius: "4px",
-            marginTop: "8px",
-            fontSize: "13px",
-          }}>
-            {error}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Otherwise, show the input interface
   return (
-    <div style={{ padding: "10px", fontFamily: "Poppins, sans-serif" }}>
-      <div style={{ marginBottom: "12px" }}>
-        <label style={{
-          display: "block",
-          marginBottom: "6px",
-          fontWeight: "bold",
-          fontSize: "14px"
-        }}>
-          Describe the annotation you want to create:
-        </label>
-        <textarea
-          value={userInput}
-          onChange={(e) => setUserInput(e.target.value)}
-          placeholder="Example: Create a color picker that lets me change the hex color value in this code... or Create a timer that counts down from the number in this variable..."
-          style={{
-            width: "100%",
-            padding: "8px",
-            borderRadius: "4px",
-            border: "1px solid #ccc",
-            fontSize: "14px",
-            minHeight: "80px",
-            resize: "vertical",
-            fontFamily: "Poppins, sans-serif"
-          }}
-        />
-      </div>
-
-      <div style={{ marginBottom: "15px", display: "flex", gap: "10px", alignItems: "center" }}>
+    <div className="odyssey">
+      <p>Parsed the following original expression from highlighted text:</p>
+      <input
+        type="text"
+        className="odyssey-text"
+        onChange={handleExpressionChange}
+        value={expression}
+      />
+      <button onClick={() => setRetryParse(true)}>Retry</button>
+      <p>
+        Explore floating-point error in this expression with
         <button
-          onClick={generateAnnotation}
-          disabled={isGenerating || !userInput.trim()}
-          style={{
-            padding: "6px 12px",
-            backgroundColor: isGenerating ? "#cccccc" : "#0078D4",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: isGenerating ? "default" : "pointer",
-            fontSize: "14px"
-          }}
-        >
-          {isGenerating ? "Generating..." : "Generate"}
+          className="open-external"
+          onClick={() => vscode.postMessage({ command: "open-external", url })}>
+          Odyssey
+          <svg
+            className="open-external-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256">
+            <path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path>
+          </svg>
         </button>
-
-      </div>
-
-      {error && (
-        <div style={{
-          color: "#D83B01",
-          backgroundColor: "#FED9CC",
-          padding: "8px",
-          borderRadius: "4px",
-          marginBottom: "12px",
-          fontSize: "14px"
-        }}>
-          {error}
-        </div>
-      )}
-
-      <div style={{
-        marginTop: "15px",
-        padding: "10px",
-        backgroundColor: "#F0F0F0",
-        borderRadius: "4px",
-        fontSize: "12px",
-        color: "#666"
-      }}>
-        <strong>Tips:</strong>
-        <ul style={{ marginTop: "5px", marginBottom: "0", paddingLeft: "20px" }}>
-          <li>Be specific about what the annotation should do</li>
-          <li>Describe the exact behavior and UI you want</li>
-          <li>Mention if it should interact with the highlighted text</li>
-          <li>State if data should persist across sessions</li>
-          <li>Examples: "rating stars", "color picker", "countdown timer", "progress tracker"</li>
-        </ul>
-      </div>
+      </p>
+
+      <p>Paste and save your Odyssey session link:</p>
+      <input
+        type="url"
+        className="odyssey-text"
+        placeholder="https://herbie-fp.github.io/odyssey/..."
+        value={sessionLink}
+        onChange={handleSessionLinkChange}
+      />
+      <button onClick={openSessionLink} disabled={!isValidSessionLink}>
+        Open saved session
+      </button>
     </div>
   );
 };
 
+/* TODO: Add all tools to be used here. */
+export const tools = {
+  MarkdownNote: MarkdownNote,
+  debugExample: ShowDebuggedExample,
+  yesNoQuestion: LMUnitTest,
+  odyssey: Odyssey,
+  Generator: Generator,
+  comment: Comment,
+  colorPicker: ColorPicker,
+  // runCodeSegment: RunCodeSegment,
+  imageUpload: ImageUpload,
+  displayHTML: DisplayHTML,
+  explainInEnglish: ExplainInEnglish,
+  // outputVisualizer: OutputVisualizer,
+  // formalSpecification: FormalSpecification,
+  // lmApiTest: LMAPITest,
+};
 
-
-    /* TODO: Add all tools to be used here. */
-    export const tools = {
-      comment: Comment,
-      colorPicker: ColorPicker,
-      // runCodeSegment: RunCodeSegment,
-      imageUpload: ImageUpload,
-      displayHTML: DisplayHTML,
-      odyssey: Odyssey,
-      yesNoQuestion: LMUnitTest,
-      debugExample: ShowDebuggedExample,
-      explainInEnglish: ExplainInEnglish, 
-      outputVisualizer: OutputVisualizer,
-      formalSpecification: FormalSpecification, 
-      Generator: Generator,
-      // lmApiTest: LMAPITest,
-    };
-
-    export const toolNames = {
-      comment: "Comment",
-      colorPicker: "Color Picker",
-      // runCodeSegment: "Run Code Segment",
-      imageUpload: "Image Upload",
-      displayHTML: "HTML Preview",
-      odyssey: "Analyze Floating-point Expression",
-      yesNoQuestion: "LM Unit Test",
-      debugExample: "Show Debugged Example",
-      explainInEnglish: "Explain in English",
-      outputVisualizer: "Output Visualizer",
-      formalSpecification: "Formal Specification",
-      Generator: "Annotation Generator",
-      // lmApiTest: "LM API Test",
-    };
+export const toolNames = {
+  MarkdownNote: "Markdown Note",
+  Generator: "Annotation Generator",
+  yesNoQuestion: "LM Unit Test",
+  odyssey: "Analyze Floating-point Expression",
+  comment: "Comment",
+  colorPicker: "Color Picker",
+  // runCodeSegment: "Run Code Segment",
+  imageUpload: "Image Upload",
+  displayHTML: "HTML Preview",
+  debugExample: "Show an Example",
+  explainInEnglish: "Explain in English",
+  // outputVisualizer: "Output Visualizer",
+  // formalSpecification: "Formal Specification",
+  
+  
+  // lmApiTest: "LM API Test",
+};
\ No newline at end of file