npm - @rubriclab/bunl - Versions diffs - 0.2.0 → 0.2.1 - Mend

@rubriclab/bunl 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/.env.example CHANGED Viewed

@@ -1,4 +1,4 @@
 PORT=1234
 SCHEME=https
-DOMAIN=example.so
-HOST=localhost
+DOMAIN=bunl.sh
+HOST=localhost

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,3 @@
+- [2026-02-06] [Bump version](https://github.com/rubriclab/bunl/commit/0043caed41428d060517223cbb8d72fe52813692)
+# Changelog

package/README.md CHANGED Viewed

@@ -1,78 +1,26 @@
 # bunl
-## A Bun WebSocket re-write of LocalTunnel
-### Usage
-To try it:
-```bash
-bun x bunl -p 3000 -d dev.rubric.me -s my-name
-```
-### Development
-To install dependencies:
-```bash
-bun i
-```
-To run the server:
-```bash
-bun dev:server
-```
-(Optional) to run a dummy process on localhost:3000:
+Expose localhost to the world. Bun-native WebSocket tunnel.
 ```bash
-bun demo
+bun x bunl -p 3000
 ```
-To run the client:
+## Options
-```bash
-bun client -p 3000
-```
+| Flag | Short | Default | Description |
+| --- | --- | --- | --- |
+| `--port` | `-p` | `3000` | Local port to expose |
+| `--domain` | `-d` | `bunl.sh` | Tunnel server |
+| `--subdomain` | `-s` | random | Requested subdomain |
+| `--open` | `-o` | `false` | Open URL in browser |
-With full args:
+## Development
 ```bash
-bun client --port 3000 --domain example.so --subdomain my-subdomain --open
-```
-Or in shortform:
-```bash
-bun client -p 3000 -d example.so -s my-subdomain -o
-```
-The options:
-- `port` / `p` the localhost port to expose eg. **3000**
-- `domain` / `d` the hostname of the server Bunl is running on eg. **example.so**
-- `subdomain` / `s` the public URL to request eg. **my-subdomain**.example.so
-- `open` / `o` to auto-open your public URL in the browser
-### [WIP] Deployment
-To build the client code:
-```bash
-bun run build
-```
-To deploy the server, for example on [Fly](https://fly.io):
-```bash
-fly launch && fly deploy
-```
-Making sure to set `DOMAIN` to your domain:
-```bash
-fly secrets set DOMAIN=example.so
+bun i
+bun dev:server   # tunnel server on :1234
+bun demo         # demo app on :3000
+bun client       # connect demo to server
+bun test:e2e     # end-to-end tests
 ```
-Open to PRs!

package/build/client.js CHANGED Viewed

@@ -19,8 +19,46 @@ function fromBase64(str) {
   const buf = Buffer.from(str, "base64");
   return new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength);
 }
+function page(title, body) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title} \u2014 bunl</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	background: #fff;
+	color: #000;
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+}
+main { max-width: 480px; width: 100%; }
+h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1rem; }
+p { color: #666; line-height: 1.6; margin-bottom: 0.75rem; }
+code { background: #f5f5f5; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
+a { color: #000; }
+</style>
+</head>
+<body>
+<main>
+${body}
+</main>
+</body>
+</html>`;
+}
 // client.ts
+function badGatewayHtml(port) {
+  return page("Bad Gateway", `<h1>Bad Gateway</h1>
+<p>Could not reach <code>localhost:${port}</code>.</p>
+<p>Make sure your local server is running.</p>`);
+}
 async function main({
   port,
   domain,
@@ -80,9 +118,10 @@ async function main({
         socket.send(JSON.stringify(response));
       } catch (err) {
         console.error(`\x1B[31mERR\x1B[0m ${req.method} ${req.pathname}: ${err}`);
+        const html = badGatewayHtml(port || "3000");
         const response = {
-          body: toBase64(new TextEncoder().encode(`Failed to reach localhost:${port} \u2014 ${err}`).buffer),
-          headers: { "content-type": "text/plain" },
+          body: toBase64(new TextEncoder().encode(html).buffer),
+          headers: { "content-type": "text/html; charset=utf-8" },
           id: req.id,
           status: 502,
           statusText: "Bad Gateway",
@@ -108,7 +147,7 @@ var { values } = parseArgs({
   allowPositionals: true,
   args: process.argv,
   options: {
-    domain: { default: "localhost:1234", short: "d", type: "string" },
+    domain: { default: "bunl.sh", short: "d", type: "string" },
     open: { short: "o", type: "boolean" },
     port: { default: "3000", short: "p", type: "string" },
     subdomain: { short: "s", type: "string" },
@@ -121,7 +160,7 @@ if (values.version) {
   process.exit();
 }
 main({
-  domain: values.domain || "localhost:1234",
+  domain: values.domain || "bunl.sh",
   open: values.open || false,
   port: values.port || "3000",
   subdomain: values.subdomain || ""

package/bun.lock CHANGED Viewed

@@ -6,10 +6,14 @@
       "name": "@rubriclab/bunl",
       "dependencies": {
         "@rubriclab/config": "^0.0.24",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
       },
       "devDependencies": {
         "@rubriclab/package": "^0.0.124",
         "@types/bun": "latest",
+        "@types/react": "^19.2.13",
+        "@types/react-dom": "^19.2.3",
       },
     },
   },
@@ -84,8 +88,14 @@
     "@types/node": ["@types/node@25.2.1", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-CPrnr8voK8vC6eEtyRzvMpgp3VyVRhgclonE7qYi6P9sXwYb59ucfrnmFBTaP0yUi8Gk4yZg/LlTJULGxvTNsg=="],
+    "@types/react": ["@types/react@19.2.13", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ=="],
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
     "bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="],
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
     "enhanced-resolve": ["enhanced-resolve@5.19.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.0" } }, "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg=="],
@@ -126,6 +136,12 @@
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
+    "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
+    "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
     "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],

package/client.ts CHANGED Viewed

@@ -1,6 +1,15 @@
 import { parseArgs } from 'node:util'
 import type { TunnelInit, TunnelRequest, TunnelResponse } from './types'
-import { fromBase64, openBrowser, toBase64 } from './utils'
+import { fromBase64, openBrowser, page, toBase64 } from './utils'
+function badGatewayHtml(port: string) {
+	return page(
+		'Bad Gateway',
+		`<h1>Bad Gateway</h1>
+<p>Could not reach <code>localhost:${port}</code>.</p>
+<p>Make sure your local server is running.</p>`
+	)
+}
 async function main({
 	port,
@@ -18,8 +27,6 @@ async function main({
 		...(subdomain ? { subdomain } : {})
 	}).toString()
-	// Auto-detect ws:// vs wss:// — use secure WebSocket for anything
-	// that isn't localhost or an explicit IP
 	const isLocal = /^(localhost|127\.|0\.0\.0\.0|\[::1\])/.test(domain || '')
 	const wsScheme = isLocal ? 'ws' : 'wss'
 	const serverUrl = `${wsScheme}://${domain}?${params}`
@@ -30,7 +37,6 @@ async function main({
 	socket.addEventListener('message', async event => {
 		const data = JSON.parse(event.data as string)
-		// Initial connection — server tells us our public URL
 		if (data.type === 'init') {
 			const init = data as TunnelInit
 			console.log(`\n↪ Your URL: \x1b[32m${init.url}\x1b[0m\n`)
@@ -38,17 +44,14 @@ async function main({
 			return
 		}
-		// Incoming tunnel request — proxy to local server
 		if (data.type === 'request') {
 			const req = data as TunnelRequest
 			const now = performance.now()
 			try {
-				// Decode base64 request body
 				const reqBody =
 					req.body && req.method !== 'GET' && req.method !== 'HEAD' ? fromBase64(req.body) : null
-				// Remove headers that would conflict with the local fetch
 				const fwdHeaders = { ...req.headers }
 				delete fwdHeaders.host
 				delete fwdHeaders.connection
@@ -63,7 +66,6 @@ async function main({
 				const elapsed = (performance.now() - now).toFixed(1)
 				console.log(`\x1b[32m${req.method}\x1b[0m ${req.pathname} → ${res.status} (${elapsed}ms)`)
-				// Read response as binary, encode to base64
 				const resBody = await res.arrayBuffer()
 				const headers: Record<string, string> = {}
 				res.headers.forEach((v, k) => {
@@ -83,9 +85,10 @@ async function main({
 			} catch (err) {
 				console.error(`\x1b[31mERR\x1b[0m ${req.method} ${req.pathname}: ${err}`)
+				const html = badGatewayHtml(port || '3000')
 				const response: TunnelResponse = {
-					body: toBase64(new TextEncoder().encode(`Failed to reach localhost:${port} — ${err}`).buffer),
-					headers: { 'content-type': 'text/plain' },
+					body: toBase64(new TextEncoder().encode(html).buffer),
+					headers: { 'content-type': 'text/html; charset=utf-8' },
 					id: req.id,
 					status: 502,
 					statusText: 'Bad Gateway',
@@ -115,7 +118,7 @@ const { values } = parseArgs({
 	allowPositionals: true,
 	args: process.argv,
 	options: {
-		domain: { default: 'localhost:1234', short: 'd', type: 'string' },
+		domain: { default: 'bunl.sh', short: 'd', type: 'string' },
 		open: { short: 'o', type: 'boolean' },
 		port: { default: '3000', short: 'p', type: 'string' },
 		subdomain: { short: 's', type: 'string' },
@@ -130,7 +133,7 @@ if (values.version) {
 }
 main({
-	domain: values.domain || 'localhost:1234',
+	domain: values.domain || 'bunl.sh',
 	open: values.open || false,
 	port: values.port || '3000',
 	subdomain: values.subdomain || ''

package/demo.tsx ADDED Viewed

@@ -0,0 +1,127 @@
+import { serve } from 'bun'
+import { renderToStaticMarkup } from 'react-dom/server'
+const port = Number(Bun.env.DEMO_PORT) || 3000
+const PNG_1PX = Buffer.from(
+	'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==',
+	'base64'
+)
+const FAKE_FONT = (() => {
+	const buf = Buffer.alloc(256)
+	for (let i = 0; i < 256; i++) buf[i] = i
+	return buf
+})()
+const css = `* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+body {
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	background: #fff;
+	color: #000;
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+}
+main {
+	max-width: 480px;
+	width: 100%;
+}
+h1 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	letter-spacing: -0.02em;
+	margin-bottom: 1rem;
+}
+p {
+	color: #666;
+	margin-bottom: 1.5rem;
+	line-height: 1.6;
+}
+img {
+	display: block;
+	margin-bottom: 1.5rem;
+	border: 1px solid #eee;
+}
+nav a {
+	color: #000;
+	text-decoration: none;
+	border-bottom: 1px solid #ccc;
+}
+nav a:hover {
+	border-color: #000;
+}
+nav span {
+	color: #ccc;
+	margin: 0 0.5rem;
+}`
+function Page() {
+	return (
+		<html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<title>bunl</title>
+				<link rel="stylesheet" href="/style.css" />
+			</head>
+			<body>
+				<main>
+					<h1>bunl</h1>
+					<p>Served through a tunnel.</p>
+					<img src="/image.png" alt="test" width={100} height={100} />
+					<nav>
+						<a href="/api/health">API</a>
+						<span>·</span>
+						<a href="/font.woff2">Font</a>
+					</nav>
+				</main>
+			</body>
+		</html>
+	)
+}
+const html = `<!DOCTYPE html>${renderToStaticMarkup(<Page />)}`
+serve({
+	fetch(req) {
+		const { pathname } = new URL(req.url)
+		if (pathname === '/style.css')
+			return new Response(css, { headers: { 'content-type': 'text/css; charset=utf-8' } })
+		if (pathname === '/image.png')
+			return new Response(new Uint8Array(PNG_1PX), { headers: { 'content-type': 'image/png' } })
+		if (pathname === '/font.woff2')
+			return new Response(new Uint8Array(FAKE_FONT), { headers: { 'content-type': 'font/woff2' } })
+		if (pathname === '/api/health') return Response.json({ status: 'ok', timestamp: Date.now() })
+		if (pathname === '/echo' && req.method === 'POST')
+			return new Response(req.body, {
+				headers: {
+					'content-type': req.headers.get('content-type') || 'application/octet-stream'
+				}
+			})
+		return new Response(html, { headers: { 'content-type': 'text/html; charset=utf-8' } })
+	},
+	port
+})
+console.log(`Demo server at http://localhost:${port}`)

package/e2e.test.ts CHANGED Viewed

@@ -5,11 +5,6 @@ const SERVER_PORT = 9100
 const DEMO_PORT = 9101
 const SUBDOMAIN = 'e2e'
-/**
- * Make a request through the tunnel using Host-header routing.
- * This avoids needing wildcard DNS (*.localhost) to resolve,
- * which doesn't work in all environments.
- */
 function tunnelFetch(path: string, init?: RequestInit): Promise<Response> {
 	const headers = new Headers(init?.headers as HeadersInit)
 	headers.set('host', `${SUBDOMAIN}.localhost:${SERVER_PORT}`)
@@ -23,7 +18,6 @@ let serverProc: Subprocess
 let demoProc: Subprocess
 let clientProc: Subprocess
-/** Wait until a URL responds (or timeout). */
 async function waitFor(url: string, timeoutMs = 10_000): Promise<void> {
 	const start = Date.now()
 	while (Date.now() - start < timeoutMs) {
@@ -37,7 +31,6 @@ async function waitFor(url: string, timeoutMs = 10_000): Promise<void> {
 	throw new Error(`Timed out waiting for ${url}`)
 }
-/** Wait until a tunnel subdomain is connected (server returns non-404). */
 async function waitForTunnel(timeoutMs = 15_000): Promise<void> {
 	const start = Date.now()
 	while (Date.now() - start < timeoutMs) {
@@ -45,7 +38,7 @@ async function waitForTunnel(timeoutMs = 15_000): Promise<void> {
 			const res = await tunnelFetch('/')
 			if (res.status !== 404) return
 		} catch {
-			// not ready yet
+			/* not ready */
 		}
 		await Bun.sleep(300)
 	}
@@ -53,7 +46,6 @@ async function waitForTunnel(timeoutMs = 15_000): Promise<void> {
 }
 beforeAll(async () => {
-	// 1. Start the tunnel server
 	serverProc = Bun.spawn(['bun', 'run', 'server.ts'], {
 		cwd: import.meta.dir,
 		env: {
@@ -66,21 +58,18 @@ beforeAll(async () => {
 		stdout: 'pipe'
 	})
-	// 2. Start the demo webserver
-	demoProc = Bun.spawn(['bun', 'run', 'demo.ts'], {
+	demoProc = Bun.spawn(['bun', 'run', 'demo.tsx'], {
 		cwd: import.meta.dir,
 		env: { ...process.env, DEMO_PORT: String(DEMO_PORT) },
 		stderr: 'pipe',
 		stdout: 'pipe'
 	})
-	// Wait for both to be up
 	await Promise.all([
 		waitFor(`http://localhost:${SERVER_PORT}/?new`),
 		waitFor(`http://localhost:${DEMO_PORT}/api/health`)
 	])
-	// 3. Start the tunnel client
 	clientProc = Bun.spawn(
 		[
 			'bun',
@@ -101,7 +90,6 @@ beforeAll(async () => {
 		}
 	)
-	// Wait for the tunnel to be live
 	await waitForTunnel()
 })
@@ -117,7 +105,7 @@ describe('e2e tunnel', () => {
 		expect(res.status).toBe(200)
 		expect(res.headers.get('content-type')).toContain('text/html')
 		const body = await res.text()
-		expect(body).toContain('<h1>bunl tunnel works!</h1>')
+		expect(body).toContain('<h1>bunl</h1>')
 	})
 	test('serves CSS through tunnel', async () => {
@@ -134,7 +122,6 @@ describe('e2e tunnel', () => {
 		expect(res.headers.get('content-type')).toBe('image/png')
 		const buf = await res.arrayBuffer()
 		const bytes = new Uint8Array(buf)
-		// PNG magic bytes: 0x89 0x50 0x4E 0x47
 		expect(bytes[0]).toBe(0x89)
 		expect(bytes[1]).toBe(0x50)
 		expect(bytes[2]).toBe(0x4e)
@@ -147,7 +134,6 @@ describe('e2e tunnel', () => {
 		expect(res.headers.get('content-type')).toBe('font/woff2')
 		const buf = await res.arrayBuffer()
 		const bytes = new Uint8Array(buf)
-		// Our fake font is 256 bytes: [0, 1, 2, ..., 255]
 		expect(bytes.length).toBe(256)
 		expect(bytes[0]).toBe(0)
 		expect(bytes[127]).toBe(127)
@@ -185,5 +171,17 @@ describe('e2e tunnel', () => {
 			headers: { host: `nonexistent.localhost:${SERVER_PORT}` }
 		})
 		expect(res.status).toBe(404)
+		const body = await res.text()
+		expect(body).toContain('Not Found')
+	})
+	test('returns landing page for root domain', async () => {
+		const res = await fetch(`http://localhost:${SERVER_PORT}/`, {
+			headers: { host: `localhost:${SERVER_PORT}` }
+		})
+		expect(res.status).toBe(200)
+		const body = await res.text()
+		expect(body).toContain('bunl')
+		expect(body).toContain('Expose localhost to the world')
 	})
 })

package/package.json CHANGED Viewed

@@ -3,12 +3,16 @@
 		"bunl": "build/client.js"
 	},
 	"dependencies": {
-		"@rubriclab/config": "^0.0.24"
+		"@rubriclab/config": "^0.0.24",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4"
 	},
 	"description": "Expose localhost to the world. Bun-native localtunnel.",
 	"devDependencies": {
 		"@rubriclab/package": "^0.0.124",
-		"@types/bun": "latest"
+		"@types/bun": "latest",
+		"@types/react": "^19.2.13",
+		"@types/react-dom": "^19.2.3"
 	},
 	"homepage": "https://github.com/RubricLab/bunl#readme",
 	"keywords": [
@@ -32,11 +36,12 @@
 		"build": "bun build client.ts --outdir build --target bun && printf '#! /usr/bin/env bun\\n%s' \"$(cat build/client.js)\" > build/client.js",
 		"clean": "rm -rf .next && rm -rf node_modules",
 		"client": "bun --watch client.ts",
-		"demo": "bun --watch demo.ts",
+		"demo": "bun --watch demo.tsx",
 		"dev:server": "bun --watch server.ts",
 		"format": "bun x biome format --write .",
 		"lint": "bun x biome check .",
 		"lint:fix": "bun x biome lint . --write --unsafe",
+		"prepare": "bun x @rubriclab/package prepare",
 		"server": "bun server.ts",
 		"test": "bun test",
 		"test:e2e": "bun test e2e.test.ts"
@@ -45,5 +50,5 @@
 		"post-commit": "rubriclab-package post-commit"
 	},
 	"type": "module",
-	"version": "0.2.0"
+	"version": "0.2.1"
 }

package/server.ts CHANGED Viewed

@@ -1,18 +1,13 @@
 import { type ServerWebSocket, serve } from 'bun'
 import type { Client, TunnelInit, TunnelRequest, TunnelResponse } from './types'
-import { fromBase64, toBase64, uid } from './utils'
+import { fromBase64, page, toBase64, uid } from './utils'
 const port = Number(Bun.env.PORT) || 1234
 const scheme = Bun.env.SCHEME || 'http'
 const domain = Bun.env.DOMAIN || `localhost:${port}`
-/** The hostname portion of DOMAIN (no port) used for subdomain extraction */
 const domainHost = domain.replace(/:\d+$/, '')
-/** Connected tunnel clients keyed by subdomain */
 const clients = new Map<string, ServerWebSocket<Client>>()
-/** Pending HTTP requests waiting for a tunnel response, keyed by request ID */
 const pending = new Map<
 	string,
 	{
@@ -23,15 +18,35 @@ const pending = new Map<
 const TIMEOUT_MS = 30_000
+const landingHtml = page(
+	'bunl',
+	`<h1>bunl</h1>
+<p>Expose localhost to the world.</p>
+<p><code>bun x bunl -p 3000</code></p>`
+)
+function notFoundHtml(subdomain: string) {
+	return page(
+		'Not Found',
+		`<h1>Not Found</h1>
+<p>No tunnel is connected for <code>${subdomain}</code>.</p>
+<p>Make sure your client is running.</p>`
+	)
+}
+const timeoutHtml = page(
+	'Gateway Timeout',
+	`<h1>Gateway Timeout</h1>
+<p>The tunnel client didn't respond in time.</p>`
+)
 serve<Client>({
 	fetch: async (req, server) => {
 		const reqUrl = new URL(req.url)
-		// Client wants to register a new tunnel
 		if (reqUrl.searchParams.has('new')) {
 			const requested = reqUrl.searchParams.get('subdomain')
 			let id = requested || uid()
-			// Avoid collisions — if taken, generate a fresh one
 			if (clients.has(id)) id = uid()
 			const upgraded = server.upgrade(req, { data: { id } })
@@ -39,28 +54,31 @@ serve<Client>({
 			return new Response('WebSocket upgrade failed', { status: 500 })
 		}
-		// Public HTTP request — route to the right tunnel client.
-		// Use the Host header (not reqUrl.hostname) so this works behind
-		// reverse proxies like Fly.io where reqUrl.hostname is internal.
-		// Strip the DOMAIN suffix to extract the tunnel subdomain, so it
-		// works when the server is itself on a subdomain (e.g. bunl.rubric.sh).
 		const host = (req.headers.get('host') || reqUrl.hostname).replace(/:\d+$/, '')
 		const subdomain = host.endsWith(`.${domainHost}`) ? host.slice(0, -(domainHost.length + 1)) : ''
-		const client = subdomain ? clients.get(subdomain) : undefined
+		if (!subdomain) {
+			return new Response(landingHtml, {
+				headers: { 'content-type': 'text/html; charset=utf-8' }
+			})
+		}
+		const client = clients.get(subdomain)
 		if (!client) {
-			return new Response(`Tunnel "${subdomain}" not found`, { status: 404 })
+			return new Response(notFoundHtml(subdomain), {
+				headers: { 'content-type': 'text/html; charset=utf-8' },
+				status: 404
+			})
 		}
 		const id = crypto.randomUUID()
 		const { method } = req
 		const pathname = reqUrl.pathname + reqUrl.search
-		// Read request body as binary and encode to base64
 		const rawBody = await req.arrayBuffer()
 		const body = rawBody.byteLength > 0 ? toBase64(rawBody) : ''
-		// Flatten request headers
 		const headers: Record<string, string> = {}
 		req.headers.forEach((v, k) => {
 			headers[k] = v
@@ -75,7 +93,6 @@ serve<Client>({
 			type: 'request'
 		}
-		// Create a promise that will be resolved when the client responds
 		const response = await new Promise<TunnelResponse>((resolve, reject) => {
 			const timer = setTimeout(() => {
 				pending.delete(id)
@@ -84,11 +101,10 @@ serve<Client>({
 			pending.set(id, { resolve, timer })
 			client.send(JSON.stringify(message))
-		}).catch((err: unknown): TunnelResponse => {
-			const message = err instanceof Error ? err.message : String(err)
+		}).catch((): TunnelResponse => {
 			return {
-				body: Buffer.from(message).toString('base64'),
-				headers: { 'content-type': 'text/plain' },
+				body: Buffer.from(timeoutHtml).toString('base64'),
+				headers: { 'content-type': 'text/html; charset=utf-8' },
 				id,
 				status: 504,
 				statusText: 'Gateway Timeout',
@@ -96,14 +112,11 @@ serve<Client>({
 			}
 		})
-		// Decode base64 response body back to binary
 		const resBody = response.body ? fromBase64(response.body) : null
-		// Build response headers, removing problematic ones
 		const resHeaders = { ...response.headers }
 		delete resHeaders['content-encoding']
 		delete resHeaders['transfer-encoding']
-		// Fix content-length to match the actual decoded body
 		if (resBody) {
 			resHeaders['content-length'] = String(resBody.byteLength)
 		}
@@ -120,7 +133,6 @@ serve<Client>({
 			console.log(`\x1b[31m- ${ws.data.id}\x1b[0m (${clients.size - 1} connected)`)
 			clients.delete(ws.data.id)
 		},
 		message(_ws, raw) {
 			const msg = JSON.parse(
 				typeof raw === 'string' ? raw : new TextDecoder().decode(raw)

package/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
 	"exclude": ["node_modules"],
 	"extends": "@rubriclab/config/tsconfig",
-	"include": ["**/*.ts"]
+	"include": ["**/*.ts", "**/*.tsx"]
 }

package/types.ts CHANGED Viewed

@@ -1,26 +1,23 @@
 export type Client = { id: string }
-/** Server → Client: incoming HTTP request to proxy */
 export type TunnelRequest = {
 	type: 'request'
 	id: string
 	method: string
 	pathname: string
 	headers: Record<string, string>
-	body: string // base64-encoded
+	body: string
 }
-/** Client → Server: proxied HTTP response */
 export type TunnelResponse = {
 	type: 'response'
 	id: string
 	status: number
 	statusText: string
 	headers: Record<string, string>
-	body: string // base64-encoded
+	body: string
 }
-/** Server → Client: initial connection info */
 export type TunnelInit = {
 	type: 'init'
 	url: string

package/utils.ts CHANGED Viewed

@@ -92,12 +92,10 @@ function pick<T>(arr: T[]): T {
 	return arr[index]
 }
-/** Generate a human-readable unique identifier, e.g. "bold-calm-fox" */
 export function uid(): string {
 	return `${pick(adjectives)}-${pick(adjectives)}-${pick(nouns)}`
 }
-/** Open a URL in the default browser using platform-native commands */
 export function openBrowser(url: string): void {
 	const cmds: Record<string, string[]> = {
 		darwin: ['open', url],
@@ -107,13 +105,45 @@ export function openBrowser(url: string): void {
 	Bun.spawn(args, { stdio: ['ignore', 'ignore', 'ignore'] })
 }
-/** Encode an ArrayBuffer to base64 */
 export function toBase64(buf: ArrayBuffer): string {
 	return Buffer.from(buf).toString('base64')
 }
-/** Decode a base64 string to a Uint8Array */
 export function fromBase64(str: string): Uint8Array<ArrayBuffer> {
 	const buf = Buffer.from(str, 'base64')
 	return new Uint8Array(buf.buffer as ArrayBuffer, buf.byteOffset, buf.byteLength)
 }
+export function page(title: string, body: string): string {
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title} — bunl</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	background: #fff;
+	color: #000;
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+}
+main { max-width: 480px; width: 100%; }
+h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1rem; }
+p { color: #666; line-height: 1.6; margin-bottom: 0.75rem; }
+code { background: #f5f5f5; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
+a { color: #000; }
+</style>
+</head>
+<body>
+<main>
+${body}
+</main>
+</body>
+</html>`
+}

package/demo.ts DELETED Viewed

@@ -1,85 +0,0 @@
-/**
- * Demo webserver that serves multiple content types for testing the tunnel.
- * Exercises: HTML, CSS, JSON API, binary images (PNG), and binary fonts (WOFF2-like).
- */
-import { serve } from 'bun'
-const port = Number(Bun.env.DEMO_PORT) || 3000
-// 1x1 red PNG pixel (67 bytes) — smallest valid PNG
-const PNG_1PX = Buffer.from(
-	'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==',
-	'base64'
-)
-// Generate a binary blob to simulate a font file
-const FAKE_FONT = (() => {
-	const buf = Buffer.alloc(256)
-	for (let i = 0; i < 256; i++) buf[i] = i
-	return buf
-})()
-const CSS_CONTENT = `body { font-family: sans-serif; background: #111; color: #0f0; padding: 2rem; }
-img { border: 2px solid #0f0; margin: 1rem 0; }`
-const HTML = `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>bunl demo</title>
-  <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-  <h1>bunl tunnel works!</h1>
-  <p>This page was served through the tunnel.</p>
-  <img src="/image.png" alt="test pixel" width="100" height="100">
-  <p><a href="/api/health">JSON API</a> · <a href="/font.woff2">Font binary</a></p>
-</body>
-</html>`
-serve({
-	fetch(req) {
-		const url = new URL(req.url)
-		const { pathname } = url
-		console.log(`${req.method} ${pathname}`)
-		if (pathname === '/style.css') {
-			return new Response(CSS_CONTENT, {
-				headers: { 'content-type': 'text/css; charset=utf-8' }
-			})
-		}
-		if (pathname === '/image.png') {
-			return new Response(new Uint8Array(PNG_1PX), {
-				headers: { 'content-type': 'image/png' }
-			})
-		}
-		if (pathname === '/font.woff2') {
-			return new Response(new Uint8Array(FAKE_FONT), {
-				headers: { 'content-type': 'font/woff2' }
-			})
-		}
-		if (pathname === '/api/health') {
-			return Response.json({ status: 'ok', timestamp: Date.now() })
-		}
-		if (pathname === '/echo' && req.method === 'POST') {
-			return new Response(req.body, {
-				headers: {
-					'content-type': req.headers.get('content-type') || 'application/octet-stream'
-				}
-			})
-		}
-		return new Response(HTML, {
-			headers: { 'content-type': 'text/html; charset=utf-8' }
-		})
-	},
-	port
-})
-console.log(`Demo server at http://localhost:${port}`)