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.
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>
diff --git a/loop/webui/src/web-components/demo/sketch-charts.demo.html b/loop/webui/src/web-components/demo/sketch-charts.demo.html
index d9b714d..64a9bd2 100644
--- a/loop/webui/src/web-components/demo/sketch-charts.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-charts.demo.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Sketch Charts Demo</title>
- <script type="module" src="/dist/web-components/sketch-charts.js"></script>
+ <script type="module" src="../sketch-charts.ts"></script>
<link rel="stylesheet" href="demo.css" />
<style>
sketch-charts {
diff --git a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
index 99d581b..e76aed7 100644
--- a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
@@ -2,9 +2,7 @@
<head>
<title>sketch-chat-input demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-chat-input.js"
- type="module"
+ <script type="module" src="../sketch-chat-input.ts"
></script>
<script>
diff --git a/loop/webui/src/web-components/demo/sketch-container-status.demo.html b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
index a35e881..e18440d 100644
--- a/loop/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -2,9 +2,7 @@
<head>
<title>sketch-container-status demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-container-status.js"
- type="module"
+ <script type="module" src="../sketch-container-status.ts"
></script>
<script>
diff --git a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
index 3a6cb35..1dc9337 100644
--- a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -9,8 +9,7 @@
href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
/>
<script
- type="module"
- src="/dist/web-components/sketch-diff-view.js"
+ type="module" src="../sketch-diff-view.ts"
></script>
<style>
body {
diff --git a/loop/webui/src/web-components/demo/sketch-network-status.demo.html b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
index d645840..04c118c 100644
--- a/loop/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -2,9 +2,7 @@
<head>
<title>sketch-network-status demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-network-status.js"
- type="module"
+ <script type="module" src="../sketch-network-status.ts"
></script>
</head>
<body>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
index cb2bdf3..a97145e 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -2,9 +2,7 @@
<head>
<title>sketch-timeline-message demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-timeline-message.js"
- type="module"
+ <script type="module" src="../sketch-timeline-message.ts"
></script>
<script>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
index be8ab8e..58abdb2 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -2,9 +2,7 @@
<head>
<title>sketch-timeline demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-timeline.js"
- type="module"
+ <script type="module" src="../sketch-timeline.ts"
></script>
<script>
const messages = [
diff --git a/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html b/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
index 44b598a..7bedf11 100644
--- a/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
@@ -3,9 +3,7 @@
<title>sketch-tool-calls demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-tool-calls.js"
- type="module"
+ <script type="module" src="../sketch-tool-calls.ts"
></script>
<script>
diff --git a/loop/webui/src/web-components/demo/sketch-tool-card.demo.html b/loop/webui/src/web-components/demo/sketch-tool-card.demo.html
index 17c64ae..3926f2e 100644
--- a/loop/webui/src/web-components/demo/sketch-tool-card.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-tool-card.demo.html
@@ -3,9 +3,7 @@
<title>sketch-tool-card demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-tool-card.js"
- type="module"
+ <script type="module" src="../sketch-tool-card.ts"
></script>
<script>
diff --git a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
index 7f795fc..af2f1fb 100644
--- a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
@@ -3,9 +3,7 @@
<title>sketch-view-mode-select demo</title>
<link rel="stylesheet" href="demo.css" />
- <script
- src="/dist/web-components/sketch-view-mode-select.js"
- type="module"
+ <script type="module" src="../sketch-view-mode-select.ts"
></script>
<script>