Merge pull request 'fix(demo): Bitcoin UI styling + placeholder LND dashboard' (#81) from demo-ui-fixes into main

docker/bitcoin-ui/index.html

@@ -7,7 +7,9 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title id="pageTitle">Bitcoin Node - Archipelago</title>
-    <link rel="stylesheet" href="/tailwind.css">
+    <!-- Relative: the shell is served at / in the container but under
+         /app/bitcoin-ui/ in the public demo — absolute paths 404 there. -->
+    <link rel="stylesheet" href="tailwind.css">
     <style>
         * {
             margin: 0;
@@ -339,7 +341,7 @@
                     <div class="logo-gradient-border">
                         <img
                             id="implLogo"
-                            src="/assets/img/app-icons/bitcoin-knots.webp"
+                            src="assets/img/app-icons/bitcoin-knots.webp"
                             alt="Bitcoin Node"
                             class="w-16 h-16"
                             style="object-fit: contain;"
@@ -984,8 +986,8 @@
                 ? 'Enhanced Bitcoin node implementation'
                 : 'Reference Bitcoin node implementation';
             const icon = isKnots
-                ? '/assets/img/app-icons/bitcoin-knots.webp'
-                : '/assets/img/app-icons/bitcoin-core.svg';
+                ? 'assets/img/app-icons/bitcoin-knots.webp'
+                : 'assets/img/app-icons/bitcoin-core.svg';
             const pageTitle = document.getElementById('pageTitle');
             const implName = document.getElementById('implName');
             const implTagline = document.getElementById('implTagline');

docker/fedimint-ui/index.html

@@ -386,7 +386,7 @@
       <section class="glass-card">
         <div class="header">
           <div class="logo-gradient-border">
-            <img src="/assets/img/app-icons/fedimint.jpg" alt="Fedimint Guardian">
+            <img src="assets/img/app-icons/fedimint.jpg" alt="Fedimint Guardian">
           </div>
           <div class="title">
             <h1>Fedimint Guardian</h1>

neode-ui/mock-backend.js

@@ -1249,7 +1249,8 @@ const DOCKER_UI = path.join(__dirname, '..', 'docker')
 for (const [prefixes, dir] of [
   [['/app/bitcoin-core', '/app/bitcoin-knots', '/app/bitcoin-ui'], 'bitcoin-ui'],
   [['/app/electrumx', '/app/electrs', '/app/archy-electrs-ui'], 'electrs-ui'],
-  [['/app/lnd', '/app/lnd-ui', '/app/archy-lnd-ui', '/app/thunderhub'], 'lnd-ui'],
+  // lnd deliberately NOT here: the real lnd-ui shell reads poorly in the demo
+  // iframe, so /app/lnd/ gets a DEMO_APP_PAGES placeholder dashboard instead.
   [['/app/fedimint', '/app/fedimintd'], 'fedimint-ui'],
 ]) {
   for (const p of prefixes) app.use(p, express.static(path.join(DOCKER_UI, dir)))
@@ -4755,6 +4756,34 @@ app.get('/app/thunderhub/api/forwards', (req, res) => res.json(MOCK_LND_DATA.for
 // something plausible in the in-app iframe. Registered before the generic
 // /app/:id notice handler so these win.
 const DEMO_APP_PAGES = {
+  // Placeholder LND dashboard — the real lnd-ui shell reads poorly inside the
+  // demo iframe. Numbers stay consistent with the /proxy/lnd/v1/* mocks.
+  lnd: () => demoAppShell('Lightning Network Daemon', 'archipelago-lnd · v0.18.3-beta · signet', '/assets/img/app-icons/lnd.png', `
+    <div class="grid">
+      <div class="card"><div class="k">Status</div><div class="v"><span class="badge">Running · synced</span></div></div>
+      <div class="card"><div class="k">On-chain</div><div class="v">2,450,000 sats</div></div>
+      <div class="card"><div class="k">Lightning (local)</div><div class="v">8,250,000 sats</div></div>
+      <div class="card"><div class="k">Inbound capacity</div><div class="v">11,750,000 sats</div></div>
+    </div>
+    <div class="grid">
+      <div class="card"><div class="k">Channels</div><div class="v">4 active</div></div>
+      <div class="card"><div class="k">Peers</div><div class="v">11</div></div>
+      <div class="card"><div class="k">Block height</div><div class="v">902,418</div></div>
+    </div>
+    <div class="card">
+      <div class="k" style="margin-bottom:6px">Channels</div>
+      <table>
+        <tr><th>Peer</th><th>Capacity</th><th>Local / Remote</th><th style="width:30%">Balance</th></tr>
+        <tr><td>ACINQ</td><td>5,000,000</td><td>2,450,000 / 2,550,000</td><td><div class="bar"><i style="width:49%"></i></div></td></tr>
+        <tr><td>Voltage</td><td>10,000,000</td><td>4,500,000 / 5,500,000</td><td><div class="bar"><i style="width:45%"></i></div></td></tr>
+        <tr><td>Kraken</td><td>3,000,000</td><td>1,800,000 / 1,200,000</td><td><div class="bar"><i style="width:60%"></i></div></td></tr>
+        <tr><td>Wallet of Satoshi</td><td>2,000,000</td><td>1,200,000 / 800,000</td><td><div class="bar"><i style="width:60%"></i></div></td></tr>
+      </table>
+    </div>
+    <div class="card" style="margin-top:14px">
+      <div class="k" style="margin-bottom:6px">Node URI</div>
+      <div class="v mono">02c9f0a1…e47b@lnd7f3a2c9d1b4e8f6.onion:9735</div>
+    </div>`),
   'btcpay-server': () => demoAppShell('BTCPay Server', 'Self-hosted payment processor · signet', '/assets/img/app-icons/btcpay-server.png', `
     <div class="grid">
       <div class="card"><div class="k">Store</div><div class="v">Archipelago Shop</div></div>