docs: Update CONTRIBUTING and README for WebUI development server setup and usage
diff --git a/webui/Makefile b/webui/Makefile
index 3c7c341..b95708e 100644
--- a/webui/Makefile
+++ b/webui/Makefile
@@ -7,6 +7,9 @@
demo:
npm run demo
+dev:
+ npm run dev
+
# TypeScript type checking
# Note: The actual esbuild bundling happens in esbuild.go
check:
diff --git a/webui/readme.md b/webui/readme.md
index 6a9e257..90e8877 100644
--- a/webui/readme.md
+++ b/webui/readme.md
@@ -29,10 +29,27 @@
For development, you can use watch mode:
```bash
-make demo
+make dev
```
-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.
+This will launch a local web server at http://127.0.0.1:5173/ that serves the demo pages for the web components. You can edit the TypeScript files, and the changes will be reflected in real-time.
+
+To access the main app shell interface on the dev server (the primary UI component for Sketch):
+
+1. Start the dev server as above
+2. Navigate to http://127.0.0.1:5173/src/web-components/demo/sketch-app-shell.demo.html
+ or click on the "sketch-app-shell" link from the demo index page
+
+### UI Component Demos
+
+The development server provides access to individual component demos including:
+
+- Main app shell: http://127.0.0.1:5173/src/web-components/demo/sketch-app-shell.demo.html
+- Chat input: http://127.0.0.1:5173/src/web-components/demo/sketch-chat-input.demo.html
+- Timeline: http://127.0.0.1:5173/src/web-components/demo/sketch-timeline.demo.html
+- And more...
+
+You can access these demos from the index page or navigate directly to the specific component demo URL.
#### VSCode