Derive WebSocket scheme from page protocol

The client hardcoded `ws://` for both live sockets, so behind any
TLS-terminating proxy (Cloudflare Tunnel, nginx, ngrok) the browser
blocked them as mixed content and live updates died. It only worked over
http://localhost, making the bug easy to miss.

Add a shared `wsUrl(path)` helper that picks `wss://` when the page is
served over HTTPS and `ws://` otherwise, and route both call sites
(`/ws` and `/api/workspaces/ws`) through it. No server change needed —
the proxy forwards `wss://` to the origin's plain `ws://`.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FpGBXW5iHAsc8K2543Z7BU

Author: claude

client/hooks/useMeiEvents.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 
+import { wsUrl } from '@/client/lib/ws-url'
 import type { ViewInfo, WidgetInfo } from '@/lib/types'
 
 export type MeiEvent =
@@ -26,7 +27,7 @@ function ensureConnection() {
   if (ws || connecting) return
   connecting = true
 
-  const socket = new WebSocket(`ws://${location.host}/api/workspaces/ws`)
+  const socket = new WebSocket(wsUrl('/api/workspaces/ws'))
 
   socket.onopen = () => {
     ws = socket

client/lib/connection.ts

@@ -2,6 +2,7 @@ import type { QueryClient } from '@tanstack/react-query'
 
 import { workspaceKeys } from '@/client/api/workspaces'
 import { getScratchExecutor } from '@/client/lib/scratch-executor'
+import { wsUrl } from '@/client/lib/ws-url'
 import { liveStore } from '@/client/store/live'
 import { applyEvent } from '@/lib/format'
 import type {
@@ -55,7 +56,7 @@ function connect() {
     reconnectTimer = null
   }
 
-  const s = new WebSocket(`ws://${location.host}/ws`)
+  const s = new WebSocket(wsUrl('/ws'))
   socket = s
 
   s.onopen = () => {

client/lib/ws-url.test.ts

@@ -0,0 +1,33 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+
+import { wsUrl } from '@/client/lib/ws-url'
+
+const realLocation = globalThis.location
+
+function stubLocation(loc: { protocol: string; host: string }) {
+  Object.defineProperty(globalThis, 'location', {
+    value: loc,
+    configurable: true,
+    writable: true
+  })
+}
+
+afterEach(() => {
+  Object.defineProperty(globalThis, 'location', {
+    value: realLocation,
+    configurable: true,
+    writable: true
+  })
+})
+
+describe('wsUrl', () => {
+  test('uses ws:// over http', () => {
+    stubLocation({ protocol: 'http:', host: 'localhost:13337' })
+    expect(wsUrl('/ws')).toBe('ws://localhost:13337/ws')
+  })
+
+  test('uses wss:// over https (behind a TLS proxy)', () => {
+    stubLocation({ protocol: 'https:', host: 'moi.example.com' })
+    expect(wsUrl('/api/workspaces/ws')).toBe('wss://moi.example.com/api/workspaces/ws')
+  })
+})

client/lib/ws-url.ts

@@ -0,0 +1,10 @@
+// Build a WebSocket URL for a same-origin path, deriving the scheme from the
+// page protocol: `wss://` when the page is served over HTTPS, `ws://` otherwise.
+// Hardcoding `ws://` breaks live updates behind any TLS-terminating proxy
+// (Cloudflare Tunnel, nginx, ngrok) — the browser blocks the insecure socket as
+// mixed content. The proxy forwards `wss://` to the origin's plain `ws://`, so
+// no server change is needed.
+export function wsUrl(path: string) {
+  const scheme = location.protocol === 'https:' ? 'wss' : 'ws'
+  return `${scheme}://${location.host}${path}`
+}