diff --git a/.env b/.env
new file mode 100644
index 0000000..f586e49
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+LIVEBOOK_TOKEN_ENABLED=0
+ERL_AFLAGS = "-kernel shell_history enabled"
diff --git a/.envrc b/.envrc
deleted file mode 100644
index 7790040..0000000
--- a/.envrc
+++ /dev/null
@@ -1,3 +0,0 @@
-direnv_version 2.30.3
-# IEx Persistent History, see https://tylerpachal.medium.com/iex-persistent-history-5d7d64e905d3
-export ERL_AFLAGS="-kernel shell_history enabled"
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 0000000..90b6b70
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/.gitignore b/.gitignore
index 11b7cec..faaeb69 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,7 @@ kino_k8s-*.tar
 *node_modules/*
 
 *.livemd_files
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/.rtx.toml b/.rtx.toml
index efb7f93..086ee2f 100644
--- a/.rtx.toml
+++ b/.rtx.toml
@@ -1,5 +1,4 @@
-[env]
-ERL_AFLAGS = "-kernel shell_history enabled"
+env_file = '.env'
 
 [tools]
 erlang = "26.1.2"
diff --git a/.vscode/settings.json b/.vscode/settings.json
index c301aae..231fb91 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,9 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.organizeImports": true
+  },
+  "playwright.env": {
+    "KUBECONTEXT": "kind-kino-k8s",
+    "KUBECONFIG": "~/.kube/config"
   }
 }
diff --git a/assets/apply_cell/main.tsx b/assets/apply_cell/main.tsx
index 1d49a70..0816c5b 100644
--- a/assets/apply_cell/main.tsx
+++ b/assets/apply_cell/main.tsx
@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: ApplyCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 
diff --git a/assets/connection_cell/main.tsx b/assets/connection_cell/main.tsx
index 5bacd18..22baa60 100644
--- a/assets/connection_cell/main.tsx
+++ b/assets/connection_cell/main.tsx
@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: ConnectionCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 
diff --git a/assets/get_cell/main.tsx b/assets/get_cell/main.tsx
index bc53c0b..e0fbe83 100644
--- a/assets/get_cell/main.tsx
+++ b/assets/get_cell/main.tsx
@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: ListCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 
diff --git a/assets/shared/form/input.tsx b/assets/shared/form/input.tsx
index ade2281..af99bb0 100644
--- a/assets/shared/form/input.tsx
+++ b/assets/shared/form/input.tsx
@@ -4,6 +4,7 @@ type InputProps = {
   name: string
   label: string
   defaultValue: string
+  testId?: string
   onChange: (value: string) => void
   orientation?: 'horiz' | 'vert'
 }
@@ -11,6 +12,7 @@ const Input: React.FC<InputProps> = ({
   name,
   label,
   defaultValue,
+  testId,
   onChange,
   orientation = 'vert',
 }) => {
@@ -34,6 +36,7 @@ const Input: React.FC<InputProps> = ({
       </label>
       <input
         type="text"
+        data-testid={testId ?? name}
         value={defaultValue}
         name={name}
         onChange={(e) => onChange(e.target.value)}
diff --git a/assets/terminal_cell/main.tsx b/assets/terminal_cell/main.tsx
index f9329ee..af545f7 100644
--- a/assets/terminal_cell/main.tsx
+++ b/assets/terminal_cell/main.tsx
@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: TerminalCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 
diff --git a/e2e/kino_k8s/connection_cell.spec.ts b/e2e/kino_k8s/connection_cell.spec.ts
new file mode 100644
index 0000000..a74a8d8
--- /dev/null
+++ b/e2e/kino_k8s/connection_cell.spec.ts
@@ -0,0 +1,36 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:8080/new')
+
+  await page.getByText('Notebook dependencies and setup').click()
+  await page
+    .locator('#cell-editor-setup-primary')
+    .getByRole('textbox')
+    .fill(`Mix.install([{:kino_k8s, path: "${process.cwd()}"}])`)
+
+  await page.getByRole('button', { name: 'Reconnect and setup' }).click()
+  await expect(page.locator('#outputs-setup-2')).toHaveText(/:ok/)
+
+  const smart = page
+    .locator('section')
+    .first()
+    .getByRole('button', { name: '+ Smart' })
+    .first()
+  await smart.click()
+  await page.getByRole('menuitem', { name: 'K8s - Cluster Connection' }).click()
+})
+
+test.describe('File', () => {
+  test('loads from local file', async ({ page }) => {
+    const cell = page.locator('[data-smart-cell-js-view-ref]').first()
+    const iframe = page.frameLocator('iframe').first()
+    await iframe.getByTestId('source').fill(process.env.KUBECONFIG!)
+    await iframe.getByTestId('context').fill(process.env.KUBECONTEXT!)
+    await cell.locator('button[data-el-queue-cell-evaluation-button]').click()
+
+    const result = page.frameLocator('iframe').nth(1).locator('body')
+    await expect(result).toHaveText(/%K8s.Conn/)
+    await expect(result).toHaveText(/K8s.Conn.Auth.Certificate/)
+  })
+})
diff --git a/lib/assets/apply_cell/main.js b/lib/assets/apply_cell/main.js
index 21f61ed..212bbfe 100644
--- a/lib/assets/apply_cell/main.js
+++ b/lib/assets/apply_cell/main.js
@@ -1,4 +1,4 @@
-var C=Object.create;var f=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var P=(e,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of S(r))!j.call(e,o)&&o!==t&&f(e,o,{get:()=>r[o],enumerable:!(s=N(r,o))||s.enumerable});return e};var b=(e,r,t)=>(t=e!=null?C(T(e)):{},P(r||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e));var m=w((J,l)=>{(function(){"use strict";var e={}.hasOwnProperty,r="[native code]";function t(){for(var s=[],o=0;o<arguments.length;o++){var n=arguments[o];if(n){var a=typeof n;if(a==="string"||a==="number")s.push(n);else if(Array.isArray(n)){if(n.length){var i=t.apply(null,n);i&&s.push(i)}}else if(a==="object"){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){s.push(n.toString());continue}for(var c in n)e.call(n,c)&&n[c]&&s.push(c)}}}return s.join(" ")}typeof l<"u"&&l.exports?(t.default=t,l.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var z=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),v=z;var g=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var R=(e,r)=>{let[t,s]=React.useState(r),o=n=>a=>{s(i=>({...i,[n]:a})),console.log("Pushing ${attrName} to server",a),e.pushEvent(`update_${n}`,a)};return React.useEffect(()=>{e.handleEvent("update",n=>{console.log("Attribute update from server",n),s(a=>({...Object.assign(a,n)}))})},[]),[t,o]},h=R;var k=()=>React.createElement("div",{className:"mb-5 rounded-md bg-gray-100 p-4 font-inter text-sm font-medium text-gray-500"},React.createElement("p",null,"To make requests to the Kubernetes cluster, you need at least one connection to a cluster."),React.createElement("p",{className:"pt-1"},"To create a cluster connection, you can add the"," ",React.createElement("span",{className:"text-gray-600"},"Cluster Connection")," smart cell.")),x=k;var p=b(m()),K=({name:e,label:r,defaultValue:t,onChange:s,orientation:o="vert"})=>React.createElement("div",{className:(0,p.default)({"flex flex-row items-baseline":o=="horiz"})},React.createElement("label",{htmlFor:e,className:(0,p.default)({block:o=="vert","pr-1 uppercase":o=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("input",{type:"text",value:t,name:e,onChange:n=>s(n.target.value),className:(0,p.default)({"block w-full":o=="vert"},"rounded-lg border border-gray-300 bg-gray-50 p-1.5 text-sm focus:border-blue-500 focus:ring-blue-500")})),y=K;var d=b(m()),E=({name:e,label:r,options:t,selectedOption:s,onChange:o,className:n="",orientation:a="vert"})=>React.createElement("div",{className:(0,d.default)({"flex flex-row items-baseline":a=="horiz"},n)},React.createElement("label",{htmlFor:e,className:(0,d.default)({block:a=="vert","pr-1 uppercase":a=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("select",{id:e,value:s||void 0,onChange:i=>o(i.target.value),className:(0,d.default)({"block w-full":a=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(i=>React.createElement("option",{key:i.value,value:i.value},i.label)))),u=E;var O=({initialAttrs:e,ctx:r})=>{let[t,s]=h(r,e);return React.createElement(React.Fragment,null,!t.connection&&React.createElement(x,null),React.createElement("div",{className:"rounded-md border-t border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(u,{name:"connection",label:"Connection",options:t.connections.map(o=>({label:o.variable,value:o.variable})),selectedOption:t.connection?.variable?.toString(),onChange:s("connection"),orientation:"horiz"}),React.createElement(u,{name:"method",label:"Method",options:t.methods.map(o=>({label:o.toUpperCase(),value:o})),selectedOption:t.method,onChange:s("method"),orientation:"horiz"}),React.createElement(y,{label:"Assign To",name:"assign_to",defaultValue:t.result_variable,onChange:s("result_variable"),orientation:"horiz"}))))},A=O;var X=async(e,r)=>{await g(e,r),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(r.error)return t.render(React.createElement(v,{message:r.error}));t.render(React.createElement(A,{initialAttrs:r,ctx:e}))};export{X as init};
+var C=Object.create;var f=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var P=(e,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of S(r))!j.call(e,n)&&n!==t&&f(e,n,{get:()=>r[n],enumerable:!(s=N(r,n))||s.enumerable});return e};var b=(e,r,t)=>(t=e!=null?C(T(e)):{},P(r||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e));var m=w((J,l)=>{(function(){"use strict";var e={}.hasOwnProperty,r="[native code]";function t(){for(var s=[],n=0;n<arguments.length;n++){var o=arguments[n];if(o){var a=typeof o;if(a==="string"||a==="number")s.push(o);else if(Array.isArray(o)){if(o.length){var i=t.apply(null,o);i&&s.push(i)}}else if(a==="object"){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){s.push(o.toString());continue}for(var c in o)e.call(o,c)&&o[c]&&s.push(c)}}}return s.join(" ")}typeof l<"u"&&l.exports?(t.default=t,l.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var z=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),v=z;var g=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var R=(e,r)=>{let[t,s]=React.useState(r),n=o=>a=>{s(i=>({...i,[o]:a})),console.log("Pushing ${attrName} to server",a),e.pushEvent(`update_${o}`,a)};return React.useEffect(()=>{e.handleEvent("update",o=>{console.log("Attribute update from server",o),s(a=>({...Object.assign(a,o)}))})},[]),[t,n]},h=R;var k=()=>React.createElement("div",{className:"mb-5 rounded-md bg-gray-100 p-4 font-inter text-sm font-medium text-gray-500"},React.createElement("p",null,"To make requests to the Kubernetes cluster, you need at least one connection to a cluster."),React.createElement("p",{className:"pt-1"},"To create a cluster connection, you can add the"," ",React.createElement("span",{className:"text-gray-600"},"Cluster Connection")," smart cell.")),x=k;var p=b(m()),K=({name:e,label:r,defaultValue:t,testId:s,onChange:n,orientation:o="vert"})=>React.createElement("div",{className:(0,p.default)({"flex flex-row items-baseline":o=="horiz"})},React.createElement("label",{htmlFor:e,className:(0,p.default)({block:o=="vert","pr-1 uppercase":o=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("input",{type:"text","data-testid":s??e,value:t,name:e,onChange:a=>n(a.target.value),className:(0,p.default)({"block w-full":o=="vert"},"rounded-lg border border-gray-300 bg-gray-50 p-1.5 text-sm focus:border-blue-500 focus:ring-blue-500")})),y=K;var d=b(m()),E=({name:e,label:r,options:t,selectedOption:s,onChange:n,className:o="",orientation:a="vert"})=>React.createElement("div",{className:(0,d.default)({"flex flex-row items-baseline":a=="horiz"},o)},React.createElement("label",{htmlFor:e,className:(0,d.default)({block:a=="vert","pr-1 uppercase":a=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("select",{id:e,value:s||void 0,onChange:i=>n(i.target.value),className:(0,d.default)({"block w-full":a=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(i=>React.createElement("option",{key:i.value,value:i.value},i.label)))),u=E;var O=({initialAttrs:e,ctx:r})=>{let[t,s]=h(r,e);return React.createElement(React.Fragment,null,!t.connection&&React.createElement(x,null),React.createElement("div",{className:"rounded-md border-t border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(u,{name:"connection",label:"Connection",options:t.connections.map(n=>({label:n.variable,value:n.variable})),selectedOption:t.connection?.variable?.toString(),onChange:s("connection"),orientation:"horiz"}),React.createElement(u,{name:"method",label:"Method",options:t.methods.map(n=>({label:n.toUpperCase(),value:n})),selectedOption:t.method,onChange:s("method"),orientation:"horiz"}),React.createElement(y,{label:"Assign To",name:"assign_to",defaultValue:t.result_variable,onChange:s("result_variable"),orientation:"horiz"}))))},A=O;var X=async(e,r)=>{await g(e),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(r.error)return t.render(React.createElement(v,{message:r.error}));t.render(React.createElement(A,{initialAttrs:r,ctx:e}))};export{X as init};
 /*! Bundled license information:
 
 classnames/index.js:
diff --git a/lib/assets/connection_cell/main.js b/lib/assets/connection_cell/main.js
index 6216b49..336d652 100644
--- a/lib/assets/connection_cell/main.js
+++ b/lib/assets/connection_cell/main.js
@@ -1,4 +1,4 @@
-var A=Object.create;var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var w=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var N=(e,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of S(r))!T.call(e,n)&&n!==t&&v(e,n,{get:()=>r[n],enumerable:!(s=C(r,n))||s.enumerable});return e};var b=(e,r,t)=>(t=e!=null?A(_(e)):{},N(r||!e||!e.__esModule?v(t,"default",{value:e,enumerable:!0}):t,e));var m=w((I,l)=>{(function(){"use strict";var e={}.hasOwnProperty,r="[native code]";function t(){for(var s=[],n=0;n<arguments.length;n++){var o=arguments[n];if(o){var a=typeof o;if(a==="string"||a==="number")s.push(o);else if(Array.isArray(o)){if(o.length){var i=t.apply(null,o);i&&s.push(i)}}else if(a==="object"){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){s.push(o.toString());continue}for(var d in o)e.call(o,d)&&o[d]&&s.push(d)}}}return s.join(" ")}typeof l<"u"&&l.exports?(t.default=t,l.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var j=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),g=j;var x=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var k=(e,r)=>{let[t,s]=React.useState(r),n=o=>a=>{s(i=>({...i,[o]:a})),console.log("Pushing ${attrName} to server",a),e.pushEvent(`update_${o}`,a)};return React.useEffect(()=>{e.handleEvent("update",o=>{console.log("Attribute update from server",o),s(a=>({...Object.assign(a,o)}))})},[]),[t,n]},y=k;var p=b(m()),P=({name:e,label:r,defaultValue:t,onChange:s,orientation:n="vert"})=>React.createElement("div",{className:(0,p.default)({"flex flex-row items-baseline":n=="horiz"})},React.createElement("label",{htmlFor:e,className:(0,p.default)({block:n=="vert","pr-1 uppercase":n=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("input",{type:"text",value:t,name:e,onChange:o=>s(o.target.value),className:(0,p.default)({"block w-full":n=="vert"},"rounded-lg border border-gray-300 bg-gray-50 p-1.5 text-sm focus:border-blue-500 focus:ring-blue-500")})),c=P;var u=b(m()),z=({name:e,label:r,options:t,selectedOption:s,onChange:n,className:o="",orientation:a="vert"})=>React.createElement("div",{className:(0,u.default)({"flex flex-row items-baseline":a=="horiz"},o)},React.createElement("label",{htmlFor:e,className:(0,u.default)({block:a=="vert","pr-1 uppercase":a=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("select",{id:e,value:s||void 0,onChange:i=>n(i.target.value),className:(0,u.default)({"block w-full":a=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(i=>React.createElement("option",{key:i.value,value:i.value},i.label)))),f=z;var E=({initialAttrs:e,ctx:r})=>{let[t,s]=y(r,e),n=[{label:"File",value:"file"},{label:"Environment Variable",value:"env"}];return n.push({label:"K8s Service Account",value:"k8s"}),React.createElement("div",{className:"rounded-md border border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex flex-wrap gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(f,{name:"source_type",label:"Source Type",options:n,selectedOption:t.source_type,onChange:s("source_type"),orientation:"horiz"}),React.createElement(c,{label:"Assign To",name:"assign_to",defaultValue:t.result_variable,onChange:s("result_variable"),orientation:"horiz"})),React.createElement("div",{className:"flex flex-wrap gap-x-5 p-3"},t.source_type!="k8s"&&React.createElement(c,{label:t.source_type=="file"?"File Path":"Env Var",name:"source",defaultValue:t.source,onChange:s("source"),orientation:"vert"}),t.source_type!="k8s"&&React.createElement(c,{label:"Context",name:"context",defaultValue:t.opts.context||"",onChange:o=>s("opts")({...t.opts,context:o})}),React.createElement(f,{name:"insecure_skip_tls_verify",label:"Insecure Skip TLS Verify",options:[{label:"Yes",value:"true"},{label:"No",value:"false"}],selectedOption:t.opts.insecure_skip_tls_verify.toString(),onChange:o=>s("opts")({...t.opts,insecure_skip_tls_verify:JSON.parse(o)})})))},h=E;var G=async(e,r)=>{await x(e,r),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(r.error)return t.render(React.createElement(g,{message:r.error}));t.render(React.createElement(h,{initialAttrs:r,ctx:e}))};export{G as init};
+var A=Object.create;var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var w=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports);var N=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of S(o))!T.call(e,n)&&n!==t&&v(e,n,{get:()=>o[n],enumerable:!(s=C(o,n))||s.enumerable});return e};var b=(e,o,t)=>(t=e!=null?A(_(e)):{},N(o||!e||!e.__esModule?v(t,"default",{value:e,enumerable:!0}):t,e));var m=w((I,l)=>{(function(){"use strict";var e={}.hasOwnProperty,o="[native code]";function t(){for(var s=[],n=0;n<arguments.length;n++){var r=arguments[n];if(r){var a=typeof r;if(a==="string"||a==="number")s.push(r);else if(Array.isArray(r)){if(r.length){var i=t.apply(null,r);i&&s.push(i)}}else if(a==="object"){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){s.push(r.toString());continue}for(var u in r)e.call(r,u)&&r[u]&&s.push(u)}}}return s.join(" ")}typeof l<"u"&&l.exports?(t.default=t,l.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var j=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),g=j;var x=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var k=(e,o)=>{let[t,s]=React.useState(o),n=r=>a=>{s(i=>({...i,[r]:a})),console.log("Pushing ${attrName} to server",a),e.pushEvent(`update_${r}`,a)};return React.useEffect(()=>{e.handleEvent("update",r=>{console.log("Attribute update from server",r),s(a=>({...Object.assign(a,r)}))})},[]),[t,n]},y=k;var p=b(m()),P=({name:e,label:o,defaultValue:t,testId:s,onChange:n,orientation:r="vert"})=>React.createElement("div",{className:(0,p.default)({"flex flex-row items-baseline":r=="horiz"})},React.createElement("label",{htmlFor:e,className:(0,p.default)({block:r=="vert","pr-1 uppercase":r=="horiz"},"mb-1 text-sm font-medium")},o),React.createElement("input",{type:"text","data-testid":s??e,value:t,name:e,onChange:a=>n(a.target.value),className:(0,p.default)({"block w-full":r=="vert"},"rounded-lg border border-gray-300 bg-gray-50 p-1.5 text-sm focus:border-blue-500 focus:ring-blue-500")})),c=P;var d=b(m()),z=({name:e,label:o,options:t,selectedOption:s,onChange:n,className:r="",orientation:a="vert"})=>React.createElement("div",{className:(0,d.default)({"flex flex-row items-baseline":a=="horiz"},r)},React.createElement("label",{htmlFor:e,className:(0,d.default)({block:a=="vert","pr-1 uppercase":a=="horiz"},"mb-1 text-sm font-medium")},o),React.createElement("select",{id:e,value:s||void 0,onChange:i=>n(i.target.value),className:(0,d.default)({"block w-full":a=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(i=>React.createElement("option",{key:i.value,value:i.value},i.label)))),f=z;var E=({initialAttrs:e,ctx:o})=>{let[t,s]=y(o,e),n=[{label:"File",value:"file"},{label:"Environment Variable",value:"env"}];return n.push({label:"K8s Service Account",value:"k8s"}),React.createElement("div",{className:"rounded-md border border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex flex-wrap gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(f,{name:"source_type",label:"Source Type",options:n,selectedOption:t.source_type,onChange:s("source_type"),orientation:"horiz"}),React.createElement(c,{label:"Assign To",name:"assign_to",defaultValue:t.result_variable,onChange:s("result_variable"),orientation:"horiz"})),React.createElement("div",{className:"flex flex-wrap gap-x-5 p-3"},t.source_type!="k8s"&&React.createElement(c,{label:t.source_type=="file"?"File Path":"Env Var",name:"source",defaultValue:t.source,onChange:s("source"),orientation:"vert"}),t.source_type!="k8s"&&React.createElement(c,{label:"Context",name:"context",defaultValue:t.opts.context||"",onChange:r=>s("opts")({...t.opts,context:r})}),React.createElement(f,{name:"insecure_skip_tls_verify",label:"Insecure Skip TLS Verify",options:[{label:"Yes",value:"true"},{label:"No",value:"false"}],selectedOption:t.opts.insecure_skip_tls_verify.toString(),onChange:r=>s("opts")({...t.opts,insecure_skip_tls_verify:JSON.parse(r)})})))},h=E;var G=async(e,o)=>{await x(e),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(o.error)return t.render(React.createElement(g,{message:o.error}));t.render(React.createElement(h,{initialAttrs:o,ctx:e}))};export{G as init};
 /*! Bundled license information:
 
 classnames/index.js:
diff --git a/lib/assets/get_cell/main.js b/lib/assets/get_cell/main.js
index fad155e..c2103cd 100644
--- a/lib/assets/get_cell/main.js
+++ b/lib/assets/get_cell/main.js
@@ -1,4 +1,4 @@
-var R=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var _=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports);var L=(t,o,e,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of P(o))!K.call(t,a)&&a!==e&&f(t,a,{get:()=>o[a],enumerable:!(s=I(o,a))||s.enumerable});return t};var b=(t,o,e)=>(e=t!=null?R(j(t)):{},L(o||!t||!t.__esModule?f(e,"default",{value:t,enumerable:!0}):e,t));var m=_((X,c)=>{(function(){"use strict";var t={}.hasOwnProperty,o="[native code]";function e(){for(var s=[],a=0;a<arguments.length;a++){var r=arguments[a];if(r){var n=typeof r;if(n==="string"||n==="number")s.push(r);else if(Array.isArray(r)){if(r.length){var l=e.apply(null,r);l&&s.push(l)}}else if(n==="object"){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){s.push(r.toString());continue}for(var i in r)t.call(r,i)&&r[i]&&s.push(i)}}}return s.join(" ")}typeof c<"u"&&c.exports?(e.default=e,c.exports=e):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return e}):window.classNames=e})()});var z=({message:t})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},t))),v=z;var g=(t,o)=>{let e;return(...s)=>{clearTimeout(e),e=setTimeout(()=>{t(...s)},o)}},h=async t=>{await t.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await t.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var O=(t,o)=>{let[e,s]=React.useState(o),a=r=>n=>{s(l=>({...l,[r]:n})),console.log("Pushing ${attrName} to server",n),t.pushEvent(`update_${r}`,n)};return React.useEffect(()=>{t.handleEvent("update",r=>{console.log("Attribute update from server",r),s(n=>({...Object.assign(n,r)}))})},[]),[e,a]},y=O;var E=()=>React.createElement("div",{className:"mb-5 rounded-md bg-gray-100 p-4 font-inter text-sm font-medium text-gray-500"},React.createElement("p",null,"To make requests to the Kubernetes cluster, you need at least one connection to a cluster."),React.createElement("p",{className:"pt-1"},"To create a cluster connection, you can add the"," ",React.createElement("span",{className:"text-gray-600"},"Cluster Connection")," smart cell.")),x=E;var d=b(m()),F=({name:t,label:o,defaultValue:e,onChange:s,orientation:a="vert"})=>React.createElement("div",{className:(0,d.default)({"flex flex-row items-baseline":a=="horiz"})},React.createElement("label",{htmlFor:t,className:(0,d.default)({block:a=="vert","pr-1 uppercase":a=="horiz"},"mb-1 text-sm font-medium")},o),React.createElement("input",{type:"text",value:e,name:t,onChange:r=>s(r.target.value),className:(0,d.default)({"block w-full":a=="vert"},"rounded-lg border border-gray-300 bg-gray-50 p-1.5 text-sm focus:border-blue-500 focus:ring-blue-500")})),S=F;var C=b(m());var G=({name:t,selectedValue:o,searchTerm:e,onSearch:s,placeholder:a})=>{let r=g(i=>{s(i.toLowerCase())},300),[n,l]=React.useState(e??"");return React.useEffect(()=>{o&&l(o)},[o]),React.createElement(React.Fragment,null,React.createElement("div",{className:"relative"},React.createElement("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"},React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",strokeWidth:1.5,stroke:"currentColor",className:(0,C.default)("h-5 w-5",{"bg-green-200":o,"text-green-800":o,"border-green-800":o,"rounded-lg":o})},o?React.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"}):React.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"}))),React.createElement("input",{type:"text",value:n,name:t,autoComplete:"off",placeholder:a,onInput:i=>{l(i.target.value),r(i.target.value)},className:"block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 pl-9 text-sm focus:border-blue-500 focus:ring-blue-500"})))},M=({resultItems:t,itemRenderer:o,onSelect:e,resultItemsKeyField:s})=>React.createElement("div",{className:"max-h-36 overflow-auto rounded-b-lg border-b border-l border-r border-gray-300"},React.createElement("div",{className:"w-max min-w-full"},t.map(a=>React.createElement("div",{key:a[s],onClick:()=>e(a),className:"border-b-solid last:border-b-none cursor-pointer border-b border-b-gray-300 bg-gray-50 px-2 py-0.5 hover:bg-blue-600 hover:text-white"},o(a))))),q=({name:t,label:o,searchTerm:e,onSearch:s,resultItems:a,resultItemsKeyField:r,itemRenderer:n,className:l,onSelect:i,selectedValue:w,placeholder:k})=>React.createElement("div",{className:l},React.createElement("label",{htmlFor:t,className:"mb-1 block text-sm font-medium"},o),React.createElement(G,{name:t,onSearch:s,searchTerm:e,selectedValue:w,placeholder:k}),(a&&a.length)>0&&React.createElement(M,{resultItems:a,itemRenderer:n,onSelect:i,resultItemsKeyField:r})),T=q;var u=b(m()),U=({name:t,label:o,options:e,selectedOption:s,onChange:a,className:r="",orientation:n="vert"})=>React.createElement("div",{className:(0,u.default)({"flex flex-row items-baseline":n=="horiz"},r)},React.createElement("label",{htmlFor:t,className:(0,u.default)({block:n=="vert","pr-1 uppercase":n=="horiz"},"mb-1 text-sm font-medium")},o),React.createElement("select",{id:t,value:s||void 0,onChange:l=>a(l.target.value),className:(0,u.default)({"block w-full":n=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},e.map(l=>React.createElement("option",{key:l.value,value:l.value},l.label)))),p=U;var J=({gvk:t})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"text-xs text-gray-400"},t.api_version),React.createElement("div",{className:"text-sm"},t.kind)),N=J;var V=({initialAttrs:t,ctx:o})=>{let[e,s]=y(o,t),a=e.result_types[e.request_type];return React.createElement(React.Fragment,null,!e.connection&&React.createElement(x,null),React.createElement("div",{className:"rounded-md border border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(p,{name:"connection",label:"Connection",options:e.connections.map(r=>({label:r.variable,value:r.variable})),selectedOption:e.connection?.variable?.toString(),onChange:s("connection"),orientation:"horiz"}),React.createElement(p,{name:"request_type",label:"Request Type",options:e.request_types.map(r=>({label:r.toUpperCase(),value:r})),selectedOption:e.request_type,onChange:s("request_type"),orientation:"horiz"}),a&&React.createElement(p,{name:"result_type",label:"Result Type",options:a.map(r=>({label:r.toUpperCase(),value:r})),selectedOption:e.result_type,onChange:s("result_type"),orientation:"horiz"}),React.createElement(S,{label:"Assign To",name:"assign_to",defaultValue:e.result_variable,onChange:s("result_variable"),orientation:"horiz"})),React.createElement("div",{className:"flex gap-x-5 p-3"},e.connection&&React.createElement(T,{className:"max-w-full",name:"gvk",label:"Resource Kind",onSearch:s("search_term"),searchTerm:e.search_term,resultItemsKeyField:"index",resultItems:e.search_result_items,onSelect:s("gvk"),itemRenderer:r=>React.createElement(N,{gvk:r}),selectedValue:e.gvk?.kind,placeholder:"apps/v1 Deployment"}),e.namespaces&&React.createElement(p,{name:"namespace",label:"Namespace",options:e.namespaces.map(r=>({label:r,value:r})),selectedOption:e.namespace,onChange:s("namespace")}),e.resources&&React.createElement(p,{name:"resource",label:"Resource Name",options:e.resources.map(r=>({label:r,value:r})),selectedOption:e.resource,onChange:s("resource")}))))},A=V;var de=async(t,o)=>{await h(t,o),t.root.innerHTML="loading...",t.importCSS("main.css"),t.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let e=ReactDOM.createRoot(t.root);if(o.error)return e.render(React.createElement(v,{message:o.error}));e.render(React.createElement(A,{initialAttrs:o,ctx:t}))};export{de as init};
+var I=Object.create;var f=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var _=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports);var L=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of P(o))!K.call(e,a)&&a!==t&&f(e,a,{get:()=>o[a],enumerable:!(s=R(o,a))||s.enumerable});return e};var b=(e,o,t)=>(t=e!=null?I(j(e)):{},L(o||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e));var m=_((X,c)=>{(function(){"use strict";var e={}.hasOwnProperty,o="[native code]";function t(){for(var s=[],a=0;a<arguments.length;a++){var r=arguments[a];if(r){var n=typeof r;if(n==="string"||n==="number")s.push(r);else if(Array.isArray(r)){if(r.length){var l=t.apply(null,r);l&&s.push(l)}}else if(n==="object"){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){s.push(r.toString());continue}for(var i in r)e.call(r,i)&&r[i]&&s.push(i)}}}return s.join(" ")}typeof c<"u"&&c.exports?(t.default=t,c.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var z=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),v=z;var g=(e,o)=>{let t;return(...s)=>{clearTimeout(t),t=setTimeout(()=>{e(...s)},o)}},h=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var O=(e,o)=>{let[t,s]=React.useState(o),a=r=>n=>{s(l=>({...l,[r]:n})),console.log("Pushing ${attrName} to server",n),e.pushEvent(`update_${r}`,n)};return React.useEffect(()=>{e.handleEvent("update",r=>{console.log("Attribute update from server",r),s(n=>({...Object.assign(n,r)}))})},[]),[t,a]},y=O;var E=()=>React.createElement("div",{className:"mb-5 rounded-md bg-gray-100 p-4 font-inter text-sm font-medium text-gray-500"},React.createElement("p",null,"To make requests to the Kubernetes cluster, you need at least one connection to a cluster."),React.createElement("p",{className:"pt-1"},"To create a cluster connection, you can add the"," ",React.createElement("span",{className:"text-gray-600"},"Cluster Connection")," smart cell.")),x=E;var d=b(m()),F=({name:e,label:o,defaultValue:t,testId:s,onChange:a,orientation:r="vert"})=>React.createElement("div",{className:(0,d.default)({"flex flex-row items-baseline":r=="horiz"})},React.createElement("label",{htmlFor:e,className:(0,d.default)({block:r=="vert","pr-1 uppercase":r=="horiz"},"mb-1 text-sm font-medium")},o),React.createElement("input",{type:"text","data-testid":s??e,value:t,name:e,onChange:n=>a(n.target.value),className:(0,d.default)({"block w-full":r=="vert"},"rounded-lg border border-gray-300 bg-gray-50 p-1.5 text-sm focus:border-blue-500 focus:ring-blue-500")})),S=F;var C=b(m());var G=({name:e,selectedValue:o,searchTerm:t,onSearch:s,placeholder:a})=>{let r=g(i=>{s(i.toLowerCase())},300),[n,l]=React.useState(t??"");return React.useEffect(()=>{o&&l(o)},[o]),React.createElement(React.Fragment,null,React.createElement("div",{className:"relative"},React.createElement("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"},React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",strokeWidth:1.5,stroke:"currentColor",className:(0,C.default)("h-5 w-5",{"bg-green-200":o,"text-green-800":o,"border-green-800":o,"rounded-lg":o})},o?React.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"}):React.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"}))),React.createElement("input",{type:"text",value:n,name:e,autoComplete:"off",placeholder:a,onInput:i=>{l(i.target.value),r(i.target.value)},className:"block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 pl-9 text-sm focus:border-blue-500 focus:ring-blue-500"})))},M=({resultItems:e,itemRenderer:o,onSelect:t,resultItemsKeyField:s})=>React.createElement("div",{className:"max-h-36 overflow-auto rounded-b-lg border-b border-l border-r border-gray-300"},React.createElement("div",{className:"w-max min-w-full"},e.map(a=>React.createElement("div",{key:a[s],onClick:()=>t(a),className:"border-b-solid last:border-b-none cursor-pointer border-b border-b-gray-300 bg-gray-50 px-2 py-0.5 hover:bg-blue-600 hover:text-white"},o(a))))),q=({name:e,label:o,searchTerm:t,onSearch:s,resultItems:a,resultItemsKeyField:r,itemRenderer:n,className:l,onSelect:i,selectedValue:w,placeholder:k})=>React.createElement("div",{className:l},React.createElement("label",{htmlFor:e,className:"mb-1 block text-sm font-medium"},o),React.createElement(G,{name:e,onSearch:s,searchTerm:t,selectedValue:w,placeholder:k}),(a&&a.length)>0&&React.createElement(M,{resultItems:a,itemRenderer:n,onSelect:i,resultItemsKeyField:r})),T=q;var u=b(m()),U=({name:e,label:o,options:t,selectedOption:s,onChange:a,className:r="",orientation:n="vert"})=>React.createElement("div",{className:(0,u.default)({"flex flex-row items-baseline":n=="horiz"},r)},React.createElement("label",{htmlFor:e,className:(0,u.default)({block:n=="vert","pr-1 uppercase":n=="horiz"},"mb-1 text-sm font-medium")},o),React.createElement("select",{id:e,value:s||void 0,onChange:l=>a(l.target.value),className:(0,u.default)({"block w-full":n=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(l=>React.createElement("option",{key:l.value,value:l.value},l.label)))),p=U;var J=({gvk:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"text-xs text-gray-400"},e.api_version),React.createElement("div",{className:"text-sm"},e.kind)),N=J;var V=({initialAttrs:e,ctx:o})=>{let[t,s]=y(o,e),a=t.result_types[t.request_type];return React.createElement(React.Fragment,null,!t.connection&&React.createElement(x,null),React.createElement("div",{className:"rounded-md border border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(p,{name:"connection",label:"Connection",options:t.connections.map(r=>({label:r.variable,value:r.variable})),selectedOption:t.connection?.variable?.toString(),onChange:s("connection"),orientation:"horiz"}),React.createElement(p,{name:"request_type",label:"Request Type",options:t.request_types.map(r=>({label:r.toUpperCase(),value:r})),selectedOption:t.request_type,onChange:s("request_type"),orientation:"horiz"}),a&&React.createElement(p,{name:"result_type",label:"Result Type",options:a.map(r=>({label:r.toUpperCase(),value:r})),selectedOption:t.result_type,onChange:s("result_type"),orientation:"horiz"}),React.createElement(S,{label:"Assign To",name:"assign_to",defaultValue:t.result_variable,onChange:s("result_variable"),orientation:"horiz"})),React.createElement("div",{className:"flex gap-x-5 p-3"},t.connection&&React.createElement(T,{className:"max-w-full",name:"gvk",label:"Resource Kind",onSearch:s("search_term"),searchTerm:t.search_term,resultItemsKeyField:"index",resultItems:t.search_result_items,onSelect:s("gvk"),itemRenderer:r=>React.createElement(N,{gvk:r}),selectedValue:t.gvk?.kind,placeholder:"apps/v1 Deployment"}),t.namespaces&&React.createElement(p,{name:"namespace",label:"Namespace",options:t.namespaces.map(r=>({label:r,value:r})),selectedOption:t.namespace,onChange:s("namespace")}),t.resources&&React.createElement(p,{name:"resource",label:"Resource Name",options:t.resources.map(r=>({label:r,value:r})),selectedOption:t.resource,onChange:s("resource")}))))},A=V;var de=async(e,o)=>{await h(e),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(o.error)return t.render(React.createElement(v,{message:o.error}));t.render(React.createElement(A,{initialAttrs:o,ctx:e}))};export{de as init};
 /*! Bundled license information:
 
 classnames/index.js:
diff --git a/lib/assets/terminal_cell/main.js b/lib/assets/terminal_cell/main.js
index b4784ea..f1d0df3 100644
--- a/lib/assets/terminal_cell/main.js
+++ b/lib/assets/terminal_cell/main.js
@@ -1,4 +1,4 @@
-var x=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var S=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var N=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of A(r))!T.call(e,o)&&o!==t&&m(e,o,{get:()=>r[o],enumerable:!(a=y(r,o))||a.enumerable});return e};var j=(e,r,t)=>(t=e!=null?x(C(e)):{},N(r||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e));var g=S((J,c)=>{(function(){"use strict";var e={}.hasOwnProperty,r="[native code]";function t(){for(var a=[],o=0;o<arguments.length;o++){var n=arguments[o];if(n){var s=typeof n;if(s==="string"||s==="number")a.push(n);else if(Array.isArray(n)){if(n.length){var i=t.apply(null,n);i&&a.push(i)}}else if(s==="object"){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){a.push(n.toString());continue}for(var d in n)e.call(n,d)&&n[d]&&a.push(d)}}}return a.join(" ")}typeof c<"u"&&c.exports?(t.default=t,c.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var w=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),u=w;var f=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var P=(e,r)=>{let[t,a]=React.useState(r),o=n=>s=>{a(i=>({...i,[n]:s})),console.log("Pushing ${attrName} to server",s),e.pushEvent(`update_${n}`,s)};return React.useEffect(()=>{e.handleEvent("update",n=>{console.log("Attribute update from server",n),a(s=>({...Object.assign(s,n)}))})},[]),[t,o]},b=P;var O=()=>React.createElement("div",{className:"mb-5 rounded-md bg-gray-100 p-4 font-inter text-sm font-medium text-gray-500"},React.createElement("p",null,"To make requests to the Kubernetes cluster, you need at least one connection to a cluster."),React.createElement("p",{className:"pt-1"},"To create a cluster connection, you can add the"," ",React.createElement("span",{className:"text-gray-600"},"Cluster Connection")," smart cell.")),v=O;var p=j(g()),K=({name:e,label:r,options:t,selectedOption:a,onChange:o,className:n="",orientation:s="vert"})=>React.createElement("div",{className:(0,p.default)({"flex flex-row items-baseline":s=="horiz"},n)},React.createElement("label",{htmlFor:e,className:(0,p.default)({block:s=="vert","pr-1 uppercase":s=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("select",{id:e,value:a||void 0,onChange:i=>o(i.target.value),className:(0,p.default)({"block w-full":s=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(i=>React.createElement("option",{key:i.value,value:i.value},i.label)))),l=K;var E=({initialAttrs:e,ctx:r})=>{let[t,a]=b(r,e);return React.createElement(React.Fragment,null,!t.connection&&React.createElement(v,null),React.createElement("div",{className:"rounded-md border border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(l,{name:"connection",label:"Connection",options:t.connections.map(o=>({label:o.variable,value:o.variable})),selectedOption:t.connection?.variable?.toString(),onChange:a("connection"),orientation:"horiz"}),React.createElement(l,{name:"connect_to",label:"connect_to",options:t.connect_tos.map(o=>({label:o,value:o})),selectedOption:t.connect_to?.toString(),onChange:a("connect_to"),orientation:"horiz"})),React.createElement("div",{className:"flex gap-x-5 p-3"},t.namespaces&&React.createElement(l,{name:"namespace",label:"Namespace",options:t.namespaces.map(o=>({label:o,value:o})),selectedOption:t.namespace,onChange:a("namespace")}),t.pods&&React.createElement(l,{name:"pod",label:"Pod Name",options:t.pods.map(o=>({label:o,value:o})),selectedOption:t.pod,onChange:a("pod")}),t.containers&&React.createElement(l,{name:"container",label:"Container Name",options:t.containers.map(o=>({label:o,value:o})),selectedOption:t.container,onChange:a("container")}))))},h=E;var G=async(e,r)=>{await f(e,r),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(r.error)return t.render(React.createElement(u,{message:r.error}));t.render(React.createElement(h,{initialAttrs:r,ctx:e}))};export{G as init};
+var x=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var S=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var N=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of A(r))!T.call(e,o)&&o!==t&&m(e,o,{get:()=>r[o],enumerable:!(a=y(r,o))||a.enumerable});return e};var j=(e,r,t)=>(t=e!=null?x(C(e)):{},N(r||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e));var g=S((J,c)=>{(function(){"use strict";var e={}.hasOwnProperty,r="[native code]";function t(){for(var a=[],o=0;o<arguments.length;o++){var n=arguments[o];if(n){var s=typeof n;if(s==="string"||s==="number")a.push(n);else if(Array.isArray(n)){if(n.length){var i=t.apply(null,n);i&&a.push(i)}}else if(s==="object"){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){a.push(n.toString());continue}for(var d in n)e.call(n,d)&&n[d]&&a.push(d)}}}return a.join(" ")}typeof c<"u"&&c.exports?(t.default=t,c.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var w=({message:e})=>React.createElement(React.Fragment,null,React.createElement("div",{className:"flex rounded-md border border-dashed border-red-700 bg-red-100 p-2"},React.createElement("svg",{className:"h-6 w-6 flex-none text-red-700",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},React.createElement("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})),React.createElement("div",{className:"font-inter px-2 text-sm font-medium text-red-700"},e))),u=w;var f=async e=>{await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"),await e.importJS("https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js")};var P=(e,r)=>{let[t,a]=React.useState(r),o=n=>s=>{a(i=>({...i,[n]:s})),console.log("Pushing ${attrName} to server",s),e.pushEvent(`update_${n}`,s)};return React.useEffect(()=>{e.handleEvent("update",n=>{console.log("Attribute update from server",n),a(s=>({...Object.assign(s,n)}))})},[]),[t,o]},b=P;var O=()=>React.createElement("div",{className:"mb-5 rounded-md bg-gray-100 p-4 font-inter text-sm font-medium text-gray-500"},React.createElement("p",null,"To make requests to the Kubernetes cluster, you need at least one connection to a cluster."),React.createElement("p",{className:"pt-1"},"To create a cluster connection, you can add the"," ",React.createElement("span",{className:"text-gray-600"},"Cluster Connection")," smart cell.")),v=O;var p=j(g()),K=({name:e,label:r,options:t,selectedOption:a,onChange:o,className:n="",orientation:s="vert"})=>React.createElement("div",{className:(0,p.default)({"flex flex-row items-baseline":s=="horiz"},n)},React.createElement("label",{htmlFor:e,className:(0,p.default)({block:s=="vert","pr-1 uppercase":s=="horiz"},"mb-1 text-sm font-medium")},r),React.createElement("select",{id:e,value:a||void 0,onChange:i=>o(i.target.value),className:(0,p.default)({"block w-full":s=="vert"}," bg-caret-down appearance-none rounded-lg border border-gray-300 bg-gray-50 bg-[length:10px] bg-[center_right_10px] bg-no-repeat p-2 pr-5 text-sm focus:border-blue-500 focus:ring-blue-500")},t.map(i=>React.createElement("option",{key:i.value,value:i.value},i.label)))),l=K;var E=({initialAttrs:e,ctx:r})=>{let[t,a]=b(r,e);return React.createElement(React.Fragment,null,!t.connection&&React.createElement(v,null),React.createElement("div",{className:"rounded-md border border-solid border-gray-300 font-inter font-medium text-gray-600"},React.createElement("div",{className:"border-b-solid flex gap-x-5 gap-y-3 border-b border-b-gray-300 bg-blue-100 p-3"},React.createElement(l,{name:"connection",label:"Connection",options:t.connections.map(o=>({label:o.variable,value:o.variable})),selectedOption:t.connection?.variable?.toString(),onChange:a("connection"),orientation:"horiz"}),React.createElement(l,{name:"connect_to",label:"connect_to",options:t.connect_tos.map(o=>({label:o,value:o})),selectedOption:t.connect_to?.toString(),onChange:a("connect_to"),orientation:"horiz"})),React.createElement("div",{className:"flex gap-x-5 p-3"},t.namespaces&&React.createElement(l,{name:"namespace",label:"Namespace",options:t.namespaces.map(o=>({label:o,value:o})),selectedOption:t.namespace,onChange:a("namespace")}),t.pods&&React.createElement(l,{name:"pod",label:"Pod Name",options:t.pods.map(o=>({label:o,value:o})),selectedOption:t.pod,onChange:a("pod")}),t.containers&&React.createElement(l,{name:"container",label:"Container Name",options:t.containers.map(o=>({label:o,value:o})),selectedOption:t.container,onChange:a("container")}))))},h=E;var G=async(e,r)=>{await f(e),e.root.innerHTML="loading...",e.importCSS("main.css"),e.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");let t=ReactDOM.createRoot(e.root);if(r.error)return t.render(React.createElement(u,{message:r.error}));t.render(React.createElement(h,{initialAttrs:r,ctx:e}))};export{G as init};
 /*! Bundled license information:
 
 classnames/index.js:
diff --git a/package-lock.json b/package-lock.json
index a0f49bf..e339eb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,8 @@
   "packages": {
     "": {
       "devDependencies": {
+        "@playwright/test": "^1.39.0",
+        "@types/node": "^20.9.0",
         "@types/react": "^18.2.28",
         "@typescript-eslint/eslint-plugin": "^6.9.0",
         "@typescript-eslint/parser": "^6.9.0",
@@ -564,12 +566,36 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz",
+      "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.39.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.14",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
       "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz",
+      "integrity": "sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.9",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz",
@@ -2878,6 +2904,50 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz",
+      "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.39.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz",
+      "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -3823,6 +3893,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index cf2b4f5..4a3b93d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "clean": "rm -r lib/assets"
   },
   "devDependencies": {
+    "@playwright/test": "^1.39.0",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.2.28",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..bfe3e83
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});