Yay a devtools!

devtools/panel.js

@@ -0,0 +1,52 @@
+document.getElementById("refresh").addEventListener("click", loadContextStack);
+
+function loadContextStack() {
+  const container = document.getElementById("contextContainer");
+  container.innerHTML = "";
+
+  browser.runtime.sendMessage({ type: "GET_CONTEXT_STACK" }).then(
+    (response) => {
+      if (!response || !response.contextStack) {
+        container.innerHTML = "<p>No context stack found.</p>";
+        return;
+      }
+
+      const contextStack = response.contextStack;
+      for (const key in contextStack) {
+        const row = document.createElement("div");
+        row.classList.add("context-row");
+
+        const keyDiv = document.createElement("div");
+        keyDiv.classList.add("context-key");
+        keyDiv.textContent = key;
+
+        const valueDiv = document.createElement("div");
+        valueDiv.classList.add("context-value");
+
+        const input = document.createElement("input");
+        input.value = contextStack[key];
+        input.addEventListener("change", () => {
+          browser.runtime.sendMessage({
+            type: "UPDATE_CONTEXT_VALUE",
+            key,
+            value: input.value,
+          }).then((updateResponse) => {
+            if (updateResponse && updateResponse.success) {
+              console.log(`Updated ${key} to ${input.value}`);
+            } else {
+              console.error(`Failed to update ${key}:`, updateResponse.error);
+            }
+          });
+        });
+
+        valueDiv.appendChild(input);
+        row.appendChild(keyDiv);
+        row.appendChild(valueDiv);
+        container.appendChild(row);
+      }
+    },
+  );
+}
+
+// Initial load when the panel opens.
+loadContextStack();