Serve the panel from a sub-path, and an Apache conf for /heos

The app assumed it lived at the server root: its links were /static/...
and its fetches /api/..., which behind a proxy at /heos resolve to the
wrong place, so the page would load and nothing on it would work.

It now takes the prefix from X-Forwarded-Prefix, and everything it
generates -- stylesheet, icons, the manifest's start_url, every fetch --
follows. Nothing changes when it is served from its own port.

deploy/heos.conf is the Apache side, restricted to the local network by
default, since this controls the speakers and the vhost it hangs off has
a public certificate.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

static/app.js

@@ -4,6 +4,8 @@
 
 const STEP = Number(document.documentElement.dataset.step) || 2;
 const HOST_LABEL = document.documentElement.dataset.host || 'the AVR';
+// Where the app is mounted: "/" on its own port, "/heos/" behind a proxy.
+const BASE = document.documentElement.dataset.base || '/';
 const POLL_MS = 5000;
 
 const el = (sel, root = document) => root.querySelector(sel);
@@ -32,7 +34,7 @@ async function api(path, body) {
   const options = body === undefined
     ? {}
     : { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) };
-  const response = await fetch(path, options);
+  const response = await fetch(BASE + path.replace(/^\//, ''), options);
   let data = {};
   try { data = await response.json(); } catch (_) { /* empty or not JSON */ }
   if (!response.ok) throw new Error(data.error || `${response.status} ${response.statusText}`);