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/readme.md b/loop/webui/src/web-components/demo/readme.md
index 8e3c33c..324d077 100644
--- a/loop/webui/src/web-components/demo/readme.md
+++ b/loop/webui/src/web-components/demo/readme.md
@@ -2,13 +2,4 @@
These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.
-# How to use this demo directory to iterate on component development
-
-From the `loop/webui` directory:
-
-1. In one shell, run `npm run watch` to build the web components and watch for changes
-1. In another shell, run `npm run demo` to start a local web server to serve the demo pages
-1. open http://localhost:8000/src/web-components/demo/ in your browser
-1. make edits to the .ts code or to the demo.html files and see how it affects the demo pages in real time
-
-Alternately, use the `webui: watch demo` task in VSCode, which runs all of the above for you.
+See [README](../../../readme.md#development-mode) for more information on how to run the demo pages.