diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..475788d
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:5173/src/web-components/demo/sketch-app-shell.demo.html",
+      "webRoot": "${workspaceFolder}/loop/webui",
+      "preLaunchTask": "webui: dev"
+    }
+  ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 195949b..47975e7 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -16,9 +16,8 @@
       "script": "demo",
       "path": "loop/webui",
       "group": "build",
-      "label": "webui: watch demo",
+      "label": "webui: demo",
       "isBackground": true,
-      "dependsOn": ["webui: watch tsc"],
       "problemMatcher": [
         {
           "pattern": [
@@ -30,9 +29,32 @@
             }
           ],
           "background": {
-            "activeOnStart": true,
-            "beginsPattern": "Web Dev Server started...",
-            "endsPattern": "Network:"
+            "beginsPattern": "VITE",
+            "endsPattern": "Local:"
+          }
+        }
+      ]
+    },
+    {
+      "type": "npm",
+      "script": "dev",
+      "path": "loop/webui",
+      "group": "build",
+      "label": "webui: dev",
+      "isBackground": true,
+      "problemMatcher": [
+        {
+          "pattern": [
+            {
+              "regexp": ".",
+              "file": 1,
+              "location": 2,
+              "message": 3
+            }
+          ],
+          "background": {
+            "beginsPattern": "VITE",
+            "endsPattern": "Local:"
           }
         }
       ]