initial implementation of screen sharing via cf workers

.gitignore

@@ -36,3 +36,5 @@ node_modules
 .env.development.local
 .env.test.local
 .env.production.local
+
+.wrangler

AGENTS.md

@@ -0,0 +1,29 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- App source lives in `src/` with `components/` (UI), `hooks/` (logic hooks), `commands/` (SysEx/USB ops), `services/` (I/O + side effects), and `lib/` utilities. Entry is `src/main.tsx`, styles in `src/styles/` and `src/index.css`, PWA service worker in `src/sw.ts`.
+- Tests sit in `src/test/` using Vitest + Testing Library; end-to-end specs live in `cypress/e2e/`. Static assets are in `public/` and `src/assets/`. Vite/Tailwind config is in `vite.config.ts` and `tailwind.config.js`.
+
+## Build, Test, and Development Commands
+- `yarn install` — install deps (repo targets Node >= 21.1 + Yarn 4; use `corepack enable` if needed).
+- `yarn dev` — run Vite dev server (HMR on port 5173 by default).
+- `yarn build` — production bundle to `dist/`.
+- `yarn preview` — serve the built bundle locally.
+- `yarn typecheck` — TypeScript no-emit check.
+- `yarn test` / `yarn test:watch` — Vitest suite under `src/test/`.
+- `yarn lint` — ESLint (Preact config).
+- `yarn pwa-check` — ensures `dist/` contains `sw.js` and `manifest.webmanifest`.
+
+## Coding Style & Naming Conventions
+- TypeScript + Preact with TSX; prefer functional components. Component files and exports use `PascalCase`, hooks `useCamelCase`, utilities `camelCase`.
+- Prettier formatting (2-space indent, semicolons on, single quotes via ESLint). Avoid orphaned default exports; favor named exports for reuse.
+- Tailwind is used for layout/styling; keep variants/classes close to the elements they affect and co-locate component-specific styles with the component.
+
+## Testing Guidelines
+- Place unit/integration specs beside code in `src/test/` with `*.test.ts` or `*.test.tsx`. Prefer Testing Library queries over DOM selectors; stub network/USB surfaces in `services/`.
+- E2E specs live in `cypress/e2e/`; use fixtures from `cypress/fixtures/` and add custom commands in `cypress/support/commands.ts`.
+- Cover new user-visible behaviors and edge cases (file operations, PWA offline paths). Keep tests deterministic—mock time and random sources when relevant.
+
+## Commit & Pull Request Guidelines
+- Commit history mixes imperative statements and Conventional Commits (`feat: ...`, `Fix ...`). Prefer imperative, present-tense subjects; include a type prefix when it clarifies scope.
+- Pull requests: describe the change and rationale, note affected areas (UI, file operations, PWA), link issues, and include before/after screenshots or recordings for UI tweaks. Call out test coverage added or why it is not needed.

DEVELOPMENT.md

@@ -53,6 +53,38 @@ If port 5173 is taken Vite will pick the next free port and print it to the cons
 
 ---
 
+## Screen streaming (local relay / LAN testing)
+
+Screen streaming uses a WebSocket relay. For local dev we provide a dependency-free Node relay that speaks the same protocol as the Cloudflare Durable Object.
+
+### Quickstart
+
+Terminal A (relay):
+
+```bash
+node server.mjs
+```
+
+Terminal B (frontend):
+
+```bash
+yarn dev --host
+```
+
+Then:
+
+1. On the desktop (streamer), open DEx and click **Screen streaming**.
+2. Use the stable dev room `local-local`.
+3. Set **Share base URL** to the LAN URL printed by Vite (e.g. `http://192.168.1.10:5173`) so the QR/link works on mobile.
+4. On mobile (same network), open the Join URL from the modal (viewer mode).
+
+Notes:
+
+- On local/LAN hostnames, DEx connects to the relay at port `8787` by default (no `?streamHost=...` needed).
+- If you serve the frontend over HTTPS (secure context), the relay must be reachable via `wss://...` (run `server/relay.mjs` with `--tls-cert/--tls-key`).
+
+---
+
 ## Static type-checking
 
 ```bash

README.md

@@ -24,6 +24,7 @@ https://github.com/user-attachments/assets/be507463-47b3-4adc-a98c-2b184429e9fa
 
 - **👀 Dual Display Mirroring**: View _both_ the OLED and the classic 7-Segment displays in real-time. Perfect for seeing intricate details or getting a quick overview.
 - **📱 Fullscreen Mode**: Enter a distraction-free fullscreen view that works beautifully on both desktop and mobile devices! Perfect for performances or when projecting your Deluge's display to an audience.
+- **📡 Screen Streaming**: Share the Deluge display to other devices via a room link / QR code (one-way; viewers don’t need WebMIDI). See `docs/screen-streaming.md`.
 - **🎨 Customizable OLED View**: Tailor the OLED display to your liking! Adjust pixel scaling (size) and choose custom foreground/background colors. Settings are saved automatically!
 - **↔️ Resizable Display**: Instantly resize the mirrored display canvas with dedicated buttons for the perfect fit on your screen.
 - **⚙️ Advanced Settings Drawer**: Access technical controls like display customization, manual refresh triggers, ping tests, and decoding tests.
@@ -80,6 +81,7 @@ https://github.com/user-attachments/assets/be507463-47b3-4adc-a98c-2b184429e9fa
 - **Get Debug Messages**: Manually requests the latest debug info from the Deluge.
 - **Monitor UI Changes**: Toggles the UI monitoring mode on/off.
 - **Full Screen**: Enters a distraction-free fullscreen mode that optimizes the display for your current device and screen size. Press 'ESC' or tap the button again to exit.
+- **Screen Streaming**: Share the Deluge display to other devices via a room link / QR code (one-way; viewers don’t need WebMIDI). See `docs/screen-streaming.md`.
 - **📸 Screenshot**: Download a snapshot of the current canvas as a PNG by clicking the camera icon or pressing 's'.
 - **📋 Copy Base64**: Copy the current OLED display as a gzipped, base64-encoded string (in a markdown directive) by clicking the copy icon or pressing 'c'.
 - **❓ Keyboard Help**: View all available keyboard shortcuts by clicking the question mark icon or pressing '?'.
@@ -98,6 +100,15 @@ DEx provides convenient keyboard shortcuts for common actions:
 - **Escape**: Clear file browser search
 - **?**: Toggle keyboard shortcuts help overlay
 
+### Screen Streaming (Viewer mode)
+
+Screen streaming lets you mirror the Deluge display to other devices (e.g. iOS).
+
+- **Streamer** (Chrome/Edge): connect your Deluge → click **Screen streaming** → **Start streaming** → share the Join URL / QR.
+- **Viewer** (any browser / iOS Safari): open the Join URL and enter the password if required.
+
+See `docs/screen-streaming.md` for local relay (LAN) and Cloudflare deployment details.
+
 ### Advanced Settings Drawer
 
 - **OLED Display Settings**: Customize pixel size and colors. Click 'Apply Settings' to see changes and save them.
@@ -108,13 +119,12 @@ DEx provides convenient keyboard shortcuts for common actions:
 
 ### Mobile Usage Tips
 
-**iOS currently doesn't support WebMIDI in its common browsers (Safari, Chrome, etc.).
-Although some third-party browsers claim patched support, I can't recommend any because I don't use iPhone.**
+**iOS doesn’t support WebMIDI in common browsers (Safari/Chrome), so you can’t connect a Deluge directly.
+However, you can still view the Deluge display on iOS using Screen Streaming (Viewer mode).**
 
 - For the best experience on mobile devices, use the **Full Screen** button to maximize the display.
 - On Android, you may need a USB OTG (On-The-Go) adapter to connect your Deluge.
   Although for me, it works with a regular USB-C to USB-B cable.
--
 - Rotate your device to landscape orientation for an optimal viewing experience.
 - Press 'f' on external keyboards or tap the Full Screen button again to exit fullscreen mode.
 

cypress/e2e/01-midi-connection-display.cy.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference path="../support/commands.ts" />
 
 describe("MIDI Connection and Basic Display", () => {
   const DELUGE_MIDI_PORT_NAME = "Deluge Port 1"; // As per user update