fix: address code review findings

- Fix WebSocket reconnection logic in App.svelte (was a no-op)
- Remove spoofable x-forwarded-for fallback, use cf-connecting-ip only
- Wrap Durable Object broadcast in try/catch to prevent place failures
- Cache OffscreenCanvas to avoid re-allocation every render frame

.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "frontend-design@claude-plugins-official": true
+  }
+}

src/client/App.svelte

@@ -13,8 +13,8 @@
   /** @type {CanvasRenderer} */
   let canvasRenderer;
 
-  // WebSocket connection for real-time updates
+  // WebSocket connection with auto-reconnect
-  $effect(() => {
+  function connectWebSocket() {
     const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
     const ws = new WebSocket(`${protocol}//${location.host}/api/ws`);
 
@@ -27,11 +27,14 @@
       } catch { /* ignore parse errors */ }
     };
 
-    ws.onclose = () => {
+    ws.onclose = () => setTimeout(connectWebSocket, 1000);
-      // Reconnect after 1s
+    ws.onerror = () => ws.close();
-      setTimeout(() => { /* effect re-runs on reactive dep change */ }, 1000);
-    };
 
+    return ws;
+  }
+
+  $effect(() => {
+    const ws = connectWebSocket();
     return () => ws.close();
   });
 </script>

src/client/components/CanvasRenderer.svelte

@@ -12,6 +12,10 @@
   let lastMouse = { x: 0, y: 0 };
   let loading = $state(true);
 
+  // Cached offscreen canvas — avoids re-allocation every render
+  const offscreen = new OffscreenCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
+  const offCtx = offscreen.getContext('2d');
+
   /** Render ImageData onto visible canvas with current zoom/pan */
   function render() {
     if (!canvasEl || !imageData) return;
@@ -21,8 +25,7 @@
     ctx.fillStyle = '#1a1a1a';
     ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
 
-    const offscreen = new OffscreenCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
+    offCtx.putImageData(imageData, 0, 0);
-    offscreen.getContext('2d').putImageData(imageData, 0, 0);
 
     ctx.save();
     ctx.translate(pan.x, pan.y);

src/lib/get-user-id.js

@@ -5,9 +5,8 @@
  * @returns {string} user id prefixed with "anon:"
  */
 export function getUserId(request) {
-  const ip = request.headers.get('cf-connecting-ip')
+  // CF-Connecting-IP is set by Cloudflare and cannot be spoofed
-    || request.headers.get('x-forwarded-for')?.split(',')[0]?.trim()
+  const ip = request.headers.get('cf-connecting-ip') || '127.0.0.1';
-    || '127.0.0.1';
 
   // Simple hash for privacy
   let hash = 0;

src/worker.js

@@ -63,13 +63,17 @@ app.post('/api/place', async (c) => {
   // Write pixels to canvas
   await setPixels(c.env, pixels);
 
-  // Broadcast to all connected WebSocket clients
+  // Broadcast to all connected WebSocket clients (non-blocking)
-  const roomId = c.env.CANVAS_ROOM.idFromName('main');
+  try {
-  const room = c.env.CANVAS_ROOM.get(roomId);
+    const roomId = c.env.CANVAS_ROOM.idFromName('main');
-  await room.fetch(new Request('http://internal/broadcast', {
+    const room = c.env.CANVAS_ROOM.get(roomId);
-    method: 'POST',
+    await room.fetch(new Request('http://internal/broadcast', {
-    body: JSON.stringify(pixels),
+      method: 'POST',
-  }));
+      body: JSON.stringify(pixels),
+    }));
+  } catch (err) {
+    console.error('Broadcast failed:', err);
+  }
 
   return c.json({ ok: true, credits: remaining });
 });