2026-03-19 17:02:17 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2026-08-02 18:19:34 -04:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, viewport-fit=cover" >
2026-03-19 17:02:17 +00:00
< meta http-equiv = "Cache-Control" content = "no-cache, no-store, must-revalidate" >
2026-08-02 18:19:34 -04:00
< meta http-equiv = "Pragma" content = "no-cache" >
< meta http-equiv = "Expires" content = "0" >
2026-03-19 17:02:17 +00:00
< title > LND - Archipelago</ title >
< style >
2026-08-02 18:19:34 -04:00
/* ── Archipelago design system ────────────────────────────────────
Mirrors docker/bitcoin-ui: perspective background layer, 0.8 dark
overlay, glass cards with a masked gradient border, and the same
glass/gradient button pair. Self-contained (no tailwind.css link)
because lnd-ui has always shipped its own utilities and the shared
tailwind.css is a hand-extracted subset built for bitcoin-ui. */
2026-03-19 17:02:17 +00:00
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
2026-08-02 18:19:34 -04:00
img , svg { display : block ; vertical-align : middle ; max-width : 100 % ; }
button { font-family : inherit ; font-size : 100 % ; line-height : inherit ; color : inherit ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Segoe UI' , 'Roboto' , 'Oxygen' , 'Ubuntu' , sans-serif ;
min-height : 100 vh ; background : #000 ; color : white ; overflow-x : hidden ;
-webkit- text-size-adjust : 100 % ;
}
/* Background — same perspective treatment as bitcoin-ui. Paths are
relative: the shell is served at / on :18083 but under /app/lnd/
when proxied by the host nginx, where absolute /assets 404s. */
. bg-perspective-container { position : fixed ; inset : 0 ; z-index : -10 ; perspective : 1000 px ; perspective-origin : 50 % 50 % ; overflow : hidden ; }
. bg-layer {
position : absolute ; inset : 0 ;
background-image : url ( 'assets/img/bg-web5.jpg' );
background-size : cover ; background-position : center ; background-repeat : no-repeat ;
transition : all 0.45 s cubic-bezier ( 0.68 , -0.55 , 0.265 , 1.55 );
transform-style : preserve-3d ; opacity : 1 ; transform : translateZ ( 0 ) scale ( 1 );
}
. overlay { position : fixed ; inset : 0 ; background : rgba ( 0 , 0 , 0 , 0.8 ); z-index : -5 ; pointer-events : none ; }
/* Glass card — gradient border via masked ::before */
. glass-card {
position : relative ; background : rgba ( 0 , 0 , 0 , 0.60 );
backdrop-filter : blur ( 24 px ); -webkit- backdrop-filter : blur ( 24 px );
box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.45 ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.22 );
border-radius : 1 rem ; border : none ; overflow-x : hidden ; overflow-y : visible ;
}
. glass-card :: before {
content : '' ; position : absolute ; inset : 0 ; border-radius : inherit ; padding : 2 px ;
background : linear-gradient ( 135 deg , rgba ( 0 , 0 , 0 , 0.8 ), transparent );
-webkit- mask : linear-gradient ( #fff 0 0 ) content-box , linear-gradient ( #fff 0 0 );
-webkit- mask-composite : xor ; mask-composite : exclude ; pointer-events : none ; z-index : 1 ;
}
. glass-card > * { position : relative ; z-index : 2 ; }
. info-card {
position : relative ; background : rgba ( 0 , 0 , 0 , 0.60 );
backdrop-filter : blur ( 24 px ); -webkit- backdrop-filter : blur ( 24 px );
box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.45 ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.22 );
border-radius : 16 px ; padding : 12 px ; border : none ;
}
. info-card :: before {
content : '' ; position : absolute ; inset : 0 ; border-radius : inherit ; padding : 2 px ;
background : linear-gradient ( 135 deg , rgba ( 0 , 0 , 0 , 0.8 ), transparent );
-webkit- mask : linear-gradient ( #fff 0 0 ) content-box , linear-gradient ( #fff 0 0 );
-webkit- mask-composite : xor ; mask-composite : exclude ; pointer-events : none ;
}
. info-card > * { position : relative ; z-index : 2 ; }
. info-card-button {
position : relative ; background : rgba ( 0 , 0 , 0 , 0.60 );
backdrop-filter : blur ( 24 px ); -webkit- backdrop-filter : blur ( 24 px );
box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.45 ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.22 );
border-radius : 16 px ; padding : 12 px ; border : none ; cursor : pointer ;
color : rgba ( 255 , 255 , 255 , 0.9 ); transition : all 0.3 s ease ; text-align : left ; width : 100 % ;
display : block ; text-decoration : none ;
}
. info-card-button :: before {
content : '' ; position : absolute ; inset : 0 ; border-radius : inherit ; padding : 2 px ;
background : linear-gradient ( 135 deg , rgba ( 0 , 0 , 0 , 0.8 ), transparent );
-webkit- mask : linear-gradient ( #fff 0 0 ) content-box , linear-gradient ( #fff 0 0 );
-webkit- mask-composite : xor ; mask-composite : exclude ; pointer-events : none ; transition : all 0.3 s ease ;
}
. info-card-button > * { position : relative ; z-index : 2 ; }
2026-08-02 19:00:31 -04:00
/* Same treatment, sized for a normal inline button rather than a
full-width card, so every button on the page reads as one family. */
. info-card-button . compact {
width : auto ; display : inline-flex ; align-items : center ; justify-content : center ;
gap : 0.5 rem ; padding : 0.65 rem 1 rem ; text-align : center ;
font-size : 0.875 rem ; font-weight : 500 ;
}
2026-08-02 18:19:34 -04:00
. info-card-button : hover {
transform : translateY ( -2 px ); background : rgba ( 0 , 0 , 0 , 0.35 );
box-shadow : 0 12 px 32 px rgba ( 0 , 0 , 0 , 0.6 ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.25 );
color : rgba ( 255 , 255 , 255 , 1 );
}
. info-card-button : hover :: before { background : linear-gradient ( 135 deg , rgba ( 255 , 255 , 255 , 0.3 ), transparent ); }
2026-03-19 17:02:17 +00:00
. info-card-button : active { transform : translateY ( 1 px ); }
2026-08-02 18:19:34 -04:00
. glass-button {
background-color : rgba ( 0 , 0 , 0 , 0.6 ); backdrop-filter : blur ( 18 px ); -webkit- backdrop-filter : blur ( 18 px );
border : 1 px solid rgba ( 255 , 255 , 255 , 0.18 ); color : rgba ( 255 , 255 , 255 , 0.9 );
transition : all 0.3 s ease ; cursor : pointer ;
}
. glass-button : hover { color : white ; background-color : rgba ( 0 , 0 , 0 , 0.7 ); }
2026-03-19 17:02:17 +00:00
. glass-button : disabled { opacity : 0.5 ; cursor : not-allowed ; }
2026-08-02 18:19:34 -04:00
. gradient-button {
background : linear-gradient ( 135 deg , rgba ( 255 , 255 , 255 , 0.15 ) 0 % , rgba ( 0 , 0 , 0 , 0.8 ) 100 % );
backdrop-filter : blur ( 10 px ); -webkit- backdrop-filter : blur ( 10 px );
border : 1 px solid rgba ( 255 , 255 , 255 , 0.2 ); color : rgba ( 255 , 255 , 255 , 0.95 );
transition : all 0.3 s ease ; cursor : pointer ;
}
. gradient-button : hover {
background : linear-gradient ( 135 deg , rgba ( 255 , 255 , 255 , 0.2 ) 0 % , rgba ( 0 , 0 , 0 , 0.9 ) 100 % );
border-color : rgba ( 255 , 255 , 255 , 0.3 ); box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.6 ); transform : translateY ( -1 px );
}
. gradient-button : active { transform : translateY ( 1 px ); }
2026-08-02 19:00:31 -04:00
/* Logo — LND purple gradient ring. The app-store icon is a full-bleed
square with an opaque white background (not a transparent glyph), so
it fills the frame and gets clipped to the inner radius, exactly the
way bitcoin-ui frames its icon. */
2026-08-02 18:19:34 -04:00
. logo-gradient-border {
position : relative ; border-radius : 16 px ; padding : 3 px ;
background : linear-gradient ( 135 deg , rgba ( 167 , 139 , 250 , 0.85 ) 0 % , rgba ( 0 , 0 , 0 , 0.8 ) 100 % );
box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.5 ); display : inline-block ;
}
2026-08-02 19:00:31 -04:00
. logo-gradient-border :: after { content : '' ; position : absolute ; inset : 3 px ; border-radius : 13 px ; background : #fff ; z-index : 0 ; }
. logo-gradient-border img { border-radius : 13 px ; display : block ; position : relative ; z-index : 1 ; width : 64 px ; height : 64 px ; object-fit : cover ; }
2026-08-02 18:19:34 -04:00
. container { max-width : 1400 px ; margin : 0 auto ; padding : 2 rem ; padding-bottom : 4 rem ; }
2026-08-02 19:00:31 -04:00
/* ── App header ──────────────────────────────────────────────────
Three deliberate breakpoints, because the identity block and the
controls both need room before they sit side by side:
< 768px fully stacked, everything centred
< 1024px logo + text on one row, controls stacked underneath
(this is the width where the title used to squish
against the controls)
>= 1024px single row */
. app-header { display : flex ; flex-direction : column ; align-items : center ; gap : 1 rem ; }
. app-header-id { display : flex ; flex-direction : column ; align-items : center ; gap : 1 rem ; width : 100 % ; min-width : 0 ; }
. app-header-text { min-width : 0 ; width : 100 % ; text-align : center ; }
. app-header-title { display : flex ; align-items : center ; gap : 0.75 rem ; flex-wrap : wrap ; justify-content : center ; margin-bottom : 0.25 rem ; }
. app-header-actions { display : flex ; align-items : center ; gap : 0.75 rem ; justify-content : center ; width : 100 % ; flex-wrap : wrap ; }
@ media ( min-width : 768px ) {
. app-header-id { flex-direction : row ; align-items : center ; }
. app-header-text { text-align : left ; }
. app-header-title { justify-content : flex-start ; }
}
@ media ( min-width : 1024px ) {
. app-header { flex-direction : row ; align-items : center ; }
. app-header-actions { width : auto ; justify-content : flex-end ; flex-shrink : 0 ; }
}
2026-08-02 18:19:34 -04:00
/* Layout utilities */
. flex { display : flex ; } . flex-col { flex-direction : column ; }
. items-center { align-items : center ; } . items-start { align-items : flex-start ; } . items-end { align-items : flex-end ; }
. justify-between { justify-content : space-between ; } . justify-center { justify-content : center ; }
. flex-1 { flex : 1 1 0 % ; } . flex-shrink-0 { flex-shrink : 0 ; } . flex-wrap { flex-wrap : wrap ; }
. min-w-0 { min-width : 0 ; } . w-full { width : 100 % ; } . relative { position : relative ; }
2026-03-19 17:02:17 +00:00
. grid { display : grid ; }
2026-08-02 18:19:34 -04:00
. grid-cols-1 { grid-template-columns : repeat ( 1 , minmax ( 0 , 1 fr )); }
. grid-cols-2 { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); }
. grid-cols-3 { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); }
. gap-2 { gap : 0.5 rem ; } . gap-3 { gap : 0.75 rem ; } . gap-4 { gap : 1 rem ; } . gap-6 { gap : 1.5 rem ; }
. mb-1 { margin-bottom : 0.25 rem ; } . mb-2 { margin-bottom : 0.5 rem ; } . mb-3 { margin-bottom : 0.75 rem ; }
. mb-4 { margin-bottom : 1 rem ; } . mb-6 { margin-bottom : 1.5 rem ; } . mb-8 { margin-bottom : 2 rem ; }
. mt-1 { margin-top : 0.25 rem ; } . mt-2 { margin-top : 0.5 rem ; } . mt-3 { margin-top : 0.75 rem ; } . mt-4 { margin-top : 1 rem ; }
. p-2 { padding : 0.5 rem ; } . p-3 { padding : 0.75 rem ; } . p-4 { padding : 1 rem ; } . p-5 { padding : 1.25 rem ; } . p-6 { padding : 1.5 rem ; }
. px-3 { padding-left : 0.75 rem ; padding-right : 0.75 rem ; } . px-4 { padding-left : 1 rem ; padding-right : 1 rem ; } . px-6 { padding-left : 1.5 rem ; padding-right : 1.5 rem ; }
. py-1-5 { padding-top : 0.375 rem ; padding-bottom : 0.375 rem ; } . py-2 { padding-top : 0.5 rem ; padding-bottom : 0.5 rem ; }
. py-2-5 { padding-top : 0.625 rem ; padding-bottom : 0.625 rem ; } . py-3 { padding-top : 0.75 rem ; padding-bottom : 0.75 rem ; }
. rounded-lg { border-radius : 0.5 rem ; } . rounded-xl { border-radius : 0.75 rem ; } . rounded-full { border-radius : 9999 px ; }
2026-03-19 17:02:17 +00:00
. overflow-hidden { overflow : hidden ; }
2026-08-02 18:19:34 -04:00
. text-center { text-align : center ; } . text-right { text-align : right ; }
. text-xs { font-size : 0.75 rem ; } . text-sm { font-size : 0.875 rem ; } . text-base { font-size : 1 rem ; }
. text-lg { font-size : 1.125 rem ; } . text-xl { font-size : 1.25 rem ; } . text-2xl { font-size : 1.5 rem ; }
. text-3xl { font-size : 1.875 rem ; } . text-4xl { font-size : 2.25 rem ; }
. font-bold { font-weight : 700 ; } . font-semibold { font-weight : 600 ; } . font-medium { font-weight : 500 ; }
. font-mono { font-family : ui-monospace , SFMono-Regular , Menlo , monospace ; }
. uppercase { text-transform : uppercase ; } . tracking-wide { letter-spacing : 0.05 em ; }
2026-03-19 17:02:17 +00:00
. truncate { white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
2026-08-02 18:19:34 -04:00
. break-all { word-break : break-all ; }
. tabular { font-variant-numeric : tabular-nums ; }
. text-white { color : #fff ; }
. text-white-90 { color : rgba ( 255 , 255 , 255 , 0.9 ); } . text-white-80 { color : rgba ( 255 , 255 , 255 , 0.8 ); }
. text-white-70 { color : rgba ( 255 , 255 , 255 , 0.7 ); } . text-white-60 { color : rgba ( 255 , 255 , 255 , 0.6 ); }
. text-white-50 { color : rgba ( 255 , 255 , 255 , 0.5 ); } . text-white-45 { color : rgba ( 255 , 255 , 255 , 0.45 ); }
2026-03-19 17:02:17 +00:00
. text-white-40 { color : rgba ( 255 , 255 , 255 , 0.4 ); }
2026-08-02 18:19:34 -04:00
. text-green { color : #4ade80 ; } . text-orange { color : #fb923c ; } . text-red { color : #f87171 ; }
. text-purple { color : #a78bfa ; } . text-yellow { color : #facc15 ; } . text-btc { color : #f7931a ; }
. bg-green { background : #4ade80 ; } . bg-yellow { background : #facc15 ; } . bg-red { background : #f87171 ; }
. bg-grey { background : rgba ( 255 , 255 , 255 , 0.35 ); }
. icon-box { width : 3 rem ; height : 3 rem ; border-radius : 0.75 rem ; background : rgba ( 139 , 92 , 246 , 0.2 ); display : flex ; align-items : center ; justify-content : center ; flex-shrink : 0 ; }
. icon-box-neutral { background : rgba ( 255 , 255 , 255 , 0.1 ); }
. icon-box-btc { background : rgba ( 247 , 147 , 26 , 0.18 ); }
2026-03-19 17:02:17 +00:00
. status-dot { width : 0.75 rem ; height : 0.75 rem ; border-radius : 9999 px ; }
2026-08-02 18:19:34 -04:00
. status-dot-sm { width : 0.5 rem ; height : 0.5 rem ; border-radius : 9999 px ; display : inline-block ; flex-shrink : 0 ; }
. sub-row { display : flex ; align-items : center ; justify-content : space-between ; gap : 0.75 rem ; padding : 0.75 rem ; background : rgba ( 255 , 255 , 255 , 0.05 ); border-radius : 0.5 rem ; }
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
/* Animations */
2026-03-19 17:02:17 +00:00
@ keyframes ping { 75 %, 100 % { transform : scale ( 2 ); opacity : 0 ; } }
2026-08-02 18:19:34 -04:00
. animate-ping { animation : ping 1 s cubic-bezier ( 0 , 0 , 0.2 , 1 ) infinite ; position : absolute ; inset : 0 ; }
@ keyframes spin { from { transform : rotate ( 0 deg ); } to { transform : rotate ( 360 deg ); } }
. animate-spin-slow { animation : spin 3 s linear infinite ; }
@ keyframes shimmer { 0 % { background-position : -1000 px 0 ; } 100 % { background-position : 1000 px 0 ; } }
. shimmer { background : linear-gradient ( 90 deg , rgba ( 255 , 255 , 255 , 0 ) 0 % , rgba ( 255 , 255 , 255 , 0.1 ) 50 % , rgba ( 255 , 255 , 255 , 0 ) 100 % ); background-size : 1000 px 100 % ; animation : shimmer 3 s infinite ; }
@ keyframes progressGlow {
0 %, 100 % { box-shadow : 0 0 10 px rgba ( 167 , 139 , 250 , 0.5 ), 0 0 20 px rgba ( 167 , 139 , 250 , 0.3 ); }
50 % { box-shadow : 0 0 20 px rgba ( 167 , 139 , 250 , 0.8 ), 0 0 30 px rgba ( 167 , 139 , 250 , 0.5 ); }
}
. progress-glow { animation : progressGlow 2 s ease-in-out infinite ; }
@ keyframes fadeUp { from { opacity : 0 ; transform : translateY ( 6 px ); } to { opacity : 1 ; transform : translateY ( 0 ); } }
. tab-panel . active { animation : fadeUp 0.28 s ease both ; }
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
/* ── Primary tab bar (Umbrel's dock, Archipelago-styled) ────────── */
. tabbar-wrap { margin-bottom : 1.5 rem ; }
. tabbar {
display : flex ; gap : 0.25 rem ; padding : 0.3 rem ; border-radius : 0.85 rem ;
background : rgba ( 0 , 0 , 0 , 0.55 ); backdrop-filter : blur ( 24 px ); -webkit- backdrop-filter : blur ( 24 px );
border : 1 px solid rgba ( 255 , 255 , 255 , 0.12 );
box-shadow : 0 8 px 24 px rgba ( 0 , 0 , 0 , 0.45 ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.18 );
overflow-x : auto ; scrollbar-width : none ; -webkit- overflow-scrolling : touch ;
}
. tabbar :: -webkit-scrollbar { display : none ; }
. tab-btn {
flex : 1 0 auto ; display : flex ; align-items : center ; justify-content : center ; gap : 0.5 rem ;
padding : 0.65 rem 1 rem ; border : none ; background : none ; border-radius : 0.6 rem ;
font-size : 0.875 rem ; font-weight : 500 ; color : rgba ( 255 , 255 , 255 , 0.6 );
cursor : pointer ; transition : all 0.25 s ease ; white-space : nowrap ;
}
. tab-btn svg { width : 1.05 rem ; height : 1.05 rem ; flex-shrink : 0 ; }
. tab-btn : hover { color : rgba ( 255 , 255 , 255 , 0.9 ); }
. tab-btn . active {
color : #fff ;
background : linear-gradient ( 135 deg , rgba ( 167 , 139 , 250 , 0.28 ) 0 % , rgba ( 255 , 255 , 255 , 0.08 ) 100 % );
box-shadow : inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.22 );
}
. tab-panel { display : none ; }
. tab-panel . active { display : block ; }
/* ── Balance hero ───────────────────────────────────────────────── */
. balance-hero { display : grid ; grid-template-columns : 1 fr ; gap : 0.75 rem ; }
. balance-tile { padding : 1.15 rem ; background : rgba ( 255 , 255 , 255 , 0.045 ); border : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ); border-radius : 0.85 rem ; }
. balance-tile . label { font-size : 0.6875 rem ; font-weight : 600 ; text-transform : uppercase ; letter-spacing : 0.06 em ; color : rgba ( 255 , 255 , 255 , 0.45 ); margin-bottom : 0.4 rem ; display : flex ; align-items : center ; gap : 0.4 rem ; }
. balance-tile . value { font-size : 1.6 rem ; font-weight : 700 ; line-height : 1.15 ; font-variant-numeric : tabular-nums ; }
. balance-tile . sub { font-size : 0.75 rem ; color : rgba ( 255 , 255 , 255 , 0.45 ); margin-top : 0.25 rem ; }
. balance-tile . total { background : linear-gradient ( 135 deg , rgba ( 167 , 139 , 250 , 0.16 ) 0 % , rgba ( 255 , 255 , 255 , 0.04 ) 100 % ); border-color : rgba ( 167 , 139 , 250 , 0.28 ); }
/* Unit switch (sats / BTC) */
. unit-switch { display : inline-flex ; padding : 0.2 rem ; background : rgba ( 255 , 255 , 255 , 0.07 ); border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); border-radius : 0.6 rem ; }
. unit-switch button { padding : 0.3 rem 0.7 rem ; border : none ; background : none ; border-radius : 0.45 rem ; font-size : 0.75 rem ; font-weight : 600 ; color : rgba ( 255 , 255 , 255 , 0.5 ); cursor : pointer ; transition : all 0.2 s ease ; }
. unit-switch button . active { background : rgba ( 255 , 255 , 255 , 0.16 ); color : #fff ; }
/* Liquidity bar — local (send) vs remote (receive) */
. liq-bar { height : 0.6 rem ; width : 100 % ; border-radius : 9999 px ; background : rgba ( 255 , 255 , 255 , 0.1 ); overflow : hidden ; display : flex ; }
. liq-bar . local { background : linear-gradient ( 90 deg , #a78bfa , #8b5cf6 ); height : 100 % ; transition : width 0.6 s ease ; }
. liq-bar . remote { background : linear-gradient ( 90 deg , #4ade80 , #22c55e ); height : 100 % ; transition : width 0.6 s ease ; }
/* Sync banner */
. progress-track { width : 100 % ; height : 0.6 rem ; background : rgba ( 255 , 255 , 255 , 0.1 ); border-radius : 9999 px ; overflow : hidden ; position : relative ; }
. progress-fill { height : 100 % ; border-radius : 9999 px ; background : linear-gradient ( 90 deg , #8b5cf6 , #facc15 ); transition : width 0.5 s ease ; }
/* Status pill */
. pill { display : inline-flex ; align-items : center ; gap : 0.4 rem ; padding : 0.25 rem 0.6 rem ; border-radius : 9999 px ; font-size : 0.6875 rem ; font-weight : 600 ; letter-spacing : 0.02 em ; background : rgba ( 255 , 255 , 255 , 0.08 ); border : 1 px solid rgba ( 255 , 255 , 255 , 0.12 ); color : rgba ( 255 , 255 , 255 , 0.75 ); }
. pill . ok { background : rgba ( 74 , 222 , 128 , 0.14 ); border-color : rgba ( 74 , 222 , 128 , 0.3 ); color : #4ade80 ; }
. pill . warn { background : rgba ( 250 , 204 , 21 , 0.14 ); border-color : rgba ( 250 , 204 , 21 , 0.3 ); color : #facc15 ; }
. pill . bad { background : rgba ( 248 , 113 , 113 , 0.14 ); border-color : rgba ( 248 , 113 , 113 , 0.3 ); color : #f87171 ; }
/* Field rows with copy */
. field-label { font-size : 0.6875 rem ; font-weight : 600 ; text-transform : uppercase ; letter-spacing : 0.05 em ; color : rgba ( 255 , 255 , 255 , 0.45 ); margin-bottom : 0.25 rem ; }
. field-row { display : flex ; align-items : center ; background : rgba ( 255 , 255 , 255 , 0.06 ); border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); border-radius : 0.5 rem ; overflow : hidden ; min-width : 0 ; }
. field-value { flex : 1 ; min-width : 0 ; padding : 0.625 rem 0.875 rem ; font-family : ui-monospace , SFMono-Regular , Menlo , monospace ; font-size : 0.8125 rem ; color : rgba ( 255 , 255 , 255 , 0.9 ); white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. copy-btn { padding : 0.625 rem 0.75 rem ; background : none ; border : none ; border-left : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); cursor : pointer ; color : rgba ( 255 , 255 , 255 , 0.4 ); transition : all 0.2 s ease ; display : flex ; align-items : center ; flex-shrink : 0 ; }
. copy-btn : hover { color : rgba ( 255 , 255 , 255 , 0.8 ); background : rgba ( 255 , 255 , 255 , 0.05 ); }
. field-row-split { display : flex ; gap : 0.75 rem ; }
. field-row-split > div { flex : 1 ; min-width : 0 ; }
. help-text { margin-top : 1 rem ; padding-top : 1 rem ; border-top : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ); font-size : 0.875 rem ; color : rgba ( 255 , 255 , 255 , 0.5 ); line-height : 1.5 ; }
/* Connect */
2026-03-19 17:02:17 +00:00
. conn-select { width : 100 % ; padding : 0.75 rem 1 rem ; background : rgba ( 255 , 255 , 255 , 0.05 ); border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); border-radius : 0.5 rem ; color : white ; font-size : 0.875 rem ; font-weight : 500 ; appearance : none ; cursor : pointer ; outline : none ; background-image : url ( 'data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>' ); background-repeat : no-repeat ; background-position : right 12 px center ; background-size : 20 px ; }
. conn-select : focus { border-color : rgba ( 255 , 255 , 255 , 0.25 ); }
. conn-select option { background : #1a1a2e ; color : white ; }
. conn-layout { display : flex ; flex-direction : column ; gap : 1.5 rem ; }
2026-08-02 19:00:31 -04:00
/* The QR plate stays square. It sits inside a glass panel that takes
the height of the fields column, so a tall fields list no longer
stretches the white plate into a letterboxed rectangle. */
. qr-panel {
flex-shrink : 0 ; display : flex ; align-items : center ; justify-content : center ;
padding : 1 rem ; background : rgba ( 0 , 0 , 0 , 0.45 );
border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); border-radius : 0.9 rem ;
}
. qr-box { width : 100 % ; max-width : 200 px ; aspect-ratio : 1 ; background : #fff ; border-radius : 0.6 rem ; padding : 0.55 rem ; display : flex ; align-items : center ; justify-content : center ; }
2026-03-19 17:02:17 +00:00
. qr-box img { width : 100 % ; height : auto ; display : block ; image-rendering : pixelated ; }
. conn-fields { flex : 1 ; min-width : 0 ; display : flex ; flex-direction : column ; gap : 0.75 rem ; }
2026-08-02 18:19:34 -04:00
/* Tables (peers / activity) */
. table-scroll { overflow-x : auto ; -webkit- overflow-scrolling : touch ; }
. data-table { width : 100 % ; border-collapse : collapse ; font-size : 0.8125 rem ; }
. data-table th {
text-align : left ; padding : 0.6 rem 0.75 rem ; font-size : 0.6875 rem ; font-weight : 600 ;
text-transform : uppercase ; letter-spacing : 0.05 em ; color : rgba ( 255 , 255 , 255 , 0.45 );
border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); white-space : nowrap ; cursor : pointer ; user-select : none ;
2026-03-19 17:02:17 +00:00
}
2026-08-02 18:19:34 -04:00
. data-table th : hover { color : rgba ( 255 , 255 , 255 , 0.75 ); }
. data-table th . caret { opacity : 0.35 ; font-size : 0.6 rem ; margin-left : 0.25 rem ; }
. data-table th . sorted . caret { opacity : 1 ; }
. data-table td { padding : 0.65 rem 0.75 rem ; border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.06 ); color : rgba ( 255 , 255 , 255 , 0.8 ); vertical-align : middle ; }
. data-table tr : last-child td { border-bottom : none ; }
. data-table tbody tr { transition : background 0.2 s ease ; }
. data-table tbody tr : hover { background : rgba ( 255 , 255 , 255 , 0.04 ); }
. filter-input {
width : 100 % ; padding : 0.55 rem 0.85 rem ; background : rgba ( 0 , 0 , 0 , 0.4 );
border : 1 px solid rgba ( 255 , 255 , 255 , 0.12 ); border-radius : 0.5 rem ;
color : white ; font-size : 0.8125 rem ; outline : none ;
}
. filter-input :: placeholder { color : rgba ( 255 , 255 , 255 , 0.35 ); }
. filter-input : focus { border-color : rgba ( 167 , 139 , 250 , 0.5 ); }
/* Activity list */
. act-row { display : flex ; align-items : center ; gap : 0.85 rem ; padding : 0.75 rem ; border-radius : 0.6 rem ; transition : background 0.2 s ease ; }
. act-row : hover { background : rgba ( 255 , 255 , 255 , 0.04 ); }
. act-icon { width : 2.15 rem ; height : 2.15 rem ; border-radius : 9999 px ; display : flex ; align-items : center ; justify-content : center ; flex-shrink : 0 ; }
. act-icon . in { background : rgba ( 74 , 222 , 128 , 0.15 ); color : #4ade80 ; }
. act-icon . out { background : rgba ( 167 , 139 , 250 , 0.18 ); color : #a78bfa ; }
. act-icon . pending { background : rgba ( 250 , 204 , 21 , 0.15 ); color : #facc15 ; }
. act-icon . failed { background : rgba ( 248 , 113 , 113 , 0.15 ); color : #f87171 ; }
. chip-row { display : flex ; gap : 0.4 rem ; flex-wrap : wrap ; }
. chip { padding : 0.35 rem 0.8 rem ; border-radius : 9999 px ; font-size : 0.75 rem ; font-weight : 500 ; background : rgba ( 255 , 255 , 255 , 0.07 ); border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); color : rgba ( 255 , 255 , 255 , 0.6 ); cursor : pointer ; transition : all 0.2 s ease ; }
. chip : hover { color : rgba ( 255 , 255 , 255 , 0.9 ); }
. chip . active { background : rgba ( 167 , 139 , 250 , 0.22 ); border-color : rgba ( 167 , 139 , 250 , 0.4 ); color : #fff ; }
. empty-state { padding : 2.5 rem 1 rem ; text-align : center ; color : rgba ( 255 , 255 , 255 , 0.4 ); font-size : 0.875 rem ; }
. logs-box { background : rgba ( 0 , 0 , 0 , 0.45 ); border-radius : 0.5 rem ; padding : 1 rem ; font-family : ui-monospace , SFMono-Regular , Menlo , monospace ; font-size : 0.75 rem ; color : rgba ( 255 , 255 , 255 , 0.8 ); white-space : pre-wrap ; word-break : break-all ; min-height : 220 px ; max-height : 55 vh ; overflow-y : auto ; }
. skel { display : inline-block ; height : 0.85 em ; width : 4.5 rem ; border-radius : 0.25 rem ; background : rgba ( 255 , 255 , 255 , 0.1 ); }
/* ── Responsive ─────────────────────────────────────────────────── */
@ media ( min-width : 640px ) {
. sm-grid-cols-2 { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); }
. sm-grid-cols-3 { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); }
. balance-hero { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); }
. conn-layout { flex-direction : row ; }
2026-08-02 19:00:31 -04:00
. qr-box { width : 200 px ; }
2026-08-02 18:19:34 -04:00
}
@ media ( min-width : 768px ) {
. md-grid-cols-2 { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); }
. md-grid-cols-3 { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); }
. md-grid-cols-4 { grid-template-columns : repeat ( 4 , minmax ( 0 , 1 fr )); }
. md-flex-row { flex-direction : row ; }
. md-text-right { text-align : right ; }
}
@ media ( min-width : 1024px ) {
. lg-grid-cols-2 { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); }
. lg-grid-cols-3 { grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); }
. lg-grid-cols-4 { grid-template-columns : repeat ( 4 , minmax ( 0 , 1 fr )); }
}
/* Mobile: the tab bar becomes a bottom dock, like umbrelOS. */
@ media ( max-width : 767px ) {
. container { padding : 1 rem ; padding-bottom : 6.5 rem ; }
. balance-tile . value { font-size : 1.35 rem ; }
. logo-gradient-border img { width : 52 px ; height : 52 px ; }
. tabbar-wrap {
position : fixed ; left : 0 ; right : 0 ; bottom : 0 ; z-index : 40 ;
margin : 0 ; padding : 0.5 rem 0.75 rem calc ( 0.5 rem + env ( safe - area - inset - bottom , 0 px ));
background : linear-gradient ( to top , rgba ( 0 , 0 , 0 , 0.9 ) 55 % , rgba ( 0 , 0 , 0 , 0 ));
}
. tabbar { border-radius : 1 rem ; }
. tab-btn { flex : 1 1 0 ; flex-direction : column ; gap : 0.2 rem ; padding : 0.5 rem 0.35 rem ; font-size : 0.625 rem ; }
. tab-btn svg { width : 1.25 rem ; height : 1.25 rem ; }
. hide-mobile { display : none ; }
. data-table th , . data-table td { padding : 0.55 rem 0.5 rem ; }
}
@ media ( min-width : 768px ) { . only-mobile { display : none ; } }
2026-03-19 17:02:17 +00:00
</ style >
</ head >
< body >
2026-08-02 18:19:34 -04:00
< div class = "bg-perspective-container" >< div class = "bg-layer" ></ div ></ div >
2026-03-19 17:02:17 +00:00
< div class = "overlay" ></ div >
< div class = "container" >
2026-08-02 18:19:34 -04:00
<!-- ── Header ──────────────────────────────────────────────────── -->
2026-03-19 17:02:17 +00:00
< div class = "glass-card p-6 mb-6" >
2026-08-02 19:00:31 -04:00
< div class = "app-header" >
< div class = "app-header-id" >
< div class = "flex-shrink-0" >
< div class = "logo-gradient-border" >
< img src = "assets/img/app-icons/lnd.png" alt = "LND" onerror = "this.style.display='none'" />
</ div >
</ div >
< div class = "app-header-text flex-1" >
< div class = "app-header-title" >
< h1 class = "text-2xl font-bold text-white" > LND</ h1 >
< span class = "pill" id = "headerStatusPill" >
< span class = "status-dot-sm bg-grey" id = "headerStatusDot" ></ span >
< span id = "headerStatusText" > Connecting…</ span >
</ span >
< span class = "pill" id = "headerNetworkPill" style = "display:none" ></ span >
</ div >
< p class = "text-white-70 text-sm" id = "headerAlias" > Lightning Network Daemon for instant Bitcoin payments</ p >
< p class = "text-xs text-white-40 mt-1 font-mono truncate" id = "headerPubkey" > — </ p >
2026-08-02 18:19:34 -04:00
</ div >
</ div >
2026-08-02 19:00:31 -04:00
< div class = "app-header-actions" >
2026-08-02 18:19:34 -04:00
< div class = "unit-switch" role = "group" aria-label = "Display unit" >
< button id = "unitSats" class = "active" onclick = "setUnit('sats')" > sats</ button >
< button id = "unitBtc" onclick = "setUnit('btc')" > BTC</ button >
</ div >
2026-08-02 19:00:31 -04:00
< button onclick = "refreshAll()" class = "info-card-button compact" id = "refreshBtn" title = "Refresh" >
2026-08-02 18:19:34 -04:00
< svg style = "width:1.1rem;height:1.1rem" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" id = "refreshIcon" >
< path stroke-linecap = "round" stroke-linejoin = "round" d = "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</ svg >
< span class = "hide-mobile" > Refresh</ span >
</ button >
</ div >
</ div >
</ div >
<!-- ── Sync banner (only while the node is not fully synced) ────── -->
< div class = "glass-card p-6 mb-6" id = "syncCard" style = "display:none" >
< div class = "flex items-start gap-4 mb-4" >
< div class = "icon-box" >
< svg style = "width:1.5rem;height:1.5rem;color:#a78bfa" class = "animate-spin-slow" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >
< path stroke-linecap = "round" stroke-linejoin = "round" d = "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</ svg >
2026-03-19 17:02:17 +00:00
</ div >
< div class = "flex-1 min-w-0" >
2026-08-02 18:19:34 -04:00
< h2 class = "text-xl font-semibold text-white mb-1" > Synchronizing</ h2 >
< p class = "text-white-70 text-sm" id = "syncSubtitle" > Waiting for the Bitcoin backend…</ p >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
</ div >
< div class = "flex justify-between text-sm text-white-60 mb-2" >
< span id = "syncBlockLabel" > Block — </ span >
< span id = "syncPercent" > — </ span >
</ div >
< div class = "progress-track shimmer" >
< div class = "progress-fill progress-glow" id = "syncProgressBar" style = "width:0%" ></ div >
</ div >
< div class = "grid grid-cols-2 md-grid-cols-4 gap-3 mt-4" >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Chain</ p >
< p class = "text-sm font-semibold text-white" id = "syncChain" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Graph</ p >
< p class = "text-sm font-semibold text-white" id = "syncGraph" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Block Height</ p >
< p class = "text-sm font-semibold text-white tabular" id = "syncHeight" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Peers</ p >
< p class = "text-sm font-semibold text-white tabular" id = "syncPeers" > — </ p >
</ div >
</ div >
</ div >
<!-- ── Tab bar ─────────────────────────────────────────────────── -->
< div class = "tabbar-wrap" >
< div class = "tabbar" role = "tablist" >
< button class = "tab-btn active" data-tab = "overview" role = "tab" >
< svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3v-6h6v6h3a1 1 0 001-1V10" /></ svg >
< span > Overview</ span >
</ button >
< button class = "tab-btn" data-tab = "channels" role = "tab" >
< svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></ svg >
< span > Channels</ span >
</ button >
< button class = "tab-btn" data-tab = "activity" role = "tab" >
< svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M4 12h4l2-7 4 14 2-7h4" /></ svg >
< span > Activity</ span >
</ button >
< button class = "tab-btn" data-tab = "insights" role = "tab" >
< svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M3 3v18h18M7 15l3-4 3 3 5-7" /></ svg >
< span > Insights</ span >
</ button >
< button class = "tab-btn" data-tab = "connect" role = "tab" >
< svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h2v2h-2zM18 14h2v2h-2zM14 18h2v2h-2zM18 18h2v2h-2z" /></ svg >
< span > Connect</ span >
</ button >
< button class = "tab-btn" data-tab = "settings" role = "tab" >
< svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />< path stroke-linecap = "round" stroke-linejoin = "round" d = "M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></ svg >
< span > Settings</ span >
2026-03-19 17:02:17 +00:00
</ button >
</ div >
</ div >
2026-08-02 18:19:34 -04:00
<!-- ══ OVERVIEW ══════════════════════════════════════════════════ -->
< div class = "tab-panel active" id = "panel-overview" >
<!-- Balances -->
< div class = "glass-card p-6 mb-6" >
< div class = "flex items-center justify-between gap-4 mb-4" >
< div class = "flex items-center gap-4 min-w-0" >
< div class = "icon-box" >
< svg style = "width:1.4rem;height:1.4rem;color:#a78bfa" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></ svg >
</ div >
< div class = "min-w-0" >
< h2 class = "text-xl font-semibold text-white" > Balance</ h2 >
< p class = "text-white-60 text-sm" > Funds held by this node</ p >
</ div >
2026-03-19 17:02:17 +00:00
</ div >
</ div >
2026-08-02 18:19:34 -04:00
< div class = "balance-hero mb-4" >
< div class = "balance-tile total" >
< div class = "label" > Total</ div >
< div class = "value text-white" id = "balTotal" > — </ div >
< div class = "sub" id = "balTotalSub" > on-chain + lightning</ div >
</ div >
< div class = "balance-tile" >
< div class = "label" >< span class = "text-purple" > ⚡ </ span > Lightning</ div >
< div class = "value text-purple" id = "balLightning" > — </ div >
< div class = "sub" id = "balLightningSub" > — </ div >
</ div >
< div class = "balance-tile" >
< div class = "label" >< span class = "text-btc" > ₿ </ span > On-chain</ div >
< div class = "value text-btc" id = "balOnchain" > — </ div >
< div class = "sub" id = "balOnchainSub" > — </ div >
</ div >
</ div >
<!-- Liquidity (Umbrel: Max Send / Max Receive) -->
< div class = "p-4" style = "background:rgba(255,255,255,0.04);border-radius:0.75rem;border:1px solid rgba(255,255,255,0.08)" >
< div class = "flex items-center justify-between mb-2" >
< div >
< div class = "text-xs text-white-50 uppercase tracking-wide mb-1" > Max Send</ div >
< div class = "text-base font-semibold text-purple tabular" id = "liqLocal" > — </ div >
</ div >
< div class = "text-right" >
< div class = "text-xs text-white-50 uppercase tracking-wide mb-1" > Max Receive</ div >
< div class = "text-base font-semibold text-green tabular" id = "liqRemote" > — </ div >
</ div >
</ div >
< div class = "liq-bar" >
< div class = "local" id = "liqBarLocal" style = "width:50%" ></ div >
< div class = "remote" id = "liqBarRemote" style = "width:50%" ></ div >
</ div >
< p class = "text-xs text-white-40 mt-2" id = "liqHint" > Outbound liquidity lets you send; inbound liquidity lets you receive.</ p >
</ div >
</ div >
<!-- Summary stats -->
< div class = "grid grid-cols-2 md-grid-cols-4 gap-3 mb-6" >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Connections</ p >
< p class = "text-2xl font-bold text-white tabular" id = "statPeers" > — </ p >
< p class = "text-xs text-white-40 mt-1" > peers</ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Active Channels</ p >
< p class = "text-2xl font-bold text-orange tabular" id = "statActiveChannels" > — </ p >
< p class = "text-xs text-white-40 mt-1" id = "statChannelsSub" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Total Capacity</ p >
< p class = "text-2xl font-bold text-white tabular" id = "statCapacity" > — </ p >
< p class = "text-xs text-white-40 mt-1" > across all channels</ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Routing Earned</ p >
< p class = "text-2xl font-bold text-green tabular" id = "statRoutingMonth" > — </ p >
< p class = "text-xs text-white-40 mt-1" > last 30 days</ p >
</ div >
</ div >
<!-- Channels + node health -->
< div class = "grid grid-cols-1 lg-grid-cols-2 gap-6" >
< a class = "info-card-button p-5" id = "channelsLinkCard" href = "#" target = "_top" >
< div class = "flex items-center gap-4" >
< div class = "icon-box" >
< svg style = "width:1.4rem;height:1.4rem;color:#a78bfa" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></ svg >
</ div >
< div class = "flex-1 min-w-0" >
< h3 class = "text-lg font-semibold text-white mb-1" > Payment Channels</ h3 >
< p class = "text-white-60 text-sm" id = "channelsLinkSub" > Open, manage and close channels</ p >
</ div >
< svg style = "width:1.25rem;height:1.25rem;color:rgba(255,255,255,0.5);flex-shrink:0" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M9 5l7 7-7 7" /></ svg >
</ div >
</ a >
< div class = "glass-card p-5" >
< h3 class = "text-lg font-semibold text-white mb-3" > Node Health</ h3 >
< div class = "flex flex-col gap-2" >
< div class = "sub-row" >
< span class = "text-white-80 text-sm" > Synced to chain</ span >
< span class = "pill" id = "healthChain" > — </ span >
</ div >
< div class = "sub-row" >
< span class = "text-white-80 text-sm" > Synced to graph</ span >
< span class = "pill" id = "healthGraph" > — </ span >
</ div >
< div class = "sub-row" >
< span class = "text-white-80 text-sm" > Block height</ span >
< span class = "text-white-60 text-sm font-mono tabular" id = "healthHeight" > — </ span >
</ div >
< div class = "sub-row" >
< span class = "text-white-80 text-sm" > Pending channels</ span >
< span class = "text-white-60 text-sm tabular" id = "healthPending" > — </ span >
</ div >
</ div >
</ div >
</ div >
</ div >
<!-- ══ CHANNELS ══════════════════════════════════════════════════ -->
< div class = "tab-panel" id = "panel-channels" >
< div class = "glass-card p-6 mb-6" >
< div class = "flex flex-col md-flex-row items-start gap-4 justify-between mb-5" >
< div class = "flex items-start gap-4 min-w-0" >
< div class = "icon-box" >
< svg style = "width:1.4rem;height:1.4rem;color:#a78bfa" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></ svg >
</ div >
< div class = "min-w-0" >
< h2 class = "text-xl font-semibold text-white mb-1" > Payment Channels</ h2 >
< p class = "text-white-60 text-sm" > Full channel management — opening, balancing and closing — lives in the Archipelago channels view.</ p >
</ div >
</ div >
< a class = "gradient-button px-4 py-2-5 rounded-lg text-sm font-medium flex-shrink-0 flex items-center gap-2" id = "channelsOpenBtn" href = "#" target = "_top" style = "text-decoration:none" >
Manage Channels
< svg style = "width:1rem;height:1rem" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M13 7l5 5-5 5M6 12h12" /></ svg >
</ a >
</ div >
< div class = "grid grid-cols-2 md-grid-cols-4 gap-3" >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Active</ p >
< p class = "text-xl font-bold text-green tabular" id = "chActive" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Inactive</ p >
< p class = "text-xl font-bold text-white-60 tabular" id = "chInactive" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Pending</ p >
< p class = "text-xl font-bold text-yellow tabular" id = "chPending" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Capacity</ p >
< p class = "text-xl font-bold text-white tabular" id = "chCapacity" > — </ p >
</ div >
</ div >
</ div >
<!-- Compact read-only channel list; the full view is the Archipelago one -->
< div class = "glass-card p-6" >
< div class = "flex items-center justify-between gap-3 mb-4" >
< h3 class = "text-lg font-semibold text-white" > Channel Overview</ h3 >
< input class = "filter-input" style = "max-width:16rem" id = "channelFilter" placeholder = "Filter channels…" oninput = "renderChannels()" >
</ div >
< div id = "channelList" >< div class = "empty-state" > Loading channels…</ div ></ div >
</ div >
</ div >
<!-- ══ ACTIVITY ══════════════════════════════════════════════════ -->
< div class = "tab-panel" id = "panel-activity" >
< div class = "glass-card p-6" >
< div class = "flex flex-col md-flex-row items-start gap-4 justify-between mb-4" >
< div class = "min-w-0" >
< h2 class = "text-xl font-semibold text-white mb-1" > Activity</ h2 >
< p class = "text-white-60 text-sm" > Recent Lightning payments, invoices and on-chain transactions.</ p >
</ div >
< div class = "chip-row flex-shrink-0" >
< button class = "chip active" data-filter = "all" onclick = "setActivityFilter('all')" > All</ button >
< button class = "chip" data-filter = "lightning" onclick = "setActivityFilter('lightning')" > Lightning</ button >
< button class = "chip" data-filter = "onchain" onclick = "setActivityFilter('onchain')" > On-chain</ button >
</ div >
</ div >
< div id = "activityList" >< div class = "empty-state" > Loading activity…</ div ></ div >
</ div >
</ div >
<!-- ══ INSIGHTS ══════════════════════════════════════════════════ -->
< div class = "tab-panel" id = "panel-insights" >
<!-- Routing revenue -->
< div class = "glass-card p-6 mb-6" >
< div class = "flex items-start gap-4 mb-4" >
< div class = "icon-box" >
< svg style = "width:1.4rem;height:1.4rem;color:#4ade80" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M3 3v18h18M7 15l3-4 3 3 5-7" /></ svg >
</ div >
< div class = "flex-1 min-w-0" >
< h2 class = "text-xl font-semibold text-white mb-1" > Routing Revenue</ h2 >
< p class = "text-white-60 text-sm" > Fees earned forwarding payments for the network.</ p >
</ div >
</ div >
< div class = "grid grid-cols-1 sm-grid-cols-3 gap-3" >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Last 24 hours</ p >
< p class = "text-2xl font-bold text-green tabular" id = "feeDay" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Last 7 days</ p >
< p class = "text-2xl font-bold text-green tabular" id = "feeWeek" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Last 30 days</ p >
< p class = "text-2xl font-bold text-green tabular" id = "feeMonth" > — </ p >
</ div >
</ div >
</ div >
<!-- Node totals -->
< div class = "grid grid-cols-2 md-grid-cols-4 gap-3 mb-6" >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Sent</ p >
< p class = "text-lg font-semibold text-purple tabular" id = "insSent" > — </ p >
< p class = "text-xs text-white-40 mt-1" > over channels</ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Received</ p >
< p class = "text-lg font-semibold text-green tabular" id = "insReceived" > — </ p >
< p class = "text-xs text-white-40 mt-1" > over channels</ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Channel Updates</ p >
< p class = "text-lg font-semibold text-white tabular" id = "insUpdates" > — </ p >
< p class = "text-xs text-white-40 mt-1" > state transitions</ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Avg. Channel Age</ p >
< p class = "text-lg font-semibold text-white" id = "insAge" > — </ p >
< p class = "text-xs text-white-40 mt-1" > since open</ p >
</ div >
</ div >
<!-- Lightning Network graph -->
< div class = "glass-card p-6 mb-6" >
< h3 class = "text-lg font-semibold text-white mb-1" > Lightning Network</ h3 >
< p class = "text-white-60 text-sm mb-4" > What this node sees of the public network graph.</ p >
< div class = "grid grid-cols-2 md-grid-cols-4 gap-3" >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Nodes</ p >
< p class = "text-lg font-semibold text-white tabular" id = "graphNodes" > — </ p >
</ div >
< div class = "info-card" >
2026-03-19 17:02:17 +00:00
< p class = "text-xs text-white-60 mb-1" > Channels</ p >
2026-08-02 18:19:34 -04:00
< p class = "text-lg font-semibold text-white tabular" id = "graphChannels" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Network Capacity</ p >
< p class = "text-lg font-semibold text-white tabular" id = "graphCapacity" > — </ p >
</ div >
< div class = "info-card" >
< p class = "text-xs text-white-60 mb-1" > Avg. Channel Size</ p >
< p class = "text-lg font-semibold text-white tabular" id = "graphAvgSize" > — </ p >
2026-03-19 17:02:17 +00:00
</ div >
</ div >
2026-08-02 18:19:34 -04:00
</ div >
<!-- Peers table (Umbrel PeersTable parity) -->
< div class = "glass-card p-6" >
< div class = "flex flex-col md-flex-row items-start justify-between gap-3 mb-4" >
2026-07-14 03:39:56 +01:00
< div >
2026-08-02 18:19:34 -04:00
< h3 class = "text-lg font-semibold text-white mb-1" > Peers < span class = "text-white-40 text-sm font-medium" id = "peersCount" ></ span ></ h3 >
< p class = "text-white-60 text-sm" > Nodes this node holds a live connection to.</ p >
2026-07-14 03:39:56 +01:00
</ div >
2026-08-02 18:19:34 -04:00
< input class = "filter-input" style = "max-width:16rem" id = "peerFilter" placeholder = "Filter peers…" oninput = "renderPeers()" >
2026-07-14 03:39:56 +01:00
</ div >
2026-08-02 18:19:34 -04:00
< div class = "table-scroll" >
< table class = "data-table" >
< thead >
< tr >
< th onclick = "sortPeers('peer')" data-col = "peer" > Peer< span class = "caret" > ▼ </ span ></ th >
< th onclick = "sortPeers('network')" data-col = "network" > Network< span class = "caret" > ▼ </ span ></ th >
< th onclick = "sortPeers('direction')" data-col = "direction" > In/Out< span class = "caret" > ▼ </ span ></ th >
< th onclick = "sortPeers('ping')" data-col = "ping" > Ping< span class = "caret" > ▼ </ span ></ th >
< th onclick = "sortPeers('sent')" data-col = "sent" > Sent< span class = "caret" > ▼ </ span ></ th >
< th onclick = "sortPeers('recv')" data-col = "recv" > Received< span class = "caret" > ▼ </ span ></ th >
</ tr >
</ thead >
< tbody id = "peersBody" >
< tr >< td colspan = "6" >< div class = "empty-state" > Loading peers…</ div ></ td ></ tr >
</ tbody >
</ table >
2026-03-19 17:02:17 +00:00
</ div >
</ div >
</ div >
2026-08-02 18:19:34 -04:00
<!-- ══ CONNECT ═══════════════════════════════════════════════════ -->
< div class = "tab-panel" id = "panel-connect" >
< div class = "glass-card p-6 mb-6" >
< h2 class = "text-xl font-semibold text-white mb-1" > Connect Your Wallet</ h2 >
< p class = "text-white-70 text-sm mb-4" id = "connSubtitle" > Use a wallet like Zeus, Zap, or BlueWallet to connect remotely.</ p >
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
< div class = "mb-4" >
< select id = "connMode" onchange = "updateConnInfo()" class = "conn-select" >
< option value = "rest-tor" > REST (Tor)</ option >
< option value = "rest-local" > REST (Local Network)</ option >
< option value = "grpc-tor" > gRPC (Tor)</ option >
< option value = "grpc-local" > gRPC (Local Network)</ option >
</ select >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
< div class = "conn-layout" id = "connDisplay" >
2026-08-02 19:00:31 -04:00
< div class = "qr-panel" >
< div class = "qr-box" id = "lndQrBox" >
< div style = "color:#999;font-size:12px;text-align:center;padding:2rem" > Loading…</ div >
</ div >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
< div class = "conn-fields" >
2026-03-19 17:02:17 +00:00
< div >
2026-08-02 18:19:34 -04:00
< div class = "field-label" > Host</ div >
2026-03-19 17:02:17 +00:00
< div class = "field-row" >
2026-08-02 18:19:34 -04:00
< span class = "field-value" id = "connHost" > — </ span >
< button class = "copy-btn" onclick = "copyEl('connHost', this)" title = "Copy" aria-label = "Copy host" >
2026-03-19 17:02:17 +00:00
< svg width = "16" height = "16" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >< rect x = "9" y = "9" width = "13" height = "13" rx = "2" ry = "2" stroke-width = "2" />< path d = "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width = "2" /></ svg >
</ button >
</ div >
</ div >
2026-08-02 18:19:34 -04:00
< div class = "field-row-split" >
< div >
< div class = "field-label" > Port</ div >
< div class = "field-row" >
< span class = "field-value" id = "connPort" > — </ span >
< button class = "copy-btn" onclick = "copyEl('connPort', this)" title = "Copy" aria-label = "Copy port" >
< svg width = "16" height = "16" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >< rect x = "9" y = "9" width = "13" height = "13" rx = "2" ry = "2" stroke-width = "2" />< path d = "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width = "2" /></ svg >
</ button >
</ div >
</ div >
< div >
< div class = "field-label" > Protocol</ div >
< div class = "field-row" >
< span class = "field-value" id = "connProto" > — </ span >
</ div >
2026-03-19 17:02:17 +00:00
</ div >
</ div >
2026-08-02 18:19:34 -04:00
< button onclick = "copyLndconnectUri()" class = "gradient-button w-full mt-2 px-4 py-2-5 rounded-lg text-sm font-medium" id = "copyUriBtn" > Copy lndconnect URI</ button >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
</ div >
< div class = "help-text" >
Scan the QR code with < strong style = "color:rgba(255,255,255,0.8)" > Zeus</ strong > , < strong style = "color:rgba(255,255,255,0.8)" > Zap</ strong > , or < strong style = "color:rgba(255,255,255,0.8)" > BlueWallet</ strong > to connect. Tor mode is recommended for remote access — Local Network mode sends the macaroon unencrypted over your LAN.
2026-03-19 17:02:17 +00:00
</ div >
</ div >
2026-08-02 18:19:34 -04:00
<!-- Node ID (Umbrel NodeIdModal parity) -->
< div class = "glass-card p-6" >
< h2 class = "text-xl font-semibold text-white mb-1" > Node ID</ h2 >
< p class = "text-white-70 text-sm mb-4" > Share this so other nodes can open a channel with you.</ p >
< div class = "conn-layout" >
2026-08-02 19:00:31 -04:00
< div class = "qr-panel" >
< div class = "qr-box" id = "nodeIdQrBox" >
< div style = "color:#999;font-size:12px;text-align:center;padding:2rem" > — </ div >
</ div >
2026-08-02 18:19:34 -04:00
</ div >
< div class = "conn-fields" >
< div >
< div class = "field-label" > Public Key</ div >
< div class = "field-row" >
< span class = "field-value" id = "nodePubkey" > — </ span >
< button class = "copy-btn" onclick = "copyEl('nodePubkey', this)" title = "Copy" aria-label = "Copy public key" >
< svg width = "16" height = "16" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >< rect x = "9" y = "9" width = "13" height = "13" rx = "2" ry = "2" stroke-width = "2" />< path d = "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width = "2" /></ svg >
</ button >
</ div >
</ div >
< div id = "nodeUriWrap" >
< div class = "field-label" > Node URI</ div >
< div class = "field-row" >
< span class = "field-value" id = "nodeUri" > — </ span >
< button class = "copy-btn" onclick = "copyEl('nodeUri', this)" title = "Copy" aria-label = "Copy node URI" >
< svg width = "16" height = "16" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >< rect x = "9" y = "9" width = "13" height = "13" rx = "2" ry = "2" stroke-width = "2" />< path d = "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width = "2" /></ svg >
</ button >
</ div >
< p class = "text-xs text-white-40 mt-2" id = "nodeUriHint" ></ p >
</ div >
</ div >
</ div >
2026-03-19 17:02:17 +00:00
</ div >
</ div >
2026-08-02 18:19:34 -04:00
<!-- ══ SETTINGS ══════════════════════════════════════════════════ -->
< div class = "tab-panel" id = "panel-settings" >
< div class = "grid grid-cols-1 lg-grid-cols-2 gap-6 mb-6" >
< div class = "glass-card p-6" >
< div class = "flex items-start gap-4 mb-4" >
< div class = "icon-box" >
< svg style = "width:1.4rem;height:1.4rem;color:#a78bfa" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M13 10V3L4 14h7v7l9-11h-7z" /></ svg >
</ div >
< div class = "flex-1 min-w-0" >
< h2 class = "text-xl font-semibold text-white mb-1" > Node</ h2 >
< p class = "text-white-60 text-sm" > Identity and chain configuration</ p >
</ div >
</ div >
< div class = "flex flex-col gap-2" >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Status</ span >< span class = "text-sm font-medium" id = "setStatus" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Alias</ span >< span class = "text-white-60 text-sm truncate" id = "setAlias" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Version</ span >< span class = "text-white-60 text-sm font-mono truncate" id = "setVersion" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Network</ span >< span class = "text-white-60 text-sm" id = "setNetwork" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Chain</ span >< span class = "text-white-60 text-sm" id = "setChain" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Commit hash</ span >< span class = "text-white-60 text-sm font-mono truncate" id = "setCommit" > — </ span ></ div >
</ div >
</ div >
< div class = "glass-card p-6" >
< div class = "flex items-start gap-4 mb-4" >
< div class = "icon-box icon-box-neutral" >
< svg style = "width:1.4rem;height:1.4rem;color:rgba(255,255,255,0.8)" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></ svg >
</ div >
< div class = "flex-1 min-w-0" >
< h2 class = "text-xl font-semibold text-white mb-1" > Interfaces</ h2 >
< p class = "text-white-60 text-sm" > API endpoints exposed by this node</ p >
</ div >
</ div >
< div class = "flex flex-col gap-2" >
< div class = "sub-row" >
< span class = "flex items-center gap-2 text-white-80 text-sm" >< span class = "status-dot-sm bg-grey" id = "restDot" ></ span > REST API</ span >
< span class = "text-white-60 text-sm font-mono truncate" id = "setRest" > — </ span >
</ div >
< div class = "sub-row" >
< span class = "flex items-center gap-2 text-white-80 text-sm" >< span class = "status-dot-sm bg-grey" id = "grpcDot" ></ span > gRPC</ span >
< span class = "text-white-60 text-sm font-mono truncate" id = "setGrpc" > — </ span >
</ div >
< div class = "sub-row" >
< span class = "text-white-80 text-sm" > P2P</ span >
< span class = "text-white-60 text-sm font-mono" id = "setP2p" > — </ span >
</ div >
< div class = "sub-row" >
< span class = "text-white-80 text-sm" > Tor hidden service</ span >
< span class = "text-white-60 text-sm font-mono truncate" id = "setTor" > — </ span >
</ div >
</ div >
< button class = "info-card-button w-full mt-4 text-sm font-medium text-center" onclick = "copyEndpointInfo(this)" > Copy Connection Info</ button >
</ div >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
<!-- Advanced settings live in the orchestrator, not here -->
< div class = "glass-card p-6 mb-6" >
< h3 class = "text-lg font-semibold text-white mb-1" > Advanced Configuration</ h3 >
< p class = "text-white-60 text-sm mb-4" >
LND's runtime configuration is manifest-declared and owned by the Archipelago orchestrator, so it stays reproducible across reinstalls and node migrations. This panel reflects the values the node is running with.
</ p >
< div class = "grid grid-cols-1 md-grid-cols-2 gap-3" >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Bitcoin backend</ span >< span class = "text-white-60 text-sm" id = "cfgBackend" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Watchtower client</ span >< span class = "text-white-60 text-sm" id = "cfgWatchtower" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Keysend</ span >< span class = "text-white-60 text-sm" id = "cfgKeysend" > — </ span ></ div >
< div class = "sub-row" >< span class = "text-white-80 text-sm" > Wumbo channels</ span >< span class = "text-white-60 text-sm" id = "cfgWumbo" > — </ span ></ div >
</ div >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
<!-- Logs -->
< div class = "glass-card p-6" >
< div class = "flex justify-between items-center gap-3 mb-3" >
< h3 class = "text-lg font-semibold text-white" > Node Logs</ h3 >
2026-08-02 19:00:31 -04:00
< button onclick = "loadLogs()" class = "info-card-button compact" style = "font-size:0.75rem;padding:0.45rem 0.8rem" > Refresh</ button >
2026-03-19 17:02:17 +00:00
</ div >
2026-08-02 18:19:34 -04:00
< div class = "logs-box" id = "logsContent" > Open this tab to load logs.</ div >
2026-03-19 17:02:17 +00:00
</ div >
</ div >
</ div >
< script src = "qrcode.js" ></ script >
< script >
2026-08-02 18:19:34 -04:00
'use strict';
2026-03-19 17:02:17 +00:00
const REST_PORT = 8080;
const GRPC_PORT = 10009;
const P2P_PORT = 9735;
const host = window.location.hostname;
2026-08-02 18:19:34 -04:00
// Same-origin by default: the app's own nginx (:18083) proxies these paths
// to the archipelago backend, so a relative base ('') avoids any
// cross-origin/CORS issues (which broke this on http-only nodes).
// ?backend=http://HOST:5678 still overrides for local dev.
2026-03-19 17:02:17 +00:00
function getBackendUrl() {
2026-08-02 18:19:34 -04:00
return new URLSearchParams(window.location.search).get('backend') || '';
2026-03-19 17:02:17 +00:00
}
2026-08-02 19:33:21 -04:00
// The full channel-management UI is the Archipelago one, served by the
// main UI on the standard web port — not this app's :18083, so the port
// is dropped. The /dashboard prefix matters: the route is a CHILD of
// the /dashboard record in neode-ui/src/router/index.ts, so bare
// /apps/lnd/channels is not a route at all. nginx's SPA fallback still
// returns 200 for it, so it fails as vue-router's NotFound view rather
// than an HTTP 404 — which is exactly how it presented on archi-dev-box.
const CHANNELS_URL = window.location.protocol + '//' + window.location.hostname + '/dashboard/apps/lnd/channels';
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
// ── State ───────────────────────────────────────────────────────
let unit = 'sats';
let state = { info: null, channels: [], pending: null, peers: [], payments: [], invoices: [], txns: [], fees: null, graph: null };
let peerSort = { col: 'peer', dir: 1 };
let activityFilter = 'all';
let logsLoaded = false;
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
try { unit = localStorage.getItem('lndui.unit') || 'sats'; } catch (_) {}
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
// ── Formatting ──────────────────────────────────────────────────
function num(v) { const n = Number(v); return isFinite(n) ? n : 0; }
2026-03-19 17:02:17 +00:00
2026-08-02 18:19:34 -04:00
// Amounts are always sats internally; `unit` only changes presentation.
function fmtAmount(sats) {
const n = num(sats);
if (unit === 'btc') {
const btc = n / 1e8;
return (btc < 0.00001 && btc > 0 ? btc.toFixed(8) : btc.toFixed(5)) + ' BTC';
2026-03-19 17:02:17 +00:00
}
2026-08-02 18:19:34 -04:00
return n.toLocaleString('en-US') + ' sats';
}
function fmtAmountShort(sats) {
const n = num(sats);
if (unit === 'btc') return (n / 1e8).toFixed(4) + ' BTC';
if (n >= 1e6) return (n / 1e6).toFixed(2).replace(/\.00$/, '') + 'M';
if (n >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'k';
return n.toLocaleString('en-US');
}
function fmtCount(v) { return num(v).toLocaleString('en-US'); }
function fmtBytes(b) {
const n = num(b);
if (n >= 1e9) return (n / 1e9).toFixed(2) + ' GB';
if (n >= 1e6) return (n / 1e6).toFixed(1) + ' MB';
if (n >= 1e3) return (n / 1e3).toFixed(1) + ' KB';
return n + ' B';
}
function timeAgo(unixSeconds) {
const secs = Math.floor(Date.now() / 1000) - num(unixSeconds);
if (!isFinite(secs) || secs < 0 ) return '—';
if ( secs < 60 ) return secs + ' s ago ';
if ( secs < 3600 ) return Math . floor ( secs / 60 ) + ' m ago ';
if ( secs < 86400 ) return Math . floor ( secs / 3600 ) + ' h ago ';
if ( secs < 2592000 ) return Math . floor ( secs / 86400 ) + ' d ago ';
if ( secs < 31536000 ) return Math . floor ( secs / 2592000 ) + ' mo ago ';
return Math . floor ( secs / 31536000 ) + ' y ago ';
}
function fmtDuration ( secs ) {
const n = num(secs);
if ( n <= 0 ) return '—';
const d = Math.floor(n / 86400 );
if ( d > = 1) return d + 'd';
const h = Math.floor(n / 3600);
if (h >= 1) return h + 'h';
return Math.max(1, Math.floor(n / 60)) + 'm';
}
function shortKey(k) { return !k ? '—' : k.slice(0, 8) + '…' + k.slice(-6); }
function escapeHtml(s) {
return String(s == null ? '' : s).replace(/[&< >"']/g, c =>
({ '& ': '& ', '< ': '< ', '>': '> ', '"': '" ', "'": '' ' })[c]);
}
2026-08-02 19:33:21 -04:00
// Clipboard with a fallback. navigator.clipboard only exists in a secure
// context, and most nodes serve this app over plain http; on top of
// that, the main UI embeds these apps in an iframe, where the async
// Clipboard API is additionally gated by the clipboard-write permission
// policy. execCommand('copy') still works in both situations, so it is
// the fallback rather than letting the button silently do nothing.
function legacyCopy(text) {
return new Promise((resolve, reject) => {
try {
const ta = document.createElement('textarea');
ta.value = text;
ta.setAttribute('readonly', '');
ta.style.position = 'fixed';
ta.style.top = '0';
ta.style.left = '0';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
ta.setSelectionRange(0, ta.value.length);
const ok = document.execCommand('copy');
document.body.removeChild(ta);
if (ok) resolve(); else reject(new Error('copy rejected'));
} catch (e) { reject(e); }
});
}
function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text).catch(() => legacyCopy(text));
}
return legacyCopy(text);
}
2026-08-02 18:19:34 -04:00
function setText(id, text) { const el = document.getElementById(id); if (el) el.textContent = text; }
function setHtml(id, html) { const el = document.getElementById(id); if (el) el.innerHTML = html; }
// Classify a peer address the way Umbrel's peers table does.
function classifyNetwork(addr) {
const a = String(addr || '').toLowerCase();
if (a.includes('.onion')) return 'Tor';
if (a.includes('.b32.i2p') || a.includes('i2p')) return 'I2P';
if (/^(127\.|10\.|192\.168\.|172\.(1[6-9]|2\d|3[01])\.|\[?::1\]?|localhost)/.test(a)) return 'Local';
return 'Clearnet';
2026-03-19 17:02:17 +00:00
}
2026-08-02 18:19:34 -04:00
// ── Unit switch ─────────────────────────────────────────────────
function setUnit(u) {
unit = u;
try { localStorage.setItem('lndui.unit', u); } catch (_) {}
document.getElementById('unitSats').classList.toggle('active', u === 'sats');
document.getElementById('unitBtc').classList.toggle('active', u === 'btc');
renderAll();
2026-03-19 17:02:17 +00:00
}
2026-08-02 18:19:34 -04:00
// ── Tabs ────────────────────────────────────────────────────────
function setTab(tab) {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
document.querySelectorAll('.tab-panel').forEach(p => p.classList.toggle('active', p.id === 'panel-' + tab));
if (tab === 'settings' && !logsLoaded) { logsLoaded = true; loadLogs(); }
if (window.matchMedia('(max-width: 767px)').matches) window.scrollTo({ top: 0, behavior: 'smooth' });
try { history.replaceState(null, '', '#' + tab); } catch (_) {}
}
document.querySelectorAll('.tab-btn').forEach(b => b.addEventListener('click', () => setTab(b.dataset.tab)));
// ── Fetch helpers ───────────────────────────────────────────────
// Every LND path goes through the backend's authenticated GET proxy,
// which attaches the macaroon and trusts LND's self-signed cert.
async function lnd(path) {
const res = await fetch(getBackendUrl() + '/proxy/lnd' + path, { credentials: 'include' });
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
}
async function lndSafe(path, fallback) {
try { return await lnd(path); } catch (_) { return fallback; }
2026-07-14 03:39:56 +01:00
}
2026-08-02 18:19:34 -04:00
async function refreshAll() {
const icon = document.getElementById('refreshIcon');
if (icon) icon.classList.add('animate-spin-slow');
2026-06-19 05:03:18 -04:00
try {
2026-08-02 18:19:34 -04:00
const [info, channels, pending, peers, fees, graph, payments, invoices, txns] = await Promise.all([
lndSafe('/v1/getinfo', null),
lndSafe('/v1/channels', { channels: [] }),
lndSafe('/v1/channels/pending', null),
lndSafe('/v1/peers', { peers: [] }),
lndSafe('/v1/fees', null),
lndSafe('/v1/graph/info', null),
lndSafe('/v1/payments?max_payments=25& reversed=true', { payments: [] }),
lndSafe('/v1/invoices?num_max_invoices=25& reversed=true', { invoices: [] }),
lndSafe('/v1/transactions', { transactions: [] }),
]);
state.info = info;
state.channels = (channels && channels.channels) || [];
state.pending = pending;
state.peers = (peers && peers.peers) || [];
state.fees = fees;
state.graph = graph;
state.payments = (payments && payments.payments) || [];
state.invoices = (invoices && invoices.invoices) || [];
state.txns = (txns && txns.transactions) || [];
// Balances are separate so one failing endpoint can't blank the rest.
state.onchain = await lndSafe('/v1/balance/blockchain', null);
state.chanbal = await lndSafe('/v1/balance/channels', null);
} finally {
if (icon) icon.classList.remove('animate-spin-slow');
}
renderAll();
}
function renderAll() {
renderHeader();
renderBalances();
renderSummary();
renderChannels();
renderActivity();
renderInsights();
renderPeers();
renderSettings();
}
// ── Header + sync ───────────────────────────────────────────────
function renderHeader() {
const g = state.info;
const pill = document.getElementById('headerStatusPill');
const dot = document.getElementById('headerStatusDot');
if (!g) {
setText('headerStatusText', 'Unreachable');
pill.className = 'pill bad';
dot.className = 'status-dot-sm bg-red';
document.getElementById('syncCard').style.display = 'none';
return;
}
const synced = !!g.synced_to_chain;
setText('headerStatusText', synced ? 'Running' : 'Synchronizing');
pill.className = 'pill ' + (synced ? 'ok' : 'warn');
dot.className = 'status-dot-sm ' + (synced ? 'bg-green' : 'bg-yellow');
const network = (g.chains && g.chains[0] && g.chains[0].network) || '—';
const netPill = document.getElementById('headerNetworkPill');
netPill.textContent = network;
netPill.style.display = '';
setText('headerAlias', g.alias || 'Lightning Network Daemon for instant Bitcoin payments');
setText('headerPubkey', g.identity_pubkey || '—');
// Sync banner — only while the node has work left to do.
const syncCard = document.getElementById('syncCard');
if (synced && g.synced_to_graph) {
syncCard.style.display = 'none';
} else {
syncCard.style.display = '';
setText('syncSubtitle', synced
? 'Chain is synced. Downloading the network graph…'
: 'Catching up with the Bitcoin backend. Lightning is unavailable until this finishes.');
setText('syncBlockLabel', 'Block ' + fmtCount(g.block_height));
// LND exposes no IBD percentage, so the bar tracks the two sync
// booleans rather than inventing a fake block-based percentage.
const done = (synced ? 1 : 0) + (g.synced_to_graph ? 1 : 0);
const pct = Math.round((done / 2) * 100);
setText('syncPercent', pct + '%');
document.getElementById('syncProgressBar').style.width = pct + '%';
setText('syncChain', synced ? 'Synced' : 'Syncing');
setText('syncGraph', g.synced_to_graph ? 'Synced' : 'Syncing');
setText('syncHeight', fmtCount(g.block_height));
setText('syncPeers', fmtCount(g.num_peers));
}
}
// ── Balances ────────────────────────────────────────────────────
function renderBalances() {
const onchainConfirmed = num(state.onchain && (state.onchain.confirmed_balance ?? state.onchain.total_balance));
const onchainUnconfirmed = num(state.onchain && state.onchain.unconfirmed_balance);
const cb = state.chanbal;
const lnLocal = num(cb && ((cb.local_balance && cb.local_balance.sat) ?? cb.balance));
const lnRemote = num(cb && ((cb.remote_balance && cb.remote_balance.sat) ?? 0));
const lnPending = num(cb && ((cb.pending_open_local_balance && cb.pending_open_local_balance.sat) ?? 0));
setText('balTotal', fmtAmount(onchainConfirmed + lnLocal));
setText('balTotalSub', state.onchain || cb ? 'on-chain + lightning' : 'balances unavailable');
setText('balLightning', fmtAmount(lnLocal));
setText('balLightningSub', lnPending > 0 ? fmtAmount(lnPending) + ' pending open' : 'spendable over channels');
setText('balOnchain', fmtAmount(onchainConfirmed));
setText('balOnchainSub', onchainUnconfirmed > 0 ? fmtAmount(onchainUnconfirmed) + ' unconfirmed' : 'confirmed');
setText('liqLocal', fmtAmount(lnLocal));
setText('liqRemote', fmtAmount(lnRemote));
const total = lnLocal + lnRemote;
const localPct = total > 0 ? (lnLocal / total) * 100 : 50;
document.getElementById('liqBarLocal').style.width = localPct + '%';
document.getElementById('liqBarRemote').style.width = (100 - localPct) + '%';
setText('liqHint', total > 0
? Math.round(localPct) + '% of your channel capacity is outbound (sendable).'
: 'Open a channel to start sending and receiving over Lightning.');
}
// ── Overview summary ────────────────────────────────────────────
function pendingCount() {
const p = state.pending;
if (!p) return num(state.info && state.info.num_pending_channels);
return ((p.pending_open_channels || []).length)
+ ((p.pending_force_closing_channels || []).length)
+ ((p.waiting_close_channels || []).length);
}
function renderSummary() {
const g = state.info;
const chans = state.channels;
const active = chans.filter(c => c.active).length;
const inactive = chans.length - active;
const capacity = chans.reduce((s, c) => s + num(c.capacity), 0);
setText('statPeers', g ? fmtCount(g.num_peers) : '—');
setText('statActiveChannels', String(active));
setText('statChannelsSub', inactive > 0 ? inactive + ' inactive' : 'all channels online');
setText('statCapacity', capacity ? fmtAmountShort(capacity) : '—');
setText('statRoutingMonth', state.fees ? fmtAmountShort(state.fees.month_fee_sum) : '—');
const pending = pendingCount();
setText('healthHeight', g ? fmtCount(g.block_height) : '—');
setText('healthPending', String(pending));
const chainPill = document.getElementById('healthChain');
chainPill.textContent = g ? (g.synced_to_chain ? 'Yes' : 'No') : '—';
chainPill.className = 'pill ' + (g && g.synced_to_chain ? 'ok' : 'warn');
const graphPill = document.getElementById('healthGraph');
graphPill.textContent = g ? (g.synced_to_graph ? 'Yes' : 'No') : '—';
graphPill.className = 'pill ' + (g && g.synced_to_graph ? 'ok' : 'warn');
setText('channelsLinkSub', chans.length
? active + ' active · ' + fmtAmountShort(capacity) + ' capacity'
: 'Open, manage and close channels');
// Channels tab counters
setText('chActive', String(active));
setText('chInactive', String(inactive));
setText('chPending', String(pending));
setText('chCapacity', capacity ? fmtAmountShort(capacity) : '—');
}
// ── Channels (read-only overview; management lives in the main UI) ──
function renderChannels() {
const el = document.getElementById('channelList');
if (!el) return;
const q = (document.getElementById('channelFilter').value || '').toLowerCase();
let list = state.channels.slice();
if (q) list = list.filter(c => String(c.remote_pubkey || '').toLowerCase().includes(q) || String(c.chan_id || '').includes(q));
if (!list.length) {
el.innerHTML = '< div class = "empty-state" > ' +
(state.channels.length ? 'No channels match that filter.' : 'No payment channels yet. Open one to start sending and receiving.') +
'</ div > ';
return;
}
list.sort((a, b) => num(b.capacity) - num(a.capacity));
el.innerHTML = list.map(c => {
const local = num(c.local_balance), remote = num(c.remote_balance);
const total = local + remote || 1;
const pct = (local / total) * 100;
const statusCls = c.active ? 'ok' : 'bad';
const statusTxt = c.active ? 'Online' : 'Offline';
return '' +
'< div class = "p-3 mb-2" style = "background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:0.7rem" > ' +
'< div class = "flex items-center justify-between gap-3 mb-2 flex-wrap" > ' +
'< div class = "flex items-center gap-2 min-w-0" > ' +
'< span class = "pill ' + statusCls + '" > ' + statusTxt + '</ span > ' +
'< span class = "pill" > ' + (c.private ? 'Private' : 'Public') + '</ span > ' +
'</ div > ' +
'< span class = "text-xs text-white-45 font-mono truncate" > ' + escapeHtml(shortKey(c.remote_pubkey)) + '</ span > ' +
'</ div > ' +
'< div class = "flex items-center justify-between gap-3 mb-2" > ' +
'< div >< div class = "text-sm font-semibold text-purple tabular" > ' + escapeHtml(fmtAmountShort(local)) + '</ div > ' +
'< div class = "text-xs text-white-45" > Max Send</ div ></ div > ' +
'< div class = "text-right" >< div class = "text-sm font-semibold text-green tabular" > ' + escapeHtml(fmtAmountShort(remote)) + '</ div > ' +
'< div class = "text-xs text-white-45" > Max Receive</ div ></ div > ' +
'</ div > ' +
'< div class = "liq-bar" >< div class = "local" style = "width:' + pct + '%" ></ div >< div class = "remote" style = "width:' + (100 - pct) + '%" ></ div ></ div > ' +
'< div class = "flex justify-between mt-2 text-xs text-white-40" > ' +
'< span > Capacity ' + escapeHtml(fmtAmountShort(c.capacity)) + '</ span > ' +
'< span > Uptime ' + escapeHtml(fmtDuration(c.uptime)) + ' / ' + escapeHtml(fmtDuration(c.lifetime)) + '</ span > ' +
'</ div > ' +
'</ div > ';
}).join('');
}
// ── Activity ────────────────────────────────────────────────────
function setActivityFilter(f) {
activityFilter = f;
document.querySelectorAll('.chip[data-filter]').forEach(c => c.classList.toggle('active', c.dataset.filter === f));
renderActivity();
}
function buildActivity() {
const items = [];
for (const p of state.payments) {
items.push({
kind: 'lightning', dir: 'out',
label: p.payment_request ? 'Lightning payment' : 'Keysend payment',
sats: num(p.value_sat), fee: num(p.fee_sat),
ts: num(p.creation_date), status: p.status || 'SUCCEEDED',
});
}
for (const i of state.invoices) {
// Skip never-paid, expired invoices — they are noise, not activity.
const settled = i.settled || i.state === 'SETTLED';
if (!settled && i.state === 'CANCELED') continue;
items.push({
kind: 'lightning', dir: 'in',
label: i.memo || 'Lightning invoice',
sats: num(i.amt_paid_sat || i.value), fee: 0,
ts: num(settled ? (i.settle_date || i.creation_date) : i.creation_date),
status: settled ? 'SUCCEEDED' : (i.state || 'OPEN'),
});
}
for (const t of state.txns) {
const amt = num(t.amount);
items.push({
kind: 'onchain', dir: amt >= 0 ? 'in' : 'out',
label: t.label || 'On-chain transaction',
sats: Math.abs(amt), fee: num(t.total_fees),
ts: num(t.time_stamp),
status: num(t.num_confirmations) > 0 ? 'SUCCEEDED' : 'PENDING',
});
}
return items.sort((a, b) => b.ts - a.ts);
}
function renderActivity() {
const el = document.getElementById('activityList');
if (!el) return;
let items = buildActivity();
if (activityFilter !== 'all') items = items.filter(i => i.kind === activityFilter);
if (!items.length) {
el.innerHTML = '< div class = "empty-state" > No activity yet.</ div > ';
return;
}
el.innerHTML = items.slice(0, 60).map(i => {
const pending = i.status === 'PENDING' || i.status === 'IN_FLIGHT' || i.status === 'OPEN' || i.status === 'ACCEPTED';
const failed = i.status === 'FAILED';
const cls = failed ? 'failed' : pending ? 'pending' : i.dir;
const arrow = failed
? '< svg width = "16" height = "16" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" d = "M18 6L6 18M6 6l12 12" /></ svg > '
: pending
? '< svg width = "16" height = "16" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< circle cx = "12" cy = "12" r = "9" />< path stroke-linecap = "round" d = "M12 7v5l3 2" /></ svg > '
: i.dir === 'in'
? '< svg width = "16" height = "16" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M12 19V5M5 12l7-7 7 7" /></ svg > '
: '< svg width = "16" height = "16" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" d = "M12 5v14M19 12l-7 7-7-7" /></ svg > ';
const sign = failed ? '' : i.dir === 'in' ? '+' : '−
const amtCls = failed ? 'text-white-40' : i.dir === 'in' ? 'text-green' : 'text-white-90';
return '' +
'< div class = "act-row" > ' +
'< div class = "act-icon ' + cls + '" > ' + arrow + '</ div > ' +
'< div class = "flex-1 min-w-0" > ' +
'< div class = "text-sm font-medium text-white-90 truncate" > ' + escapeHtml(i.label) + '</ div > ' +
'< div class = "text-xs text-white-45" > ' +
escapeHtml(i.kind === 'lightning' ? 'Lightning' : 'On-chain') + ' · ' + escapeHtml(timeAgo(i.ts)) +
(pending ? ' · pending' : '') + (failed ? ' · failed' : '') +
'</ div > ' +
'</ div > ' +
'< div class = "text-right flex-shrink-0" > ' +
'< div class = "text-sm font-semibold tabular ' + amtCls + '" > ' + sign + escapeHtml(fmtAmountShort(i.sats)) + '</ div > ' +
(i.fee > 0 ? '< div class = "text-xs text-white-40" > fee ' + escapeHtml(fmtAmountShort(i.fee)) + '</ div > ' : '') +
'</ div > ' +
'</ div > ';
}).join('');
}
// ── Insights ────────────────────────────────────────────────────
function renderInsights() {
const f = state.fees;
setText('feeDay', f ? fmtAmount(f.day_fee_sum) : '—');
setText('feeWeek', f ? fmtAmount(f.week_fee_sum) : '—');
setText('feeMonth', f ? fmtAmount(f.month_fee_sum) : '—');
const chans = state.channels;
const sent = chans.reduce((s, c) => s + num(c.total_satoshis_sent), 0);
const recv = chans.reduce((s, c) => s + num(c.total_satoshis_received), 0);
const updates = chans.reduce((s, c) => s + num(c.num_updates), 0);
const lifetimes = chans.map(c => num(c.lifetime)).filter(v => v > 0);
const avgLife = lifetimes.length ? lifetimes.reduce((a, b) => a + b, 0) / lifetimes.length : 0;
setText('insSent', chans.length ? fmtAmountShort(sent) : '—');
setText('insReceived', chans.length ? fmtAmountShort(recv) : '—');
setText('insUpdates', chans.length ? fmtCount(updates) : '—');
setText('insAge', avgLife ? fmtDuration(avgLife) : '—');
const gr = state.graph;
setText('graphNodes', gr ? fmtCount(gr.num_nodes) : '—');
setText('graphChannels', gr ? fmtCount(gr.num_channels) : '—');
setText('graphCapacity', gr ? fmtAmountShort(gr.total_network_capacity) : '—');
setText('graphAvgSize', gr ? fmtAmountShort(gr.avg_channel_size) : '—');
}
// ── Peers table ─────────────────────────────────────────────────
function sortPeers(col) {
if (peerSort.col === col) peerSort.dir *= -1; else { peerSort.col = col; peerSort.dir = 1; }
renderPeers();
}
function renderPeers() {
const body = document.getElementById('peersBody');
if (!body) return;
const q = (document.getElementById('peerFilter').value || '').toLowerCase();
let rows = state.peers.map(p => ({
peer: p.pub_key || '',
address: p.address || '',
network: classifyNetwork(p.address),
direction: p.inbound ? 'Inbound' : 'Outbound',
ping: num(p.ping_time),
sent: num(p.bytes_sent),
recv: num(p.bytes_recv),
}));
setText('peersCount', state.peers.length ? '(' + state.peers.length + ')' : '');
if (q) rows = rows.filter(r =>
r.peer.toLowerCase().includes(q) || r.address.toLowerCase().includes(q) ||
r.network.toLowerCase().includes(q) || r.direction.toLowerCase().includes(q));
rows.sort((a, b) => {
const x = a[peerSort.col], y = b[peerSort.col];
const cmp = typeof x === 'number' ? x - y : String(x).localeCompare(String(y));
return cmp * peerSort.dir;
});
document.querySelectorAll('.data-table th[data-col]').forEach(th =>
th.classList.toggle('sorted', th.dataset.col === peerSort.col));
if (!rows.length) {
body.innerHTML = '< tr >< td colspan = "6" >< div class = "empty-state" > ' +
(state.peers.length ? 'No peers match that filter.' : 'No connected peers.') + '</ div ></ td ></ tr > ';
return;
}
body.innerHTML = rows.map(r => '' +
'< tr > ' +
'< td >< div class = "font-mono text-xs text-white-90" > ' + escapeHtml(shortKey(r.peer)) + '</ div > ' +
'< div class = "text-xs text-white-40 truncate" style = "max-width:14rem" > ' + escapeHtml(r.address) + '</ div ></ td > ' +
'< td >< span class = "pill" > ' + escapeHtml(r.network) + '</ span ></ td > ' +
'< td class = "text-white-70" > ' + escapeHtml(r.direction) + '</ td > ' +
'< td class = "tabular text-white-70" > ' + (r.ping ? Math.round(r.ping / 1000) + ' ms' : '—') + '</ td > ' +
'< td class = "tabular text-white-70" > ' + escapeHtml(fmtBytes(r.sent)) + '</ td > ' +
'< td class = "tabular text-white-70" > ' + escapeHtml(fmtBytes(r.recv)) + '</ td > ' +
'</ tr > ').join('');
}
// ── Settings ────────────────────────────────────────────────────
function renderSettings() {
const g = state.info;
const reachable = !!g;
setText('setStatus', reachable ? (g.synced_to_chain ? 'Running' : 'Synchronizing') : 'Unreachable');
document.getElementById('setStatus').className = 'text-sm font-medium ' + (reachable ? (g.synced_to_chain ? 'text-green' : 'text-yellow') : 'text-red');
setText('setAlias', (g && g.alias) || '—');
setText('setVersion', (g && g.version) || '—');
setText('setNetwork', (g && g.chains && g.chains[0] && g.chains[0].network) || '—');
setText('setChain', (g && g.chains && g.chains[0] && g.chains[0].chain) || 'bitcoin');
setText('setCommit', (g && g.commit_hash) || '—');
setText('setRest', host + ':' + REST_PORT);
setText('setGrpc', host + ':' + GRPC_PORT);
setText('setP2p', host + ':' + P2P_PORT);
document.getElementById('restDot').className = 'status-dot-sm ' + (reachable ? 'bg-green' : 'bg-red');
document.getElementById('grpcDot').className = 'status-dot-sm ' + (reachable ? 'bg-green' : 'bg-red');
setText('setTor', (lndConnInfo && lndConnInfo.tor_onion) || 'Not configured');
// Reflect what getinfo actually reports rather than guessing at config.
setText('cfgBackend', reachable ? 'Bitcoin Core / Knots (archipelago-managed)' : '—');
const feats = (g && g.features) || {};
const has = code => Object.prototype.hasOwnProperty.call(feats, String(code));
setText('cfgWatchtower', reachable ? (has(2023) ? 'Enabled' : 'Not advertised') : '—');
setText('cfgKeysend', reachable ? (has(55) ? 'Enabled' : 'Not advertised') : '—');
setText('cfgWumbo', reachable ? (has(19) || has(18) ? 'Enabled' : 'Not advertised') : '—');
// Node ID panel lives in Connect, but is fed by getinfo.
2026-08-02 19:33:21 -04:00
// The useful thing to share is the full pubkey@host:port URI — that
// is what a peer pastes to open a channel — not the bare pubkey.
// LND only populates getinfo.uris once it is advertising an
// external address, so when that list is empty we build the URI
// ourselves from the Tor onion (preferred: reachable from anywhere)
// or this node's host, rather than degrading to just the pubkey.
const pubkey = (g && g.identity_pubkey) || '';
setText('nodePubkey', pubkey || '—');
2026-08-02 18:19:34 -04:00
const uris = (g && g.uris) || [];
const uriWrap = document.getElementById('nodeUriWrap');
2026-08-02 19:33:21 -04:00
let uri = '';
let hint = '';
2026-08-02 18:19:34 -04:00
if (uris.length) {
2026-08-02 19:33:21 -04:00
uri = uris[0];
hint = uris.length > 1 ? uris.length + ' advertised addresses' : 'Advertised by your node';
} else if (pubkey) {
const onion = lndConnInfo && lndConnInfo.tor_onion;
uri = pubkey + '@' + (onion || host) + ':' + P2P_PORT;
hint = onion
? 'Built from your Tor address — your node is not advertising one yet.'
: 'Built from this node’
}
if (uri) {
2026-08-02 18:19:34 -04:00
uriWrap.style.display = '';
2026-08-02 19:33:21 -04:00
setText('nodeUri', uri);
setText('nodeUriHint', hint);
renderQR('nodeIdQrBox', uri);
2026-08-02 18:19:34 -04:00
}
}
function copyEndpointInfo(btn) {
const lines = [
'REST: http://' + host + ':' + REST_PORT,
'gRPC: ' + host + ':' + GRPC_PORT,
'P2P: ' + host + ':' + P2P_PORT,
];
if (lndConnInfo && lndConnInfo.tor_onion) lines.push('Tor: ' + lndConnInfo.tor_onion);
2026-08-02 19:33:21 -04:00
copyText(lines.join('\n')).then(() => flash(btn, 'Copied!'));
2026-08-02 18:19:34 -04:00
}
function flash(btn, msg) {
const orig = btn.textContent;
btn.textContent = msg;
btn.style.color = '#4ade80';
setTimeout(() => { btn.textContent = orig; btn.style.color = ''; }, 1500);
}
// ── Logs ────────────────────────────────────────────────────────
async function loadLogs() {
const el = document.getElementById('logsContent');
el.textContent = 'Loading logs…';
try {
const res = await fetch(getBackendUrl() + '/api/container/logs?app_id=lnd& lines=200', { credentials: 'include' });
if (!res.ok) throw new Error(res.statusText || ('HTTP ' + res.status));
2026-06-19 05:03:18 -04:00
const json = await res.json();
const lines = json.result || json.logs || (Array.isArray(json) ? json : []);
2026-08-02 18:19:34 -04:00
el.textContent = Array.isArray(lines) ? lines.join('\n') : String(lines);
el.scrollTop = el.scrollHeight;
2026-06-19 05:03:18 -04:00
} catch (e) {
2026-08-02 18:19:34 -04:00
el.textContent = 'Could not load logs: ' + e.message;
2026-03-19 17:02:17 +00:00
}
}
2026-08-02 18:19:34 -04:00
// ── Connect Your Wallet ─────────────────────────────────────────
2026-03-19 17:02:17 +00:00
let lndConnInfo = null;
function renderQR(containerId, text) {
const container = document.getElementById(containerId);
if (!container) return;
container.innerHTML = '';
try {
const qr = qrcode(0, 'L');
qr.addData(text);
qr.make();
container.innerHTML = qr.createImgTag(3, 0);
2026-08-02 18:19:34 -04:00
} catch (e) {
2026-03-19 17:02:17 +00:00
container.innerHTML = '< div style = "color:#999;font-size:11px;text-align:center;padding:2rem" > QR too large for this mode</ div > ';
}
}
function buildLndconnectUri(connHost, connPort, cert, macaroon, isTor) {
let uri = 'lndconnect://' + connHost + ':' + connPort + '?';
if (!isTor && cert) uri += 'cert=' + cert + '&';
uri += 'macaroon=' + macaroon;
return uri;
}
2026-08-02 18:19:34 -04:00
function connSelection() {
2026-03-19 17:02:17 +00:00
const mode = document.getElementById('connMode').value;
const isTor = mode.includes('tor');
const isRest = mode.includes('rest');
2026-08-02 18:19:34 -04:00
return {
isTor, isRest,
port: isRest ? lndConnInfo.rest_port : lndConnInfo.grpc_port,
connHost: isTor && lndConnInfo.tor_onion ? lndConnInfo.tor_onion : host,
};
}
function updateConnInfo() {
if (!lndConnInfo) return;
const { isTor, isRest, port, connHost } = connSelection();
2026-03-19 17:02:17 +00:00
setText('connHost', connHost);
setText('connPort', String(port));
2026-08-02 18:19:34 -04:00
setText('connProto', isRest ? 'REST' : 'gRPC');
2026-03-19 17:02:17 +00:00
if (isTor && !lndConnInfo.tor_onion) {
document.getElementById('lndQrBox').innerHTML = '< div style = "color:#999;font-size:12px;text-align:center;padding:2rem" > Tor not configured for LND</ div > ';
2026-08-02 18:19:34 -04:00
setText('connSubtitle', 'Tor hidden service not available. Use Local Network mode.');
2026-03-19 17:02:17 +00:00
return;
}
2026-08-02 18:19:34 -04:00
setText('connSubtitle', 'Scan QR with Zeus, Zap, or BlueWallet to connect.');
renderQR('lndQrBox', buildLndconnectUri(connHost, port, lndConnInfo.cert_base64url, lndConnInfo.macaroon_base64url, isTor));
2026-03-19 17:02:17 +00:00
}
function copyEl(id, btn) {
const text = document.getElementById(id).textContent.trim();
if (!text || text === '—') return;
2026-08-02 19:33:21 -04:00
copyText(text).then(() => {
2026-03-19 17:02:17 +00:00
const orig = btn.innerHTML;
btn.innerHTML = '< svg width = "16" height = "16" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M5 13l4 4L19 7" /></ svg > ';
btn.style.color = '#4ade80';
setTimeout(() => { btn.innerHTML = orig; btn.style.color = ''; }, 1500);
});
}
function copyLndconnectUri() {
if (!lndConnInfo) return;
2026-08-02 18:19:34 -04:00
const { isTor, port, connHost } = connSelection();
2026-03-19 17:02:17 +00:00
const uri = buildLndconnectUri(connHost, port, lndConnInfo.cert_base64url, lndConnInfo.macaroon_base64url, isTor);
const btn = document.getElementById('copyUriBtn');
2026-08-02 19:33:21 -04:00
copyText(uri).then(() => flash(btn, 'Copied!'));
2026-03-19 17:02:17 +00:00
}
async function fetchConnectInfo() {
try {
2026-06-19 05:03:18 -04:00
const resp = await fetch(getBackendUrl() + '/lnd-connect-info', { credentials: 'include' });
2026-03-19 17:02:17 +00:00
if (!resp.ok) throw new Error('HTTP ' + resp.status);
const data = await resp.json();
if (data.cert_base64url) {
lndConnInfo = data;
// Auto-select local mode when Tor is not available
if (!data.tor_onion) {
document.getElementById('connMode').value = 'rest-local';
2026-08-02 18:19:34 -04:00
setText('connSubtitle', 'Tor hidden service not available. Use Local Network mode.');
2026-03-19 17:02:17 +00:00
}
2026-08-02 18:19:34 -04:00
setText('setTor', data.tor_onion || 'Not configured');
try { updateConnInfo(); } catch (ue) {
document.getElementById('lndQrBox').innerHTML = '< div style = "color:#f87171;font-size:11px;text-align:center;padding:1rem" > Update error: ' + escapeHtml(ue.message) + '</ div > ';
2026-03-19 17:02:17 +00:00
}
} else if (data.error) {
throw new Error(data.error);
}
2026-08-02 18:19:34 -04:00
} catch (e) {
document.getElementById('lndQrBox').innerHTML = '< div style = "color:#f87171;font-size:12px;text-align:center;padding:2rem" > ' + escapeHtml(e.message) + '</ div > ';
2026-03-19 17:02:17 +00:00
}
}
2026-08-02 18:19:34 -04:00
// ── Boot ────────────────────────────────────────────────────────
document.getElementById('channelsLinkCard').href = CHANNELS_URL;
document.getElementById('channelsOpenBtn').href = CHANNELS_URL;
setUnit(unit);
const initialTab = (location.hash || '').replace('#', '');
if (document.getElementById('panel-' + initialTab)) setTab(initialTab);
refreshAll();
2026-03-19 17:02:17 +00:00
fetchConnectInfo();
2026-08-02 18:19:34 -04:00
// Keep the numbers live without hammering LND.
setInterval(refreshAll, 30000);
2026-03-19 17:02:17 +00:00
</ script >
</ body >
</ html >
