zero-http 0.2.0 → 0.2.2

package/documentation/public/index.html

@@ -6,9 +6,9 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1" />
 	<title>zero-http — demo & reference</title>
 	<meta name="description"
-		content="zero-http is a zero-dependency, Express-like HTTP server for Node.js with built-in parsers, static serving, and upload handling." />
+		content="zero-http is a zero-dependency, Express-like HTTP/HTTPS server for Node.js with built-in WebSocket, Server-Sent Events, body parsers, response compression, static serving, and upload handling." />
 	<meta name="keywords"
-		content="nodejs,http,server,express,expressjs,middleware,body-parser,multipart,uploads,static files,fetch,http client" />
+		content="nodejs,http,https,server,express,expressjs,middleware,body-parser,multipart,uploads,static files,fetch,http client,websocket,sse,server-sent events,compression,router" />
 	<meta name="author" content="Anthony Wiedman" />
 
 	<link rel="stylesheet" href="/styles.css" />
@@ -16,11 +16,11 @@
 	<link rel="stylesheet" href="/vendor/prism-toolbar.css" />
 	<link rel="stylesheet" href="/prism-overrides.css" />
 
-	<script src="/vendor/prism.min.js" async></script>
-	<script src="/vendor/prism-json.min.js" async></script>
-	<script src="/vendor/prism-javascript.min.js" async></script>
-	<script src="/vendor/prism-copy-to-clipboard.min.js" async></script>
-	<script src="/vendor/prism-toolbar.min.js" async></script>
+	<script src="/vendor/prism.min.js" defer></script>
+	<script src="/vendor/prism-json.min.js" defer></script>
+	<script src="/vendor/prism-javascript.min.js" defer></script>
+	<script src="/vendor/prism-copy-to-clipboard.min.js" defer></script>
+	<script src="/vendor/prism-toolbar.min.js" defer></script>
 
 	<script src="/scripts/helpers.js" defer></script>
 	<script src="/scripts/uploads.js" defer></script>
@@ -71,24 +71,30 @@
 		<aside class="toc-sidebar" aria-label="Table of contents">
 			<nav>
 				<div class="toc-toolbar">
+					<div class="toc-search-wrap">
+						<svg class="toc-search-icon" width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="2"/><path d="M11 11l4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+						<input id="toc-search" class="toc-search" type="text" placeholder="Filter…" autocomplete="off" spellcheck="false" />
+					</div>
+					<button class="toc-tool-btn" id="toc-toggle-acc" title="Collapse all" aria-label="Collapse all sections">
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 9l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+					</button>
 					<button class="toc-tool-btn" id="toc-top-btn" title="Back to top" aria-label="Scroll to top">
 						<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 13V3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M3 7l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
 					</button>
-					<button class="toc-tool-btn" id="toc-toggle-acc" title="Expand all" aria-label="Expand all sections">
-						<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 9l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-					</button>
 				</div>
 				<ul>
 					<li><a href="#features">Features</a></li>
 					<li><a href="#quickstart">Quickstart</a></li>
 					<li><a href="#options">Options</a></li>
-					<li><a href="#api-reference">API Reference</a></li>
-					<li><a href="#simple-examples">Simple Examples</a></li>
-					<li><a href="#playground">Playground</a>
+					<li class="toc-collapsible"><a href="#api-reference">API Reference</a></li>
+					<li class="toc-collapsible"><a href="#simple-examples">Simple Examples</a></li>
+					<li class="toc-collapsible"><a href="#playground">Playground</a>
 						<ul class="toc-sub">
 							<li class="toc-sub-item"><a href="#upload-testing">Upload multipart data</a></li>
 							<li class="toc-sub-item"><a href="#parser-tests">Parser tests</a></li>
 							<li class="toc-sub-item"><a href="#proxy-test">Proxy test</a></li>
+							<li class="toc-sub-item"><a href="#ws-chat">WebSocket chat</a></li>
+							<li class="toc-sub-item"><a href="#sse-viewer">SSE viewer</a></li>
 						</ul>
 					</li>
 				</ul>
@@ -112,78 +118,107 @@
 										<img class="icon-svg" src="/vendor/icons/zero.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Zero-dependency</h5>
-									<p>Small, Express-like API without external deps.</p>
+									<div class="feature-text"><h5>Zero-dependency</h5>
+									<p>Small, Express-like API without external deps.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/plug.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Pluggable parsers</h5>
-									<p>json(), urlencoded(), text(), raw() built-in.</p>
+									<div class="feature-text"><h5>Pluggable parsers</h5>
+									<p>json(), urlencoded(), text(), raw() built-in.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/stream.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Streaming uploads</h5>
-									<p>Multipart streaming to disk for large files.</p>
+									<div class="feature-text"><h5>Streaming uploads</h5>
+									<p>Multipart streaming to disk for large files.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/static.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Static serving</h5>
-									<p>Correct Content-Type handling and caching options.</p>
+									<div class="feature-text"><h5>Static serving</h5>
+									<p>Content-Type handling and cache options.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/fetch.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Built-in fetch</h5>
-									<p>Small server-side fetch replacement for HTTP requests.</p>
+									<div class="feature-text"><h5>Built-in fetch</h5>
+									<p>Server-side fetch with TLS passthrough.</p></div>
 								</div>
-							</div>
-						</div>
-						<div id="tab-behavior" class="tab-panel">
-							<div class="behavior-list">
-								<div class="behavior-step">
-									<div class="step-num">1</div>
-									<div class="step-body">
-										<h5>Registration order</h5>
-										<p>Routing and middleware run in the order they're registered—add parsers before
-											handlers.</p>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/websocket.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
 									</div>
+									<div class="feature-text"><h5>WebSocket</h5>
+									<p>RFC 6455 with ping/pong &amp; sub-protocols.</p></div>
 								</div>
-								<div class="behavior-step">
-									<div class="step-num">2</div>
-									<div class="step-body">
-										<h5>Body parsing</h5>
-										<p>Body parsers populate <code>req.body</code>; multipart uploads expose
-											<code>req.body.files</code> and <code>req.body.fields</code>.
-										</p>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/sse.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
 									</div>
+									<div class="feature-text"><h5>Server-Sent Events</h5>
+									<p>Auto-IDs, named events, keep-alive.</p></div>
 								</div>
-								<div class="behavior-step">
-									<div class="step-num">3</div>
-									<div class="step-body">
-										<h5>Handler model</h5>
-										<p>Handlers receive <code>req</code> and <code>res</code>. Use
-											<code>res.json()</code> or <code>res.send()</code> to respond.
-										</p>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/compress.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
 									</div>
+									<div class="feature-text"><h5>Compression</h5>
+									<p>Gzip/deflate with threshold &amp; filter.</p></div>
 								</div>
-								<div class="behavior-step">
-									<div class="step-num">4</div>
-									<div class="step-body">
-										<h5>Static middleware</h5>
-										<p>Serves files with Content-Type derived from extension and supports caching
-											options.</p>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/https.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
 									</div>
+									<div class="feature-text"><h5>HTTPS &amp; TLS</h5>
+									<p>Native HTTPS, req.secure, secure routing.</p></div>
+								</div>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/router.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
+									</div>
+									<div class="feature-text"><h5>Modular Router</h5>
+									<p>Sub-apps, chaining, introspection.</p></div>
+								</div>
+							</div>
+						</div>
+						<div id="tab-behavior" class="tab-panel">
+							<div class="pipeline">
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg></div>
+									<h5>Registration order</h5>
+									<p>Middleware runs in the order registered—add parsers before handlers.</p>
+								</div>
+								<div class="pipe-arrow" aria-hidden="true" style="--i:0"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div>
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><path d="M9 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2"/><path d="M15 3h2a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2"/></svg></div>
+									<h5>Body parsing</h5>
+									<p>Populates <code>req.body</code>; multipart exposes <code>req.body.files</code> and <code>req.body.fields</code>.</p>
+								</div>
+								<div class="pipe-arrow" aria-hidden="true" style="--i:1"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div>
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg></div>
+									<h5>Handler model</h5>
+									<p>Handlers receive <code>req</code> + <code>res</code>. Respond with <code>res.json()</code> or <code>res.send()</code>.</p>
+								</div>
+								<div class="pipe-arrow" aria-hidden="true" style="--i:2"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div>
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
+									<h5>Static middleware</h5>
+									<p>Serves files with Content-Type from extension and supports caching options.</p>
 								</div>
 							</div>
 						</div>
@@ -401,6 +436,56 @@ node test/test.js
 				</div>
 			</div>
 
+			<div class="card play-card constrained">
+				<div class="card-head">
+					<h3 id="ws-chat">WebSocket Chat</h3>
+					<div class="small muted">Connect to the built-in WebSocket server and send messages in real time.</div>
+				</div>
+				<div class="card-body">
+					<div class="playgrid" style="grid-template-columns:1fr">
+						<div class="play" id="wsChat">
+							<div style="display:flex;gap:8px;align-items:end;margin-bottom:8px">
+								<label style="flex:1">Name
+									<input id="wsName" class="textInput" placeholder="anon" value="" />
+								</label>
+								<button id="wsConnectBtn" class="btn primary" type="button">Connect</button>
+								<button id="wsDisconnectBtn" class="btn warn" type="button" disabled>Disconnect</button>
+							</div>
+							<div id="wsMessages" class="result mono" style="min-height:120px;max-height:260px;overflow-y:auto;margin-bottom:8px;white-space:pre-wrap"></div>
+							<div style="display:flex;gap:8px">
+								<input id="wsMsgInput" class="textInput" placeholder="Type a message…" disabled style="flex:1" />
+								<button id="wsSendBtn" class="btn" type="button" disabled>Send</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="card play-card constrained">
+				<div class="card-head">
+					<h3 id="sse-viewer">SSE Event Viewer</h3>
+					<div class="small muted">Subscribe to the Server-Sent Events endpoint and view incoming events live. Use the broadcast form to push a custom event to all subscribers.</div>
+				</div>
+				<div class="card-body">
+					<div class="playgrid" style="grid-template-columns:1fr">
+						<div class="play" id="sseViewer">
+							<div style="display:flex;gap:8px;align-items:end;margin-bottom:8px">
+								<button id="sseConnectBtn" class="btn primary" type="button">Connect</button>
+								<button id="sseDisconnectBtn" class="btn warn" type="button" disabled>Disconnect</button>
+								<span id="sseStatus" class="small muted" style="margin-left:8px">Disconnected</span>
+							</div>
+							<div id="sseMessages" class="result mono" style="min-height:120px;max-height:260px;overflow-y:auto;margin-bottom:8px;white-space:pre-wrap"></div>
+							<div style="display:flex;gap:8px;align-items:end">
+								<label style="flex:1">Broadcast message (JSON)
+									<textarea id="sseBroadcastInput" class="textInput" rows="2">{"hello":"world"}</textarea>
+								</label>
+								<button id="sseBroadcastBtn" class="btn" type="button">Broadcast</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="card footnote" style="max-width:1300px;margin:18px auto;">
 				<p class="muted">This demo doubles as a readable API reference and playground — try uploading files,
 					inspect the returned JSON, and use the playground to test parsers.</p>

package/documentation/public/scripts/data-sections.js

@@ -12,7 +12,7 @@
  *             highlightAllPre)
  */
 
-/* ── TOC Helpers ───────────────────────────────────────────────────────────── */
+/* -- TOC Helpers ------------------------------------------------------------- */
 
 /**
  * Find a top-level `<li>` in the sidebar TOC whose link matches the given
@@ -36,6 +36,25 @@ function populateTocSub(href, items)
     const existing = parentLi.querySelector('ul.toc-sub');
     if (existing) existing.remove();
 
+    /* Ensure parent has collapsible behaviour */
+    if (!parentLi.classList.contains('toc-collapsible'))
+    {
+        parentLi.classList.add('toc-collapsible', 'toc-collapsed');
+        parentLi.style.paddingLeft = '20px';
+
+        const toggle = document.createElement('button');
+        toggle.className = 'toc-collapse-btn';
+        toggle.setAttribute('aria-label', 'Toggle section');
+        toggle.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+        toggle.addEventListener('click', (e) =>
+        {
+            e.preventDefault();
+            e.stopPropagation();
+            parentLi.classList.toggle('toc-collapsed');
+        });
+        parentLi.insertBefore(toggle, parentLi.firstChild);
+    }
+
     const sub = document.createElement('ul');
     sub.className = 'toc-sub';
 
@@ -56,7 +75,7 @@ function populateTocSub(href, items)
     parentLi.appendChild(sub);
 }
 
-/* ── API Reference ─────────────────────────────────────────────────────────── */
+/* -- API Reference ----------------------------------------------------------- */
 
 /**
  * Render a list of API items into the `#api-items` container and Prism-highlight
@@ -196,7 +215,7 @@ async function loadApiReference()
     } catch (e) { }
 }
 
-/* ── Options Table ─────────────────────────────────────────────────────────── */
+/* -- Options Table ----------------------------------------------------------- */
 
 /**
  * Fetch the options JSON and render a `<table>` into `#options-items`.
@@ -236,7 +255,7 @@ async function loadOptions()
     } catch (e) { console.error('loadOptions error', e); }
 }
 
-/* ── Code Examples ─────────────────────────────────────────────────────────── */
+/* -- Code Examples ----------------------------------------------------------- */
 
 /**
  * Fetch the examples JSON, render each as a collapsible accordion, and

package/documentation/public/scripts/helpers.js

@@ -4,7 +4,7 @@
  * documentation scripts. Loaded first so every other module can rely on these.
  */
 
-/* ── DOM Selectors ─────────────────────────────────────────────────────────── */
+/* -- DOM Selectors ----------------------------------------------------------- */
 
 /**
  * Query a single element by CSS selector.
@@ -34,7 +34,7 @@ function on(el, evt, cb)
     el.addEventListener(evt, cb);
 }
 
-/* ── String Utilities ──────────────────────────────────────────────────────── */
+/* -- String Utilities -------------------------------------------------------- */
 
 /**
  * Escape HTML special characters for safe insertion into the DOM.
@@ -76,7 +76,7 @@ function formatBytes(n)
     return (n / Math.pow(k, i)).toFixed(i ? 1 : 0) + ' ' + sizes[i];
 }
 
-/* ── JSON / Code Rendering ─────────────────────────────────────────────────── */
+/* -- JSON / Code Rendering --------------------------------------------------- */
 
 /**
  * Build a highlighted `<pre>` block containing pretty-printed JSON.
@@ -100,7 +100,7 @@ function showJsonResult(container, obj)
     try { highlightAllPre(); } catch (e) { }
 }
 
-/* ── Prism / Code-Block Helpers ────────────────────────────────────────────── */
+/* -- Prism / Code-Block Helpers ---------------------------------------------- */
 
 /**
  * Trigger Prism syntax highlighting on all `<pre class="code">` blocks, or

package/documentation/public/scripts/playground.js

@@ -1,6 +1,7 @@
 /**
  * playground.js
  * Echo playground forms — JSON, URL-encoded, and plain-text body parsers.
+ * WebSocket chat client and SSE event viewer.
  *
  * Depends on: helpers.js (provides $, on, escapeHtml, showJsonResult,
  *             highlightAllPre)
@@ -68,4 +69,207 @@ function initPlayground()
         playResult.innerHTML = `<pre class="code"><code>${escapeHtml(text)}</code></pre>`;
         try { highlightAllPre(); } catch (e) { }
     });
+
+    /* --- WebSocket Chat --- */
+    initWsChat();
+
+    /* --- SSE Viewer --- */
+    initSseViewer();
+}
+
+/* ------------------------------------------------------------------ */
+/*  WebSocket Chat                                                     */
+/* ------------------------------------------------------------------ */
+function initWsChat()
+{
+    let ws = null;
+    const connectBtn = $('#wsConnectBtn');
+    const disconnectBtn = $('#wsDisconnectBtn');
+    const nameInput = $('#wsName');
+    const msgInput = $('#wsMsgInput');
+    const sendBtn = $('#wsSendBtn');
+    const messages = $('#wsMessages');
+
+    if (!connectBtn) return; // guard if elements not in DOM
+
+    function appendMsg(html)
+    {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        messages.appendChild(div);
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    function setConnected(connected)
+    {
+        connectBtn.disabled = connected;
+        disconnectBtn.disabled = !connected;
+        msgInput.disabled = !connected;
+        sendBtn.disabled = !connected;
+        nameInput.disabled = connected;
+    }
+
+    on(connectBtn, 'click', () =>
+    {
+        const name = encodeURIComponent(nameInput.value || 'anon');
+        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        // Use the direct HTTPS host+port when behind a reverse proxy that
+        // doesn't forward WebSocket upgrades.
+        const wsHost = location.port ? location.host : (location.hostname + ':7273');
+        ws = new WebSocket(`${proto}//${wsHost}/ws/chat?name=${name}`);
+
+        ws.onopen = () =>
+        {
+            setConnected(true);
+            appendMsg('<span style="color:#6f6">● Connected</span>');
+        };
+
+        ws.onmessage = (e) =>
+        {
+            try
+            {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'system')
+                {
+                    appendMsg(`<span style="color:#aaa">» ${escapeHtml(msg.text)}</span>`);
+                } else
+                {
+                    appendMsg(`<strong>${escapeHtml(msg.name)}</strong>: ${escapeHtml(msg.text)}`);
+                }
+            } catch (_)
+            {
+                appendMsg(escapeHtml(e.data));
+            }
+        };
+
+        ws.onclose = () =>
+        {
+            setConnected(false);
+            appendMsg('<span style="color:#f66">● Disconnected</span>');
+            ws = null;
+        };
+
+        ws.onerror = () =>
+        {
+            appendMsg('<span style="color:#f66">● Connection error</span>');
+        };
+    });
+
+    on(disconnectBtn, 'click', () =>
+    {
+        if (ws) ws.close();
+    });
+
+    on(sendBtn, 'click', () =>
+    {
+        if (ws && ws.readyState === WebSocket.OPEN && msgInput.value.trim())
+        {
+            ws.send(msgInput.value.trim());
+            msgInput.value = '';
+        }
+    });
+
+    on(msgInput, 'keydown', (e) =>
+    {
+        if (e.key === 'Enter')
+        {
+            e.preventDefault();
+            sendBtn.click();
+        }
+    });
+}
+
+/* ------------------------------------------------------------------ */
+/*  SSE Event Viewer                                                   */
+/* ------------------------------------------------------------------ */
+function initSseViewer()
+{
+    let es = null;
+    const connectBtn = $('#sseConnectBtn');
+    const disconnectBtn = $('#sseDisconnectBtn');
+    const status = $('#sseStatus');
+    const messages = $('#sseMessages');
+    const broadcastBtn = $('#sseBroadcastBtn');
+    const broadcastInput = $('#sseBroadcastInput');
+
+    if (!connectBtn) return; // guard
+
+    function appendMsg(html)
+    {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        messages.appendChild(div);
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    function setConnected(connected)
+    {
+        connectBtn.disabled = connected;
+        disconnectBtn.disabled = !connected;
+        status.textContent = connected ? 'Connected' : 'Disconnected';
+        status.style.color = connected ? '#6f6' : '';
+    }
+
+    on(connectBtn, 'click', () =>
+    {
+        es = new EventSource('/sse/events');
+
+        es.onopen = () =>
+        {
+            setConnected(true);
+            appendMsg('<span style="color:#6f6">● SSE connected</span>');
+        };
+
+        es.onmessage = (e) =>
+        {
+            const ts = new Date().toLocaleTimeString();
+            appendMsg(`<span style="color:#aaa">[${ts}]</span> ${escapeHtml(e.data)}`);
+        };
+
+        es.addEventListener('broadcast', (e) =>
+        {
+            const ts = new Date().toLocaleTimeString();
+            appendMsg(`<span style="color:#ff0">[${ts} broadcast]</span> ${escapeHtml(e.data)}`);
+        });
+
+        es.onerror = () =>
+        {
+            if (es.readyState === EventSource.CLOSED)
+            {
+                setConnected(false);
+                appendMsg('<span style="color:#f66">● SSE closed</span>');
+                es = null;
+            } else
+            {
+                appendMsg('<span style="color:#fa0">● SSE reconnecting…</span>');
+            }
+        };
+    });
+
+    on(disconnectBtn, 'click', () =>
+    {
+        if (es) { es.close(); es = null; }
+        setConnected(false);
+        appendMsg('<span style="color:#f66">● Disconnected</span>');
+    });
+
+    on(broadcastBtn, 'click', async () =>
+    {
+        const raw = broadcastInput.value || '{}';
+        let body;
+        try { body = JSON.parse(raw); }
+        catch (err)
+        {
+            appendMsg(`<span style="color:#f66">Invalid JSON: ${escapeHtml(err.message)}</span>`);
+            return;
+        }
+
+        const r = await fetch('/sse/broadcast', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        });
+        const j = await r.json();
+        appendMsg(`<span style="color:#aaa">» Broadcast sent to ${j.sent} client(s)</span>`);
+    });
 }