| 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 | |
| 23 | # Build the TypeScript code |
| 24 | make build |
| 25 | |
| 26 | # Type checking only |
| 27 | make check |
| 28 | ``` |
| 29 | |
| 30 | ### Development Mode |
| 31 | |
| 32 | For development, you can use watch mode: |
| 33 | |
| 34 | ```bash |
| 35 | make dev |
| 36 | ``` |
| 37 | |
| 38 | This will rebuild the TypeScript files whenever they change. |
| 39 | |
| 40 | ## Integration with Go Server |
| 41 | |
| 42 | 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. |
| 43 | |
| 44 | 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. |
| 45 | |
| 46 | ## File Structure |
| 47 | |
| 48 | - `src/`: TypeScript source files |
| 49 | - `dist/`: Generated JavaScript bundle |
| 50 | - `esbuild.go`: Go code for bundling TypeScript files |
| 51 | - `Makefile`: Build tasks |