webui: Improve dx
For local development, switch to Vite and update web components for improved demo experience. Note that we haven't changed how we bundle when we're actually running in sketch; that's still the go/esbuild in-memory setup. This just changes demo dev setup to get breakpoints working and a functioning full sketch-app-shell.
We still need to add some mock data, but this is a start
- Introduced `vite.config.mts` for Vite setup with hot module reloading.
- Updated `package.json` and `package-lock.json` to include Vite and related plugins.
- Refactored demo scripts to utilize Vite for local development.
- Created `launch.json` for VSCode debugging configuration.
- Enhanced `Makefile` with a new demo task.
- Improved styling and structure in demo HTML and CSS files.
- Implemented `aggregateAgentMessages` function for message handling in web components.
diff --git a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
index ef335ed..48fc100 100644
--- a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -1,15 +1,13 @@
-<html>
+<!doctype html>
+<html lang="en">
<head>
- <title>sketch-app-shell demo</title>
- <link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-app-shell.js"
- type="module"
- ></script>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>sketch coding assistant</title>
+ <link rel="stylesheet" href="sketch-app-shell.css" />
+ <script src="../sketch-app-shell.ts" type="module"></script>
</head>
<body>
- <h1>sketch-app-shell demo</h1>
-
<sketch-app-shell></sketch-app-shell>
</body>
</html>