Refactor UI layout service and remove legacy main module

src/server.mjs

@@ -26,7 +26,6 @@ const server = http.createServer(async (req, res) => {
   if (u.pathname === "/") return streamFile(path.join(UI_DIST_DIR, "index.html"), "text/html", res);
   if (u.pathname === "/bundle.js") return streamFile(path.join(UI_DIST_DIR, "bundle.js"), "text/javascript", res);
   if (u.pathname === "/preview.mjs") return streamFile(path.join(UI_DIR, "preview.mjs"), "text/javascript", res);
-  if (u.pathname === "/main.mjs") return streamFile(path.join(UI_DIR, "main.mjs"), "text/javascript", res);
   if (u.pathname === "/presets.mjs") return streamFile(path.join(UI_DIR, "presets.mjs"), "text/javascript", res);
   if (u.pathname === "/render-preview-frame.mjs") return streamFile(path.join(UI_DIR, "render-preview-frame.mjs"), "text/javascript", res);
   if (u.pathname === "/render-scene.mjs") return streamFile(path.join(__dirname, "render-scene.mjs"), "text/javascript", res);

src/ui/App.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { run as defaultRun } from './main.mjs';
+import { run as defaultRun } from './layout-service.js';
 import { WebSocketProvider } from './WebSocketContext.js';
 import { ParamsProvider } from './ParamsContext.js';
 import ControlPanel from './ControlPanel.js';

src/ui/main.mjs → src/ui/layout-service.js

@@ -1,4 +1,4 @@
-// Rendering is handled by a React component; this module only manages layout and handlers.
+// Layout fetching and runtime handlers for the UI.
 
 function setStatus(doc, msg){
   const el = doc.getElementById("status");

src/ui/readme.md

@@ -4,7 +4,7 @@ Browser interface providing a live preview above a panel of controls.
 
 
 - `index.html` – UI control layout and React mount point for the preview.
-- `main.mjs` – fetches layouts and exposes handlers used by the React app.
+- `layout-service.js` – fetches layouts and exposes handlers used by the React app.
 - `App.js` – top-level React component that invokes `run` and provides context. Optional `runFunction`, `renderFrame`, `shouldAnimate`, `ParamsProviderComponent`, and `WebSocketProviderComponent` props enable injecting test doubles.
 - `CanvasPreview.js` – React component rendering preview canvases and driving the frame loop. Custom `renderFrame` and `shouldAnimate` props allow deterministic frame tests.
 - `main.js` – React entry rendering `<App />`.

src/ui/rendering-pipeline.md

@@ -7,8 +7,8 @@ The browser preview converts runtime parameters into per-wall frame buffers.
    right `Float32Array` buffers using `renderFrames`.
 3. The buffers are drawn onto paired `<canvas>` elements and optional layout
    overlays.
-4. Layout JSON files are fetched once per side and cached in `main.mjs` to
-   avoid repeated network requests when React reinitializes runtime helpers.
+4. Layout JSON files are fetched once per side and cached in `layout-service.js`
+   to avoid repeated network requests when React reinitializes runtime helpers.
 
 The loop is stateless outside the provided `getParams` callback so React's
 state updates do not spawn extra animation frames.

webpack.config.js

@@ -6,6 +6,8 @@ const currentDirectory = dirname(fileURLToPath(import.meta.url));
 
 export default {
   context: resolve(currentDirectory, 'src/ui'),
+  // main.js mounts the React app; layout-service.js handles layout fetching
+  // and runtime helpers that were previously in main.mjs.
   entry: './main.js',
   output: {
     filename: 'bundle.js',