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/sketch-app-shell.html b/loop/webui/src/sketch-app-shell.html
index 8d1a30c..c12ce8c 100644
--- a/loop/webui/src/sketch-app-shell.html
+++ b/loop/webui/src/sketch-app-shell.html
@@ -4,30 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sketch coding assistant</title>
- <!-- We only need basic body styling; all component styles are encapsulated -->
- <style>
- html,
- body {
- height: 100%;
- overflow-y: auto;
- }
- body {
- font-family:
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- Roboto,
- sans-serif;
- margin: 0;
- padding: 0;
- color: #333;
- line-height: 1.4;
- overflow-x: hidden; /* Prevent horizontal scrolling */
- display: flex;
- flex-direction: column;
- }
- </style>
+ <link rel="stylesheet" href="sketch-app-shell.css" />
<script src="static/sketch-app-shell.js" async type="module"></script>
</head>
<body>