| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 1 | # Loop WebUI |
| 2 | |
| 3 | A modern web interface for the CodingAgent loop. |
| 4 | |
| 5 | The server in the sibling directory (../server) exposes an HTTP API for |
| 6 | the CodingAgent. |
| 7 | |
| 8 | ## Development |
| 9 | |
| 10 | This module contains a TypeScript-based web UI for the Loop service. The TypeScript code is compiled into JavaScript using esbuild, and the resulting bundle is served by the Go server. |
| 11 | |
| 12 | ### Prerequisites |
| 13 | |
| 14 | - Node.js and npm |
| 15 | - Go 1.20 or later |
| 16 | |
| 17 | ### Setup |
| 18 | |
| 19 | ```bash |
| 20 | # Install dependencies |
| 21 | make install |
| 22 | |
| Pokey Rule | 4de8a91 | 2025-04-25 21:01:30 +0100 | [diff] [blame] | 23 | # Run tests |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 24 | make check |
| 25 | ``` |
| 26 | |
| 27 | ### Development Mode |
| 28 | |
| 29 | For development, you can use watch mode: |
| 30 | |
| 31 | ```bash |
| Pokey Rule | e2a8c2f | 2025-04-23 15:09:25 +0100 | [diff] [blame] | 32 | make demo |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 33 | ``` |
| 34 | |
| Pokey Rule | e2a8c2f | 2025-04-23 15:09:25 +0100 | [diff] [blame] | 35 | 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. |
| Pokey Rule | 4de8a91 | 2025-04-25 21:01:30 +0100 | [diff] [blame] | 36 | |
| 37 | ### Snapshot tests |
| 38 | |
| 39 | We use aria snapshot tests to verify the rendering of our components. To update snapshots, run: |
| 40 | |
| 41 | ```bash |
| 42 | make update-snapshots |
| 43 | ``` |
| Pokey Rule | e2a8c2f | 2025-04-23 15:09:25 +0100 | [diff] [blame] | 44 | |
| 45 | #### VSCode |
| 46 | |
| 47 | 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. |
| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [diff] [blame] | 48 | |
| 49 | ## Integration with Go Server |
| 50 | |
| 51 | The TypeScript code is bundled into JavaScript using esbuild and then served by the Go HTTP server. The integration happens through the `webui` package, which provides a function to retrieve the built bundle. |
| 52 | |
| 53 | The server code accesses the built web UI through the `webui.GetBundle()` function, which returns a filesystem that can be used to serve the files. |
| 54 | |
| 55 | ## File Structure |
| 56 | |
| 57 | - `src/`: TypeScript source files |
| 58 | - `dist/`: Generated JavaScript bundle |
| 59 | - `esbuild.go`: Go code for bundling TypeScript files |
| 60 | - `Makefile`: Build tasks |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 61 | |
| 62 | ## Bundle Analysis |
| 63 | |
| 64 | You can analyze the size and dependency structure of the TypeScript bundles: |
| 65 | |
| 66 | ```bash |
| 67 | # Generate bundle metafiles in a temporary directory |
| 68 | go run sketch.dev/cmd/bundle-analyzer |
| 69 | ``` |
| 70 | |
| 71 | The tool generates metafiles that can be analyzed by dragging them onto the esbuild analyzer at https://esbuild.github.io/analyze/ |