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/readme.md b/loop/webui/readme.md
index b904934..49ca0e8 100644
--- a/loop/webui/readme.md
+++ b/loop/webui/readme.md
@@ -20,9 +20,6 @@
# Install dependencies
make install
-# Build the TypeScript code
-make build
-
# Type checking only
make check
```
@@ -32,10 +29,15 @@
For development, you can use watch mode:
```bash
-make dev
+make demo
```
-This will rebuild the TypeScript files whenever they change.
+This will launch a local web server that serves the demo pages for the web components. You can edit the TypeScript files, and the changes will be reflected in real-time.
+p
+
+#### VSCode
+
+If you are using Visual Studio Code, you can use the `Launch Chrome against localhost` launch configuration to run the demo server. This configuration is set up to automatically open a sketch page with dummy data in Chrome when you start debugging, supporting hot module reloading and breakpoints.
## Integration with Go Server