@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/boards/live-radio-demo-board.json

@@ -0,0 +1,211 @@
+{
+  "boardName": "Live Radio",
+  "description": "Your microphone as a radio station. The hkp-rt runtime captures the mic, encodes it to MP3 as it arrives, and streams it to anyone who opens the stream URL — a browser tab, VLC, or a phone scanning the QR code. Everyone hears the same stream, and people can join or leave at any time. Press Start, then scan the QR code or open the player page: it keeps its own buffer at about half a second, where a browser opening the .mp3 directly buffers two to five seconds on its own. VLC and other players can use the stream URL directly.\n\nThe microphone runs on the audio thread, which only stores the samples and signals. Encoding and sending happen on the runtime's event loop, and every listener's connection is written to asynchronously, so a slow listener only falls behind itself.\n\nNeeds hkp-rt on port 8887, built with mp3 (HKP_MP3_ENABLED, on by default on macOS). The encoder's channels must match what the Microphone panel reports under Channels: 1 for a built-in mic, 2 for most interfaces.",
+  "runtimes": [
+    {
+      "id": "rt",
+      "name": "hkp-rt",
+      "type": "rest",
+      "remote": "embedded",
+      "state": {
+        "wrapServices": false
+      }
+    }
+  ],
+  "services": {
+    "rt": [
+      {
+        "uuid": "mic",
+        "serviceId": "core-input",
+        "serviceName": "Microphone",
+        "state": {
+          "bypass": true,
+          "deferPropagation": true,
+          "preferredSampleRate": 48000
+        }
+      },
+      {
+        "uuid": "radio",
+        "serviceId": "http-server-subservices",
+        "serviceName": "Radio",
+        "state": {
+          "bypass": true,
+          "port": 8890,
+          "stream": {
+            "path": "/live.mp3",
+            "contentType": "audio/mpeg",
+            "burstBytes": 0,
+            "maxQueueBytes": 32768
+          },
+          "onProcess": [
+            {
+              "instanceId": "encode",
+              "serviceId": "audio-encode",
+              "serviceName": "MP3",
+              "state": {
+                "format": "mp3",
+                "stream": true,
+                "sampleRate": 48000,
+                "channels": 1,
+                "bitrate": 128,
+                "quality": 5
+              }
+            }
+          ],
+          "onRequest": [
+            {
+              "instanceId": "player-page",
+              "serviceId": "static",
+              "serviceName": "Player page",
+              "state": {
+                "out": {
+                  "meta": {
+                    "status": 200,
+                    "contentType": "text/html; charset=utf-8"
+                  },
+                  "body": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Live Radio</title>\n<style>\n  :root { color-scheme: light dark; --fg: #111; --bg: #fafafa; --muted: #6b7280; --accent: #ef4444; }\n  @media (prefers-color-scheme: dark) { :root { --fg: #f3f4f6; --bg: #111; --muted: #9ca3af; } }\n  body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg);\n         font: 16px/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; }\n  main { display: grid; gap: 16px; justify-items: center; padding: 24px; text-align: center; }\n  h1 { margin: 0; font-size: 22px; font-weight: 600; }\n  button { width: 120px; height: 120px; border-radius: 50%; border: 0; background: var(--accent); color: #fff;\n           font-size: 18px; font-weight: 600; cursor: pointer; }\n  button[aria-pressed=\"true\"] { background: var(--fg); color: var(--bg); }\n  #status { color: var(--muted); min-height: 1.4em; font-variant-numeric: tabular-nums; }\n</style>\n</head>\n<body>\n<main>\n  <h1>Live Radio</h1>\n  <button id=\"toggle\" aria-pressed=\"false\">Listen</button>\n  <div id=\"status\">Tap to listen</div>\n</main>\n<script>\n// A live player that keeps its own buffer small.\n//\n// A plain <audio src> decides for itself how much to buffer before it starts\n// and never catches up — seconds behind live. This fetches the stream instead,\n// hands each piece to Media Source Extensions as it arrives, and holds the\n// playhead a fraction of a second behind the newest audio: nudging the rate up\n// a little when it drifts, jumping only when it has fallen far behind.\n// The stream sits beside this page, whether the page was opened at the\n// endpoint's bare address (an hkp-node mount has no trailing slash) or below it.\nconst PAGE = location.href.replace(/[?#].*$/, \"\");\nconst STREAM = new URL(\"live.mp3\", PAGE.endsWith(\"/\") ? PAGE : PAGE + \"/\").toString();\nconst TARGET = 0.4; // seconds of audio kept ahead of the playhead\nconst NUDGE = 0.7;  // beyond this, play 5% faster until back at the target\nconst JUMP = 2.0;   // beyond this, jump to the target\n\nconst Source = window.ManagedMediaSource || window.MediaSource;\nconst canStream = !!Source && Source.isTypeSupported(\"audio/mpeg\");\nconst toggle = document.getElementById(\"toggle\");\nconst status = document.getElementById(\"status\");\nlet session = null;\n\ntoggle.addEventListener(\"click\", () => (session ? stop() : start()));\n\n// ?autoplay starts without a tap, where the browser allows it (a kiosk, a\n// desktop that has allowed this site); ?debug logs what the status line says.\nconst options = new URLSearchParams(location.search);\nif (options.has(\"autoplay\")) start();\n\nfunction say(text) {\n  status.textContent = text;\n  if (options.has(\"debug\")) console.log(\"[player]\", text);\n}\n\nfunction start() {\n  toggle.setAttribute(\"aria-pressed\", \"true\");\n  toggle.textContent = \"Stop\";\n  session = canStream ? streamed() : plain();\n}\n\nfunction stop() {\n  session?.close();\n  session = null;\n  toggle.setAttribute(\"aria-pressed\", \"false\");\n  toggle.textContent = \"Listen\";\n  say(\"Tap to listen\");\n}\n\n// Without MSE: the browser's own player, with whatever delay it chooses.\nfunction plain() {\n  const audio = new Audio(STREAM);\n  audio.play().catch((e) => say(String(e)));\n  say(\"Live (this browser buffers on its own)\");\n  return { close: () => { audio.pause(); audio.removeAttribute(\"src\"); audio.load(); } };\n}\n\nfunction streamed() {\n  const audio = document.createElement(\"audio\");\n  audio.disableRemotePlayback = true; // required by ManagedMediaSource\n  const media = new Source();\n  audio.src = URL.createObjectURL(media);\n  const abort = new AbortController();\n  let closed = false;\n  let timer = null;\n\n  // play() inside the click keeps the gesture a browser asks for before sound.\n  audio.play().catch(() => {});\n  say(\"Connecting…\");\n\n  media.addEventListener(\"sourceopen\", async () => {\n    const buffer = media.addSourceBuffer(\"audio/mpeg\");\n    buffer.mode = \"sequence\"; // live: each piece follows the last, whatever its timestamps\n    const pending = [];\n    const feed = () => {\n      if (closed || buffer.updating || !pending.length) return;\n      try {\n        buffer.appendBuffer(pending[0]);\n        pending.shift();\n      } catch (e) {\n        // Full: drop what is long played and try again on the next update.\n        if (e.name === \"QuotaExceededError\" && audio.currentTime > 1) buffer.remove(0, audio.currentTime - 1);\n        else throw e;\n      }\n    };\n    buffer.addEventListener(\"updateend\", () => {\n      // Keep a few seconds behind the playhead, not the whole broadcast.\n      const played = audio.currentTime - 5;\n      if (!buffer.updating && played > 1 && buffer.buffered.length && buffer.buffered.start(0) < played) {\n        buffer.remove(0, played);\n        return;\n      }\n      feed();\n    });\n\n    try {\n      const response = await fetch(STREAM, { signal: abort.signal, cache: \"no-store\" });\n      const reader = response.body.getReader();\n      for (;;) {\n        const { value, done } = await reader.read();\n        if (done) break;\n        pending.push(value);\n        feed();\n      }\n      if (!closed) reconnect(\"The stream ended\");\n    } catch (e) {\n      if (!closed) reconnect(\"Connection lost\");\n    }\n  });\n\n  timer = setInterval(() => {\n    if (!audio.buffered.length) return;\n    const end = audio.buffered.end(audio.buffered.length - 1);\n    const ahead = end - audio.currentTime;\n    if (audio.paused && ahead >= TARGET) audio.play().catch(() => say(\"Tap to listen\"));\n    if (ahead > JUMP) {\n      audio.currentTime = end - TARGET;\n      audio.playbackRate = 1;\n    } else {\n      audio.playbackRate = ahead > NUDGE ? 1.05 : 1;\n    }\n    if (!audio.paused) say(`Live · ${ahead.toFixed(1)} s buffered`);\n  }, 250);\n\n  function reconnect(why) {\n    close();\n    say(`${why} — reconnecting…`);\n    setTimeout(() => { if (session === self) session = streamed(); }, 1000);\n  }\n\n  function close() {\n    closed = true;\n    clearInterval(timer);\n    abort.abort();\n    audio.pause();\n    audio.removeAttribute(\"src\");\n    audio.load();\n  }\n\n  const self = { close };\n  return self;\n}\n</script>\n</body>\n</html>\n"
+                }
+              }
+            }
+          ]
+        }
+      },
+      {
+        "uuid": "end",
+        "serviceId": "stopper",
+        "serviceName": "End Of Chain"
+      }
+    ]
+  },
+  "facade": {
+    "layout": "single",
+    "panels": [
+      {
+        "id": "station",
+        "title": "Live Radio",
+        "layout": {
+          "direction": "column",
+          "padding": 24,
+          "gap": 16,
+          "align": "center",
+          "justify": "center",
+          "fill": true,
+          "items": [
+            {
+              "direction": "row",
+              "gap": 12,
+              "align": "center",
+              "items": [
+                {
+                  "type": "status-indicator",
+                  "source": {
+                    "serviceUuid": "radio",
+                    "path": "status"
+                  },
+                  "statusColors": {
+                    "online": "#22c55e",
+                    "offline": "#6b7280"
+                  }
+                },
+                {
+                  "type": "text",
+                  "source": {
+                    "serviceUuid": "radio",
+                    "path": "listeners"
+                  },
+                  "label": "Listening:",
+                  "placeholder": "0"
+                }
+              ]
+            },
+            {
+              "type": "qr-code",
+              "source": {
+                "serviceUuid": "radio",
+                "path": "__hkpMount"
+              },
+              "caption": "Scan to listen"
+            },
+            {
+              "type": "text",
+              "source": {
+                "serviceUuid": "radio",
+                "path": "__hkpMount"
+              },
+              "label": "Player:",
+              "placeholder": "Press Start to go on air",
+              "mono": true,
+              "copyable": true
+            },
+            {
+              "type": "text",
+              "source": {
+                "serviceUuid": "radio",
+                "path": "streamUrl"
+              },
+              "label": "Stream (VLC):",
+              "placeholder": "",
+              "mono": true,
+              "copyable": true
+            },
+            {
+              "direction": "row",
+              "gap": 12,
+              "items": [
+                {
+                  "type": "button",
+                  "label": "Start",
+                  "actions": [
+                    {
+                      "type": "configure",
+                      "serviceUuid": "radio",
+                      "configure": {
+                        "bypass": false
+                      }
+                    },
+                    {
+                      "type": "configure",
+                      "serviceUuid": "mic",
+                      "configure": {
+                        "bypass": false
+                      }
+                    }
+                  ]
+                },
+                {
+                  "type": "button",
+                  "label": "Stop",
+                  "actions": [
+                    {
+                      "type": "configure",
+                      "serviceUuid": "mic",
+                      "configure": {
+                        "bypass": true
+                      }
+                    },
+                    {
+                      "type": "configure",
+                      "serviceUuid": "radio",
+                      "configure": {
+                        "bypass": true
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ],
+    "notices": [
+      {
+        "source": {
+          "serviceUuid": "mic",
+          "path": "error"
+        },
+        "tone": "error"
+      }
+    ]
+  }
+}

package/bundle/boards/live-radio-members-demo-board.json

@@ -0,0 +1,314 @@
+{
+  "boardName": "Live Radio (Members)",
+  "description": "Your microphone as a radio station for the people you share the board with. The hkp-rt runtime in the Readymade app captures the mic, encodes it to MP3 and sends it over a WebSocket of its own to an hkp-node relay, which serves the player page and passes the stream to every listener. Deployed as a cloud board, it keeps broadcasting with nobody watching for as long as the app runs.\n\nOnly the board's owner goes on air. Whoever the board is shared with opens the link they were sent and is shown the player's address; nobody else is told it. The address is a mount — unguessable rather than guarded — so to cut off somebody who has had it, give the relay's mountName a new value and deploy again: everybody still on the list is shown the new one.\n\nDeploy it from the Readymade desktop app: the Home runtime is the hkp-rt it embeds (`embedded`), and the Relay runs on the hkp-node you keep as the remote `node`, which has to be reachable from wherever your listeners are. Give the secret radio-ingest a value when asked: the relay accepts a stream only from whoever presents it. The encoder's channels must match what the Microphone panel reports under Channels: 1 for a built-in mic, 2 for most interfaces.",
+  "runtimes": [
+    {
+      "id": "home",
+      "name": "Home (hkp-rt)",
+      "type": "rest",
+      "remote": "embedded",
+      "state": {
+        "wrapServices": false
+      }
+    },
+    {
+      "id": "relay",
+      "name": "Relay (hkp-node)",
+      "type": "rest",
+      "remote": "node",
+      "state": {
+        "wrapServices": false
+      }
+    }
+  ],
+  "services": {
+    "home": [
+      {
+        "uuid": "mic",
+        "serviceId": "core-input",
+        "serviceName": "Microphone",
+        "state": {
+          "bypass": true,
+          "deferPropagation": true,
+          "preferredSampleRate": 48000
+        }
+      },
+      {
+        "uuid": "encode",
+        "serviceId": "audio-encode",
+        "serviceName": "MP3",
+        "state": {
+          "format": "mp3",
+          "stream": true,
+          "sampleRate": 48000,
+          "channels": 1,
+          "bitrate": 128,
+          "quality": 5
+        }
+      },
+      {
+        "uuid": "push",
+        "serviceId": "websocket-writer",
+        "serviceName": "To the relay",
+        "state": {
+          "bypass": true,
+          "url": "hkp-mount://relay/ingest",
+          "headers": {
+            "Authorization": "Bearer {{secret.radio-ingest}}"
+          },
+          "maxQueueBytes": 16384
+        }
+      },
+      {
+        "uuid": "end",
+        "serviceId": "stopper",
+        "serviceName": "End Of Chain"
+      }
+    ],
+    "relay": [
+      {
+        "uuid": "ingest",
+        "serviceId": "websocket-reader",
+        "serviceName": "Uplink",
+        "state": {
+          "bypass": false,
+          "key": "{{secret.radio-ingest}}",
+          "exclusive": true
+        }
+      },
+      {
+        "uuid": "radio",
+        "serviceId": "http-server-subservices",
+        "serviceName": "Relay",
+        "state": {
+          "bypass": false,
+          "mountName": "player",
+          "stream": {
+            "path": "/live.mp3",
+            "contentType": "audio/mpeg",
+            "burstBytes": 0,
+            "maxQueueBytes": 32768,
+            "stallTimeoutMs": 5000
+          },
+          "onRequest": [
+            {
+              "instanceId": "player-page",
+              "serviceId": "map",
+              "serviceName": "Player page",
+              "state": {
+                "mode": "replace",
+                "template": {
+                  "meta": {
+                    "status": 200
+                  },
+                  "body=": "params.meta.path == '/player.js' ? 'hkp-asset://player-js' : 'hkp-asset://player'"
+                }
+              }
+            }
+          ]
+        }
+      },
+      {
+        "uuid": "end",
+        "serviceId": "stopper",
+        "serviceName": "End Of Chain"
+      }
+    ]
+  },
+  "facade": {
+    "layout": "columns",
+    "panels": [
+      {
+        "id": "listen",
+        "title": "Live Radio",
+        "layout": {
+          "direction": "column",
+          "padding": 24,
+          "gap": 16,
+          "align": "center",
+          "justify": "center",
+          "fill": true,
+          "items": [
+            {
+              "type": "text",
+              "placeholder": "Open the player and tap Listen. The address is only for the people this board is shared with — please don't pass it on.",
+              "tone": "muted",
+              "fontSize": 12
+            },
+            {
+              "direction": "row",
+              "gap": 12,
+              "align": "center",
+              "items": [
+                {
+                  "type": "status-indicator",
+                  "source": {
+                    "serviceUuid": "push",
+                    "path": "status"
+                  },
+                  "statusColors": {
+                    "connected": "#22c55e",
+                    "connecting": "#f59e0b",
+                    "reconnecting": "#f59e0b",
+                    "waiting": "#f59e0b",
+                    "idle": "#6b7280"
+                  }
+                },
+                {
+                  "type": "text",
+                  "source": {
+                    "serviceUuid": "radio",
+                    "path": "listeners"
+                  },
+                  "label": "Listening:",
+                  "placeholder": "0"
+                }
+              ]
+            },
+            {
+              "type": "qr-code",
+              "source": {
+                "serviceUuid": "radio",
+                "path": "__hkpMount"
+              },
+              "caption": "Scan to listen"
+            },
+            {
+              "type": "text",
+              "source": {
+                "serviceUuid": "radio",
+                "path": "__hkpMount"
+              },
+              "href": "{{value}}",
+              "label": "Player:",
+              "placeholder": "The relay is not up — the board is not running",
+              "mono": true,
+              "copyable": true
+            },
+            {
+              "type": "text",
+              "source": {
+                "serviceUuid": "radio",
+                "path": "streamUrl"
+              },
+              "label": "Stream (VLC):",
+              "placeholder": "",
+              "mono": true,
+              "copyable": true
+            }
+          ]
+        }
+      },
+      {
+        "id": "station",
+        "title": "Station",
+        "width": "35%",
+        "visibleTo": "owner",
+        "layout": {
+          "direction": "column",
+          "padding": 24,
+          "gap": 16,
+          "align": "center",
+          "justify": "center",
+          "fill": true,
+          "items": [
+            {
+              "type": "text",
+              "placeholder": "Only you see this panel. Going on air switches the microphone and the uplink; the relay and the player's address stay up for as long as the board runs.",
+              "tone": "muted",
+              "fontSize": 12
+            },
+            {
+              "type": "text",
+              "source": {
+                "serviceUuid": "push",
+                "path": "status"
+              },
+              "label": "Uplink:",
+              "placeholder": "idle"
+            },
+            {
+              "type": "text",
+              "source": {
+                "serviceUuid": "push",
+                "path": "error"
+              },
+              "tone": "error",
+              "placeholder": ""
+            },
+            {
+              "direction": "row",
+              "gap": 12,
+              "items": [
+                {
+                  "type": "button",
+                  "label": "Go on air",
+                  "actions": [
+                    {
+                      "type": "configure",
+                      "serviceUuid": "push",
+                      "configure": {
+                        "bypass": false
+                      }
+                    },
+                    {
+                      "type": "configure",
+                      "serviceUuid": "mic",
+                      "configure": {
+                        "bypass": false
+                      }
+                    }
+                  ]
+                },
+                {
+                  "type": "button",
+                  "label": "Go off air",
+                  "actions": [
+                    {
+                      "type": "configure",
+                      "serviceUuid": "mic",
+                      "configure": {
+                        "bypass": true
+                      }
+                    },
+                    {
+                      "type": "configure",
+                      "serviceUuid": "push",
+                      "configure": {
+                        "bypass": true
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ],
+    "notices": [
+      {
+        "source": {
+          "serviceUuid": "mic",
+          "path": "error"
+        },
+        "tone": "error",
+        "visibleTo": "owner"
+      }
+    ]
+  },
+  "assets": [
+    {
+      "id": "player",
+      "name": "Player page",
+      "mediaType": "text/html; charset=utf-8",
+      "text": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Live Radio</title>\n<style>\n  :root { color-scheme: light dark; --fg: #111; --bg: #fafafa; --muted: #6b7280; --accent: #ef4444; }\n  @media (prefers-color-scheme: dark) { :root { --fg: #f3f4f6; --bg: #111; --muted: #9ca3af; } }\n  body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg);\n         font: 16px/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; }\n  main { display: grid; gap: 16px; justify-items: center; padding: 24px; text-align: center; }\n  h1 { margin: 0; font-size: 22px; font-weight: 600; }\n  button { width: 120px; height: 120px; border-radius: 50%; border: 0; background: var(--accent); color: #fff;\n           font-size: 18px; font-weight: 600; cursor: pointer; }\n  button[aria-pressed=\"true\"] { background: var(--fg); color: var(--bg); }\n  #status { color: var(--muted); min-height: 1.4em; font-variant-numeric: tabular-nums; }\n</style>\n</head>\n<body>\n<main>\n  <h1>Live Radio</h1>\n  <button id=\"toggle\" aria-pressed=\"false\">Listen</button>\n  <div id=\"status\">Tap to listen</div>\n</main>\n<script>\n// player.js sits beside this page, whether the page was opened at the\n// endpoint's bare address (an hkp-node mount has no trailing slash) or below it.\n{\n  const here = location.href.replace(/[?#].*$/, \"\");\n  const script = document.createElement(\"script\");\n  script.src = new URL(\"player.js\", here.endsWith(\"/\") ? here : here + \"/\").toString();\n  document.body.appendChild(script);\n}\n</script>\n</body>\n</html>\n"
+    },
+    {
+      "id": "player-js",
+      "name": "Player script",
+      "mediaType": "text/javascript; charset=utf-8",
+      "text": "// A live player that keeps its own buffer small.\n//\n// A plain <audio src> decides for itself how much to buffer before it starts\n// and never catches up — seconds behind live. This fetches the stream instead,\n// hands each piece to Media Source Extensions as it arrives, and holds the\n// playhead a fraction of a second behind the newest audio: nudging the rate up\n// a little when it drifts, jumping only when it has fallen far behind.\n// The stream sits beside this page, whether the page was opened at the\n// endpoint's bare address (an hkp-node mount has no trailing slash) or below it.\nconst PAGE = location.href.replace(/[?#].*$/, \"\");\nconst STREAM = new URL(\"live.mp3\", PAGE.endsWith(\"/\") ? PAGE : PAGE + \"/\").toString();\nconst TARGET = 0.4; // seconds of audio kept ahead of the playhead\nconst NUDGE = 0.7;  // beyond this, play 5% faster until back at the target\nconst JUMP = 2.0;   // beyond this, jump to the target\n\nconst Source = window.ManagedMediaSource || window.MediaSource;\nconst canStream = !!Source && Source.isTypeSupported(\"audio/mpeg\");\nconst toggle = document.getElementById(\"toggle\");\nconst status = document.getElementById(\"status\");\nlet session = null;\n\ntoggle.addEventListener(\"click\", () => (session ? stop() : start()));\n\n// ?autoplay starts without a tap, where the browser allows it (a kiosk, a\n// desktop that has allowed this site); ?debug logs what the status line says.\nconst options = new URLSearchParams(location.search);\nif (options.has(\"autoplay\")) start();\n\nfunction say(text) {\n  status.textContent = text;\n  if (options.has(\"debug\")) console.log(\"[player]\", text);\n}\n\nfunction start() {\n  toggle.setAttribute(\"aria-pressed\", \"true\");\n  toggle.textContent = \"Stop\";\n  session = canStream ? streamed() : plain();\n}\n\nfunction stop() {\n  session?.close();\n  session = null;\n  toggle.setAttribute(\"aria-pressed\", \"false\");\n  toggle.textContent = \"Listen\";\n  say(\"Tap to listen\");\n}\n\n// Without MSE: the browser's own player, with whatever delay it chooses.\nfunction plain() {\n  const audio = new Audio(STREAM);\n  audio.play().catch((e) => say(String(e)));\n  say(\"Live (this browser buffers on its own)\");\n  return { close: () => { audio.pause(); audio.removeAttribute(\"src\"); audio.load(); } };\n}\n\nfunction streamed() {\n  const audio = document.createElement(\"audio\");\n  audio.disableRemotePlayback = true; // required by ManagedMediaSource\n  const media = new Source();\n  audio.src = URL.createObjectURL(media);\n  const abort = new AbortController();\n  let closed = false;\n  let timer = null;\n\n  // play() inside the click keeps the gesture a browser asks for before sound.\n  audio.play().catch(() => {});\n  say(\"Connecting…\");\n\n  media.addEventListener(\"sourceopen\", async () => {\n    const buffer = media.addSourceBuffer(\"audio/mpeg\");\n    buffer.mode = \"sequence\"; // live: each piece follows the last, whatever its timestamps\n    const pending = [];\n    const feed = () => {\n      if (closed || buffer.updating || !pending.length) return;\n      try {\n        buffer.appendBuffer(pending[0]);\n        pending.shift();\n      } catch (e) {\n        // Full: drop what is long played and try again on the next update.\n        if (e.name === \"QuotaExceededError\" && audio.currentTime > 1) buffer.remove(0, audio.currentTime - 1);\n        else throw e;\n      }\n    };\n    buffer.addEventListener(\"updateend\", () => {\n      // Keep a few seconds behind the playhead, not the whole broadcast.\n      const played = audio.currentTime - 5;\n      if (!buffer.updating && played > 1 && buffer.buffered.length && buffer.buffered.start(0) < played) {\n        buffer.remove(0, played);\n        return;\n      }\n      feed();\n    });\n\n    try {\n      const response = await fetch(STREAM, { signal: abort.signal, cache: \"no-store\" });\n      // Nothing answers here: the board is not running, or the address moved.\n      // Trying again every second would not change that.\n      if (response.status >= 400 && response.status < 500) return gone();\n      const reader = response.body.getReader();\n      for (;;) {\n        const { value, done } = await reader.read();\n        if (done) break;\n        pending.push(value);\n        feed();\n      }\n      if (!closed) reconnect(\"The stream ended\");\n    } catch (e) {\n      if (!closed) reconnect(\"Connection lost\");\n    }\n  });\n\n  timer = setInterval(() => {\n    if (!audio.buffered.length) return;\n    const end = audio.buffered.end(audio.buffered.length - 1);\n    const ahead = end - audio.currentTime;\n    if (audio.paused && ahead >= TARGET) audio.play().catch(() => say(\"Tap to listen\"));\n    if (ahead > JUMP) {\n      audio.currentTime = end - TARGET;\n      audio.playbackRate = 1;\n    } else {\n      audio.playbackRate = ahead > NUDGE ? 1.05 : 1;\n    }\n    if (!audio.paused) say(`Live · ${ahead.toFixed(1)} s buffered`);\n  }, 250);\n\n  function reconnect(why) {\n    close();\n    say(`${why} — reconnecting…`);\n    setTimeout(() => { if (session === self) session = streamed(); }, 1000);\n  }\n\n  function gone() {\n    close();\n    session = null;\n    toggle.setAttribute(\"aria-pressed\", \"false\");\n    toggle.textContent = \"Listen\";\n    say(\"Not on air here — open the board's link again for the current address\");\n  }\n\n  function close() {\n    closed = true;\n    clearInterval(timer);\n    abort.abort();\n    audio.pause();\n    audio.removeAttribute(\"src\");\n    audio.load();\n  }\n\n  const self = { close };\n  return self;\n}\n"
+    }
+  ]
+}

package/bundle/boards/local-storage-demo-board.json

@@ -0,0 +1,30 @@
+{
+  "boardName": "Local Storage Demo",
+  "runtimes": [
+    {
+      "id": "ui",
+      "name": "Browser",
+      "type": "browser",
+      "state": {
+        "wrapServices": false
+      }
+    }
+  ],
+  "services": {
+    "ui": [
+      {
+        "uuid": "storage-svc",
+        "serviceId": "hookup.to/service/local-storage",
+        "serviceName": "Local Storage",
+        "state": {
+          "filter": ""
+        }
+      },
+      {
+        "uuid": "monitor-svc",
+        "serviceId": "hookup.to/service/monitor",
+        "serviceName": "Monitor"
+      }
+    ]
+  }
+}

package/bundle/boards/lz-compress-demo-board.json

@@ -0,0 +1,52 @@
+{
+  "boardName": "LZ Compress Demo",
+  "runtimes": [
+    {
+      "id": "ui",
+      "name": "Browser",
+      "type": "browser",
+      "state": {
+        "wrapServices": false
+      }
+    }
+  ],
+  "services": {
+    "ui": [
+      {
+        "uuid": "injector-svc",
+        "serviceId": "hookup.to/service/injector",
+        "serviceName": "Source Text",
+        "state": {
+          "recentInjection": "Hello from hookup! Hello from hookup! Hello from hookup!",
+          "plainText": true
+        }
+      },
+      {
+        "uuid": "compress-svc",
+        "serviceId": "hookup.to/service/lz-compress",
+        "serviceName": "LZ Compress",
+        "state": {
+          "mode": "compress"
+        }
+      },
+      {
+        "uuid": "monitor-compressed-svc",
+        "serviceId": "hookup.to/service/monitor",
+        "serviceName": "Compressed"
+      },
+      {
+        "uuid": "decompress-svc",
+        "serviceId": "hookup.to/service/lz-compress",
+        "serviceName": "LZ Decompress",
+        "state": {
+          "mode": "decompress"
+        }
+      },
+      {
+        "uuid": "monitor-svc",
+        "serviceId": "hookup.to/service/monitor",
+        "serviceName": "Monitor"
+      }
+    ]
+  }
+}

package/bundle/boards/map-demo-board.json

@@ -0,0 +1,46 @@
+{
+  "boardName": "Map Demo",
+  "runtimes": [
+    {
+      "id": "ui",
+      "name": "Browser",
+      "type": "browser",
+      "state": {
+        "wrapServices": false
+      }
+    }
+  ],
+  "services": {
+    "ui": [
+      {
+        "uuid": "injector-svc",
+        "serviceId": "hookup.to/service/injector",
+        "serviceName": "Input",
+        "state": {
+          "recentInjection": {
+            "x": 5,
+            "y": 3
+          }
+        }
+      },
+      {
+        "uuid": "map-svc",
+        "serviceId": "hookup.to/service/map",
+        "serviceName": "Map",
+        "state": {
+          "template": {
+            "sum=": "x + y",
+            "product=": "x * y",
+            "difference=": "x - y",
+            "label=": "concat('(', x, ', ', y, ')')"
+          }
+        }
+      },
+      {
+        "uuid": "monitor-svc",
+        "serviceId": "hookup.to/service/monitor",
+        "serviceName": "Monitor"
+      }
+    ]
+  }
+}