WIP: biome+mjs transition

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Dokku
-        uses: dokku/github-action@036bf9c07f1b40707a16201bc7a349074c3ec554
+        uses: dokku/github-action@v1.9.0
         with:
           git_remote_url: ssh://dokku@${{ secrets.SSH_SERVER }}:22/wbo
           ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}

.gitignore

@@ -1,3 +1,4 @@
+.env
 node_modules
 
 lib-cov
@@ -27,3 +28,4 @@ tests_output/
 playwright-report/
 test-results/
 .codex
+.profiles/

AGENTS.md

@@ -7,16 +7,19 @@
 
 ## architecture
 
-- Process boot + routes + socket server: [server startup](./server/server.js).
-- Realtime event handlers + broadcast path: [socket handlers](./server/sockets.js).
-- Socket auth, rate-limit enforcement, payload admission: [socket policy](./server/socket_policy.js).
-- Canonical inbound payload normalization: [message schema gate](./server/message_validation.js).
-- In-memory board model + apply rules + disk sync: [board state engine](./server/boardData.js).
-- Page shell that loads runtime bundles: [board document](./client-data/board.html).
-- Client state machine + send/receive plumbing: [board runtime](./client-data/js/board.js).
+- Process boot + routes + socket server: [server startup](./server/server.mjs).
+- HTML templating + client config payload: [templating](./server/templating.mjs), [client config](./server/client_configuration.mjs).
+- Shared toolbar catalog + versioned tool asset helpers: [tool catalog](./client-data/js/tool_catalog.js), [tool assets](./client-data/js/tool_assets.js).
+- Realtime event handlers + broadcast path: [socket handlers](./server/sockets.mjs).
+- Socket auth, rate-limit enforcement, payload admission: [socket policy](./server/socket_policy.mjs).
+- Canonical inbound payload normalization: [message schema gate](./server/message_validation.mjs).
+- In-memory board model + apply rules + disk sync: [board state engine](./server/boardData.mjs).
+- Page shell that server-renders the toolbar and loads the module entrypoint for the board runtime: [board document](./client-data/board.html), [board module boot](./client-data/js/board_main.js).
+- Client state machine + staged tool boot + send/receive plumbing: [board runtime](./client-data/js/board.js).
 - Shared socket transport utilities: [transport helpers](./client-data/js/board_transport.js).
 - Shared geometry/id/color/text clamps: [message primitives](./client-data/js/message_common.js).
 - Tool implementations that mutate SVG/DOM: [tool modules](./client-data/tools/).
+- Tool modules now default-export a tool class for dynamic `import()` boot, while legacy named `register*Tool` exports may still exist during migration.
 
 ## message lifecycle
 
@@ -33,34 +36,43 @@
 
 ## where to look by concern
 
-- Config/env behavior: [server configuration](./server/configuration.js).
+- Config/env behavior: [server configuration](./server/configuration.mjs).
 - Browser integration coverage: [playwright specs](./playwright/tests).
 - Node behavior coverage: [rate-limit tests](./test-node/rate_limits.test.js).
 - Browser runner setup: [playwright config](./playwright.config.ts).
+- Server-rendered toolbar/icon/cache coverage: [server route tests](./test-node/server_routes.test.js).
 
 ## test commands
 
 - Node suite: `node --test test-node/*.test.js`.
 - Browser suite: `npx playwright test playwright/tests/<file>.spec.ts`.
 - Throughput check: `npm run bench` before/after suspected performance changes.
-- Full gate: `npm test` (Node tests, Playwright, `prettier-check`).
-- Auto-format: `npm run prettier` (rules: [prettierrc](./.prettierrc), ignores: [prettierignore](./.prettierignore)).
+- CPU + memory profile: `npm run profile` writes `.profiles/benchmark-server.cpuprofile` and `.profiles/benchmark-server.heapprofile`.
+- Full gate: `npm test` (Node tests, Playwright, Biome `lint` with warnings treated as failures).
+- Auto-format: `npm run format` (Biome `--write --unsafe`).
 
 ## notes
 
 - `npm test` needs Chromium (`npx playwright install chromium` when missing).
 - `npm test` requires local networking and browser process startup.
 - In Playwright specs, assert authoritative socket/app state; avoid sleep-based timing.
 
+## profiling
+
+- Run `npm run profile` to profile `scripts/benchmark-server.mjs`; `.profiles/` is gitignored and keeps local CPU and heap output together.
+- CPU: open `.profiles/benchmark-server.cpuprofile` in DevTools Performance and look for hot frames with high self time or repeated stacks in `BoardData.load`, `BoardData.save`, `renderBoardToSVG`, `JSON.parse`, and `JSON.stringify`.
+- Memory: open `.profiles/benchmark-server.heapprofile` in DevTools Memory and look for large sampled allocations that survive GC, especially duplicated board objects, large `_children` arrays, and serialization strings.
+
 ## formatting
 
-- CI has no separate linter; `npm run prettier-check` + `npm test` define pass/fail.
+- `npm run lint` runs the full Biome formatter+linter gate and fails on warnings.
+- `npm run format` applies Biome safe and unsafe autofixes.
 - Keep edits minimal and style-consistent unless doing full-module refactors.
 
 ## change strategy
 
-- Message shape changes: update [server schema gate](./server/message_validation.js) and [shared message primitives](./client-data/js/message_common.js); rerun Node tests.
-- Persistence/replay changes: review [board state engine](./server/boardData.js); rerun `node --test test-node/rate_limits.test.js` and `npm test`.
+- Message shape changes: update [server schema gate](./server/message_validation.mjs) and [shared message primitives](./client-data/js/message_common.js); rerun Node tests.
+- Persistence/replay changes: review [board state engine](./server/boardData.mjs); rerun `node --test test-node/rate_limits.test.js` and `npm test`.
 - Tool UX changes: start in [tool modules](./client-data/tools/); verify with Playwright.
 
 ## required upkeep

Dockerfile

@@ -1,5 +1,7 @@
 FROM node:24-alpine
 
+LABEL org.opencontainers.image.source="https://github.com/lovasoa/whitebophir"
+
 WORKDIR /opt/app
 
 RUN chown -R 1000:1000 /opt/app
@@ -19,4 +21,4 @@ EXPOSE 80
 
 VOLUME /opt/app/server-data
 
-CMD ["/usr/local/bin/node", "server/server.js"]
+CMD ["/usr/local/bin/node", "server/server.mjs"]

biome.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!**/*.html", "!client-data/js/path-data-polyfill.js"]
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "lineEnding": "lf"
+  },
+  "linter": {
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noDescendingSpecificity": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "useIterableCallbackReturn": "off"
+      },
+      "correctness": {
+        "noUnusedVariables": "off",
+        "noUnusedFunctionParameters": "off",
+        "noUnusedImports": "off"
+      },
+      "complexity": {
+        "useLiteralKeys": "off",
+        "useOptionalChain": "off"
+      }
+    }
+  }
+}

client-data/board.css

@@ -326,7 +326,6 @@ svg {
   position: relative;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Old versions of Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently
@@ -520,8 +519,7 @@ circle.opcursor {
   transition: 0s;
 }
 
-/* Internet Explorer specific CSS */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+@media (forced-colors: active) {
   #chooseColor {
     color: transparent;
   }

client-data/board.html

@@ -1,17 +1,17 @@
 <!DOCTYPE html>
-<html lang="{{language}}">
+<html lang="{{language}}" data-version="{{version}}"{{#moderator}} data-moderator="true"{{/moderator}}>
 
 <head>
 	<meta charset="utf-8" />
 	<title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<link rel="stylesheet" type="text/css" href="../board.css" />
+	<link rel="stylesheet" type="text/css" href="../board.css?v={{version}}" />
 	<script src="../socket.io/socket.io.js"></script>
 	<meta name="description" content="{{translations.tagline}}" />
 	<meta name="keywords"
 		content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
-	<link rel="apple-touch-icon" href="../favicon.svg">
-	<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
+	<link rel="apple-touch-icon" href="../favicon.svg?v={{version}}">
+	<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico?v={{version}}">
 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
 	<meta property="og:title" content="{{board}} board on WBO" />
 	<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
@@ -20,6 +20,9 @@
 	{{#languages}}
 	<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
 	{{/languages}}
+	{{#toolStylesheets}}
+	<link rel="stylesheet" type="text/css" href="{{.}}" />
+	{{/toolStylesheets}}
 </head>
 
 <body>
@@ -39,11 +42,13 @@
 	<div id="menu" tabindex="0" {{#hideMenu}}style="display:none;"{{/hideMenu}}>
 		<div id="menuItems">
 			<ul id="tools" class="tools">
-				<li class="tool" tabindex="-1">
-					<img class="tool-icon" width="35" height="35" src="" alt="icon" />
-					<span class="tool-name"></span>
-					<img class="tool-icon secondaryIcon" width="35" height="35" src="data:," alt="icon" />
+				{{#tools}}
+				<li class="tool" tabindex="-1" id="toolID-{{name}}" data-tool-name="{{name}}">
+					<img class="tool-icon" width="35" height="35" src="{{iconUrl}}" alt="{{label}}" />
+					<span class="tool-name">{{label}}</span>
+					<img class="tool-icon secondaryIcon" width="35" height="35" src="data:," alt="" />
 				</li>
+				{{/tools}}
 			</ul>
 
 			<ul class="tools" id="settings">
@@ -56,7 +61,7 @@
 				</li>
 				<li class="tool" tabindex="-1"
 					title="{{translations.size}} ({{translations.keyboard_shortcut}}: alt + {{translations.mousewheel}})">
-					<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
+					<img class="tool-icon" width="60" height="60" src="icon-size.svg?v={{version}}" alt="size" />
 					<label class="tool-name slider" for="chooseSize">
 						<span>{{translations.size}}</span>
 						<input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
@@ -81,7 +86,7 @@
 					</label>
 				</li>
 				<li class="tool oneTouch" tabindex="-1" id="connectedUsersToggle">
-					<img class="tool-icon" width="35" height="35" src="users.svg" alt="" />
+					<img class="tool-icon" width="35" height="35" src="users.svg?v={{version}}" alt="" />
 					<span class="tool-name"></span>
 				</li>
 			</ul>
@@ -96,31 +101,7 @@
 	<script type="application/json" id="translations">{{{ json translations }}}</script>
 	<script type="application/json" id="configuration">{{{ json configuration }}}</script>
 	<script type="application/json" id="board-state">{{{ json boardState }}}</script>
-	<script src="../js/path-data-polyfill.js"></script>
-	<script src="../js/shared_module_resolver.js?v={{version}}"></script>
-	<script src="../js/message_tool_metadata.js?v={{version}}"></script>
-	<script src="../js/message_common.js?v={{version}}"></script>
-	<script src="../js/rate_limit_common.js?v={{version}}"></script>
-	<script src="../js/board_page_state.js?v={{version}}"></script>
-	<script src="../js/board_transport.js?v={{version}}"></script>
-	<script src="../js/board_message_replay.js?v={{version}}"></script>
-	<script src="../js/minitpl.js"></script>
-	<script src="../js/intersect.js"></script>
-	<script src="../js/board.js?v={{version}}"></script>
-	<script src="../tools/pencil/wbo_pencil_point.js?v={{version}}"></script>
-	<script src="../tools/pencil/pencil.js?v={{version}}"></script>
-	<script src="../tools/cursor/cursor.js?v={{version}}"></script>
-	<script src="../tools/line/line.js?v={{version}}"></script>
-	<script src="../tools/rect/rect.js?v={{version}}"></script>
-	<script src="../tools/ellipse/ellipse.js?v={{version}}"></script>
-	<script src="../tools/text/text.js?v={{version}}"></script>
-	<script src="../tools/eraser/eraser.js?v={{version}}"></script>
-	<script src="../tools/hand/hand.js?v={{version}}"></script>
-	<script src="../tools/grid/grid.js?v={{version}}"></script>
-	<script src="../tools/download/download.js?v={{version}}"></script>
-	<script src="../tools/zoom/zoom.js?v={{version}}"></script>
-	{{#moderator}}<script src="../tools/clear/clear.js?v={{version}}"></script>{{/moderator}}
-	<script src="../js/canvascolor.js?v={{version}}"></script>
+	<script type="module" src="../js/board_main.js?v={{version}}"></script>
 </body>
 
 </html>