-
-
Notifications
You must be signed in to change notification settings - Fork 130
Expand file tree
/
Copy pathhome_page.rs
More file actions
2005 lines (1894 loc) · 66.9 KB
/
home_page.rs
File metadata and controls
2005 lines (1894 loc) · 66.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
//! Homepage served at `/` when a user navigates to their local Freenet node.
//!
//! Renders a card-based dashboard showing connection status, peers, subscriptions,
//! and operation stats. Styled to match the global telemetry dashboard.
use std::fmt::Write;
use axum::extract::Path;
use axum::response::{Html, IntoResponse};
use crate::node::network_status::{self, format_ago, format_duration, html_escape};
/// Handler for `GET /` — returns a self-contained HTML dashboard.
pub(super) async fn homepage() -> impl IntoResponse {
Html(homepage_html())
}
/// Handler for `GET /peer/{address}` — returns a detail page for a single peer.
pub(super) async fn peer_detail(Path(address): Path<String>) -> impl IntoResponse {
Html(peer_detail_html(&address))
}
fn homepage_html() -> String {
let snap = network_status::get_snapshot();
let (version, uptime) = match &snap {
Some(s) => (s.version.as_str(), format_duration(s.elapsed_secs)),
None => ("?", "0s".to_string()),
};
let favicon = build_favicon_data_uri(&snap);
let status_card = build_status_card(&snap);
let peers_card = build_peers_card(&snap);
let contracts_card = build_contracts_card(&snap);
let ops_card = build_ops_card(&snap);
let transfer_card = build_transfer_card(&snap);
format!(
r##"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="5">
<title>Freenet — Local Peer</title>
<link rel="icon" type="image/svg+xml" href="{favicon}">
<style>{CSS}</style>
<script>{JS}</script>
</head>
<body>
<header>
<div class="header-left">
<img src="https://freenet.org/freenet_logo.svg" alt="Freenet" class="logo">
<span class="header-title">FREENET</span>
<span class="header-scope">Local Peer</span>
<span class="badge">v{version}</span>
</div>
<div class="header-right">
<span class="uptime">Up {uptime}</span>
<button class="theme-btn" id="theme-btn" onclick="toggleTheme()" title="Toggle dark/light mode">
<span id="theme-icon">☀️</span>
</button>
</div>
</header>
<main>
{status_card}
{peers_card}
{transfer_card}
{contracts_card}
{ops_card}
<div class="card">
<h2>Freenet Apps</h2>
<ul class="app-list">
<li>
<a href="/v1/contract/web/raAqMhMG7KUpXBU2SxgCQ3Vh4PYjttxdSWd9ftV7RLv/">River Chat</a>
<p class="note">You'll need an <a href="https://freenet.org/quickstart/" target="_blank" rel="noopener noreferrer">invite</a> to join the "Freenet Official" room.</p>
</li>
</ul>
</div>
<div class="card card-muted">
<h2>Links</h2>
<ul class="link-list">
<li><a href="https://freenet.org" target="_blank" rel="noopener noreferrer">freenet.org</a></li>
<li><a href="https://matrix.to/#/#freenet-locutus:matrix.org" target="_blank" rel="noopener noreferrer">Freenet Matrix channel</a></li>
<li><a href="https://github.com/freenet/freenet-core" target="_blank" rel="noopener noreferrer">GitHub</a></li>
</ul>
</div>
</main>
</body>
</html>"##,
CSS = CSS,
JS = JS,
favicon = favicon,
version = html_escape(version),
uptime = uptime,
status_card = status_card,
peers_card = peers_card,
transfer_card = transfer_card,
contracts_card = contracts_card,
ops_card = ops_card,
)
}
/// Freenet rabbit silhouette SVG path, derived from freenet_logo.svg.
/// Used for the favicon with a solid color fill (no gradient) so the
/// connection status color is immediately visible at favicon size.
pub(super) const RABBIT_SVG_PATH: &str = concat!(
"M358.864 40.470C358.605 40.728 354.143 42.467 348.947 44.334",
"C284.621 67.446 232.573 113.729 201.443 175.500",
"C193.895 190.478 184.375 213.708 185.375 214.708",
"C185.621 214.954 187.715 211.857 190.030 207.827",
"C211.190 170.984 229.863 146.093 255.968 119.933",
"C274.854 101.008 282.998 94.207 302.034 81.466",
"C334.671 59.621 367.531 47.376 401.250 44.492",
"L409.000 43.829 408.984 47.165",
"C408.958 52.704 405.255 68.515 401.010 81.213",
"C382.392 136.898 338.799 184.709 277.000 217.224",
"C271.225 220.263 263.913 223.788 260.750 225.058",
"C254.629 227.517 254.126 228.307 256.511 231.712",
"C258.282 234.241 258.484 234.089 249.500 237.002",
"C226.868 244.341 200.420 256.771 183.918 267.825",
"C173.918 274.522 156.961 289.225 158.000 290.296",
"C158.275 290.579 163.450 287.694 169.500 283.883",
"C175.550 280.073 186.125 274.083 193.000 270.573",
"C264.905 233.856 345.414 226.155 422.387 248.633",
"C434.634 252.210 468.194 264.823 465.830 264.961",
"C465.461 264.982 459.741 263.440 453.118 261.534",
"C422.666 252.769 376.068 246.967 347.500 248.384",
"C320.590 249.719 284.052 255.527 283.798 258.510",
"C283.694 259.727 291.796 264.541 298.477 267.231",
"C306.163 270.326 319.360 270.612 338.812 268.103",
"C385.602 262.070 433.627 269.250 469.963 287.712",
"C475.721 290.638 480.874 293.474 481.416 294.016",
"C482.061 294.661 476.225 295.004 464.450 295.010",
"C407.520 295.043 349.853 308.084 300.500 332.086",
"C290.412 336.992 272.833 346.834 271.147 348.519",
"C269.278 350.389 273.301 349.263 283.966 344.933",
"C302.548 337.389 332.479 327.629 351.000 323.074",
"C386.266 314.400 413.893 311.393 450.000 312.298",
"C474.559 312.914 491.602 315.535 509.306 321.421",
"C520.784 325.236 519.954 325.640 504.924 323.552",
"C419.615 311.701 330.506 332.225 238.000 385.033",
"C224.991 392.460 221.855 394.386 200.762 407.913",
"C184.591 418.282 178.817 420.978 172.750 420.990",
"C167.060 421.002 164.441 418.869 163.413 413.387",
"C160.912 400.055 178.394 366.762 202.136 339.644",
"L206.387 334.788 197.443 335.644",
"C183.073 337.019 158.519 336.519 150.152 334.681",
"C132.833 330.876 120.785 321.947 117.439 310.437",
"C112.326 292.850 123.492 270.717 146.912 252.015",
"C154.528 245.934 155.702 244.562 156.798 240.464",
"C158.983 232.296 168.599 206.900 174.208 194.482",
"C184.044 172.710 197.989 150.083 213.332 131.000",
"C229.597 110.770 255.612 87.415 277.277 73.590",
"C286.990 67.393 310.855 55.436 323.062 50.653",
"C335.623 45.730 360.750 38.583 358.864 40.470",
"M375.000 209.596",
"C430.712 216.655 477.541 237.609 509.241 269.661",
"C514.049 274.523 518.765 279.625 519.721 281.000",
"C521.404 283.419 521.347 283.408 517.980 280.669",
"C500.484 266.434 486.556 257.516 468.000 248.668",
"C452.323 241.193 438.766 236.261 424.000 232.663",
"C395.297 225.667 374.955 223.024 349.705 223.010",
"C333.212 223.000 332.865 222.956 330.455 220.545",
"C329.105 219.195 328.000 217.046 328.000 215.768",
"C328.000 212.845 330.558 209.125 333.357 207.978",
"C336.189 206.817 360.536 207.763 375.000 209.596",
);
/// Build a `data:` URI for an SVG favicon colored by connection status.
///
/// Colors follow issue #3287 (match order = priority):
/// 1. Grey: starting up (no snapshot yet)
/// 2. Blue: connected (any open connections — healthy state wins)
/// 3. Dark red: NAT traversal failing (all attempts failed)
/// 4. Red: connection failures present
/// 5. Amber: attempting to connect (fallback)
fn build_favicon_data_uri(snap: &Option<network_status::NetworkStatusSnapshot>) -> String {
// Color is pre-encoded for data URI (# → %23) to avoid scanning the entire SVG.
let color = match snap {
None => "%239e9e9e", // grey — starting up
Some(s) if s.open_connections > 0 => "%23007FFF", // blue — connected
Some(s) if s.nat_stats.attempts > 0 && s.nat_stats.successes == 0 => "%238b0000", // dark red — NAT problems
Some(s) if !s.failures.is_empty() => "%23f44336", // red — connection issues
Some(_) => "%23fbbf24", // amber — connecting
};
format!(
"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 471'>\
<path d='{path}' fill='{color}' fill-rule='evenodd'/></svg>",
path = RABBIT_SVG_PATH,
color = color,
)
}
fn build_status_card(snap: &Option<network_status::NetworkStatusSnapshot>) -> String {
let Some(snap) = snap else {
return r#"<div class="card">
<h2>Connection Status</h2>
<div class="status-row"><span class="dot dot-yellow"></span> Starting up...</div>
<div class="spinner"></div>
</div>"#
.to_string();
};
// Health banner — the primary "everything looks good" indicator
let health_banner = match snap.health {
network_status::HealthLevel::Healthy => {
let n = snap.open_connections;
let label = if n == 1 { "peer" } else { "peers" };
format!(
r#"<div class="health-banner health-good">
<span class="health-icon">✔</span>
<span>Node is healthy — connected to {n} {label}</span>
</div>"#,
)
}
network_status::HealthLevel::Degraded => {
let detail = if snap.gateway_only {
"Only connected to gateways — no peer-to-peer connections yet"
} else {
"Connected but NAT traversal is failing"
};
format!(
r#"<div class="health-banner health-degraded">
<span class="health-icon">⚠</span>
<span>{detail}</span>
</div>"#,
)
}
network_status::HealthLevel::Connecting => r#"<div class="health-banner health-connecting">
<span class="health-icon">⌛</span>
<span>Connecting to the network...</span>
</div>"#
.to_string(),
network_status::HealthLevel::Trouble => {
let has_version_mismatch = snap
.failures
.iter()
.any(|f| f.reason_html.contains("Version mismatch"));
let detail = if has_version_mismatch {
"Version mismatch — update required"
} else {
"Unable to connect — check firewall and network settings"
};
format!(
r#"<div class="health-banner health-trouble">
<span class="health-icon">✖</span>
<span>{detail}</span>
</div>"#,
)
}
};
// External address info (shown once discovered via NAT traversal)
let external_addr_html = if let Some(addr) = snap.external_address {
format!(
r#"<p class="external-addr">External address: <code>{ip}</code> — UDP port: <code>{port}</code></p>"#,
ip = addr.ip(),
port = addr.port(),
)
} else if snap.open_connections > 0 {
r#"<p class="external-addr muted">External address: discovering...</p>"#.to_string()
} else {
String::new()
};
let spinner = if snap.open_connections == 0 {
r#"<div class="spinner"></div>"#
} else {
""
};
// Gateway-only warning (only when not connected to any peers)
let gateway_warning = if snap.gateway_only {
format!(
r#"<div class="warning">
<strong>Firewall likely blocking incoming connections</strong> on UDP port <code>{port}</code>.
<ul>
<li>Configure your router to forward UDP port <code>{port}</code> to this computer.</li>
<li>Check that no software firewall (ufw, iptables, Windows Defender) is blocking Freenet.</li>
</ul>
</div>"#,
port = snap.listening_port
)
} else {
String::new()
};
// NAT stats with rolling trend
let nat_html = if snap.nat_stats.attempts > 0 {
let all_failed = snap.nat_stats.successes == 0;
let class = if all_failed { " nat-fail" } else { "" };
let extra = if all_failed && !snap.gateway_only {
format!(
r#"<p class="nat-advice">All NAT traversal attempts have failed. Try forwarding UDP port <code>{}</code> on your router.</p>"#,
snap.listening_port
)
} else {
String::new()
};
// Rolling trend: recent window stats; only show verdict when truly blocked
let (recent, verdict) = if snap.nat_stats.recent_attempts > 0 {
let rs = snap.nat_stats.recent_successes;
let ra = snap.nat_stats.recent_attempts;
let verdict = if rs == 0 && snap.nat_stats.successes == 0 {
r#" <span class="nat-verdict nat-verdict-bad">Port may be blocked</span>"#
.to_string()
} else {
String::new()
};
(
format!(r#" <span class="nat-recent">({rs}/{ra} recent)</span>"#),
verdict,
)
} else {
(String::new(), String::new())
};
format!(
r#"<p class="nat-stat{class}">NAT hole punching: {s}/{a} successful{recent} {verdict}</p>{extra}"#,
class = class,
s = snap.nat_stats.successes,
a = snap.nat_stats.attempts,
recent = recent,
verdict = verdict,
extra = extra,
)
} else if snap.open_connections == 0 {
r#"<p class="nat-stat">No NAT traversal attempts yet</p>"#.to_string()
} else {
String::new()
};
// Failure diagnostics — demoted when connected (muted style, collapsed)
let failures_html = if !snap.failures.is_empty() {
let mut items = String::new();
for f in &snap.failures {
items.push_str(&format!(
"<li><code>{}</code>: {}</li>",
f.address, f.reason_html
));
}
if snap.open_connections > 0 {
// Demoted: muted style when node is otherwise connected
format!(
r#"<details class="diagnostics-muted">
<summary>{n} recent connection attempt(s) failed <span class="muted-hint">(normal)</span></summary>
<ul>{items}</ul>
</details>"#,
n = snap.failures.len(),
items = items,
)
} else {
// Prominent: when not connected, failures are actionable
format!(
r#"<div class="diagnostics">
<h3>Connection Issues</h3>
<ul>{items}</ul>
<p class="attempts">Attempted {attempts} connection(s) over {elapsed}. Retrying...</p>
</div>"#,
items = items,
attempts = snap.connection_attempts,
elapsed = format_duration(snap.elapsed_secs),
)
}
} else if snap.open_connections == 0 && snap.connection_attempts > 0 {
format!(
r#"<p class="attempts">Attempted {} connection(s) over {}. Retrying...</p>"#,
snap.connection_attempts,
format_duration(snap.elapsed_secs),
)
} else {
String::new()
};
format!(
r#"<div class="card">
<h2>Connection Status</h2>
{health_banner}
{external_addr_html}
{spinner}
{gateway_warning}
{nat_html}
{failures_html}
</div>"#,
health_banner = health_banner,
external_addr_html = external_addr_html,
spinner = spinner,
gateway_warning = gateway_warning,
nat_html = nat_html,
failures_html = failures_html,
)
}
/// Format bytes as a human-readable string (e.g., "1.2 MB").
fn format_bytes(bytes: u64) -> String {
const KB: u64 = 1024;
const MB: u64 = 1024 * KB;
const GB: u64 = 1024 * MB;
if bytes >= GB {
format!("{:.1} GB", bytes as f64 / GB as f64)
} else if bytes >= MB {
format!("{:.1} MB", bytes as f64 / MB as f64)
} else if bytes >= KB {
format!("{:.1} KB", bytes as f64 / KB as f64)
} else {
format!("{bytes} B")
}
}
fn build_transfer_card(snap: &Option<network_status::NetworkStatusSnapshot>) -> String {
let Some(snap) = snap else {
return String::new();
};
if snap.bytes_uploaded == 0 && snap.bytes_downloaded == 0 && snap.open_connections == 0 {
return String::new();
}
format!(
r#"<div class="card">
<h2>Data Transfer</h2>
<div class="transfer-stat">
<span class="transfer-label">Uploaded</span>
<span class="transfer-value">{uploaded}</span>
</div>
<div class="transfer-stat">
<span class="transfer-label">Downloaded</span>
<span class="transfer-value">{downloaded}</span>
</div>
</div>"#,
uploaded = format_bytes(snap.bytes_uploaded),
downloaded = format_bytes(snap.bytes_downloaded),
)
}
fn build_peers_card(snap: &Option<network_status::NetworkStatusSnapshot>) -> String {
let Some(snap) = snap else {
return String::new();
};
if snap.peers.is_empty() && snap.open_connections == 0 {
return String::new();
}
let own_loc = snap
.own_location
.map(|l| format!(r#"<span class="own-loc">Your location: {:.4}</span>"#, l))
.unwrap_or_default();
if snap.peers.is_empty() {
return format!(
r#"<div class="card">
<div class="card-header"><h2>Network Peers</h2>{own_loc}</div>
<p class="empty">No peers connected</p>
</div>"#,
own_loc = own_loc,
);
}
let ring_svg = build_ring_svg(snap.own_location, &snap.peers);
let mut rows = String::new();
for p in &snap.peers {
let peer_type = if p.is_gateway { "Gateway" } else { "Peer" };
let loc = p
.location
.map(|l| format!("{:.4}", l))
.unwrap_or_else(|| "—".to_string());
let sent = if p.bytes_sent > 0 {
format_bytes(p.bytes_sent)
} else {
"—".to_string()
};
let recv = if p.bytes_received > 0 {
format_bytes(p.bytes_received)
} else {
"—".to_string()
};
rows.push_str(&format!(
r#"<tr class="peer-row" onclick="window.location='/peer/{addr_enc}'"><td><code>{addr}</code></td><td>{loc}</td><td>{ptype}</td><td>{sent}</td><td>{recv}</td><td>{connected}</td></tr>"#,
addr_enc = html_escape(&p.address.to_string()),
addr = p.address,
loc = loc,
ptype = peer_type,
sent = sent,
recv = recv,
connected = format_duration(p.connected_secs),
));
}
format!(
r#"<div class="card">
<div class="card-header"><h2>Network Peers</h2>{own_loc}</div>
{ring_svg}
<div class="table-wrap">
<table>
<thead><tr><th>Address</th><th>Location</th><th>Type</th><th>Sent</th><th>Recv</th><th>Connected</th></tr></thead>
<tbody>{rows}</tbody>
</table>
</div>
</div>"#,
own_loc = own_loc,
ring_svg = ring_svg,
rows = rows,
)
}
/// Build an SVG ring visualization showing this node and connected peers.
/// Locations are 0.0–1.0, mapped to angles around a circle.
fn build_ring_svg(own_location: Option<f64>, peers: &[network_status::PeerSnapshot]) -> String {
// Only render if we have location data for at least one peer
let has_any_location = own_location.is_some() || peers.iter().any(|p| p.location.is_some());
if !has_any_location {
return String::new();
}
let cx: f64 = 120.0;
let cy: f64 = 120.0;
let r: f64 = 95.0;
let size = 240;
let mut svg = format!(
"<div class=\"ring-wrap\"><svg viewBox=\"0 0 {size} {size}\" width=\"{size}\" height=\"{size}\" class=\"ring-svg\">"
);
// Ring circle
write!(
svg,
"<circle cx=\"{cx}\" cy=\"{cy}\" r=\"{r}\" fill=\"none\" stroke=\"#e0e0e0\" stroke-width=\"2\"/>"
)
.ok();
// Helper: location (0.0-1.0) to (x, y) on the ring.
// 0.0 is at the top, increasing clockwise.
let loc_to_xy = |loc: f64| -> (f64, f64) {
let angle = loc * std::f64::consts::TAU - std::f64::consts::FRAC_PI_2;
(cx + r * angle.cos(), cy + r * angle.sin())
};
// Draw connection lines from own location to each peer
if let Some(own_loc) = own_location {
let (ox, oy) = loc_to_xy(own_loc);
for p in peers {
if let Some(ploc) = p.location {
let (px, py) = loc_to_xy(ploc);
let stroke = if p.is_gateway { "#fbbf24" } else { "#007FFF" };
write!(
svg,
"<line x1=\"{ox:.1}\" y1=\"{oy:.1}\" x2=\"{px:.1}\" y2=\"{py:.1}\" stroke=\"{stroke}\" stroke-width=\"1\" opacity=\"0.4\"/>"
)
.ok();
}
}
}
// Peer dots
for p in peers {
if let Some(loc) = p.location {
let (px, py) = loc_to_xy(loc);
let fill = if p.is_gateway { "#fbbf24" } else { "#007FFF" };
write!(
svg,
"<circle cx=\"{px:.1}\" cy=\"{py:.1}\" r=\"5\" fill=\"{fill}\"/>"
)
.ok();
}
}
// Own location (drawn last so it's on top)
if let Some(own_loc) = own_location {
let (ox, oy) = loc_to_xy(own_loc);
write!(
svg,
"<circle cx=\"{ox:.1}\" cy=\"{oy:.1}\" r=\"7\" fill=\"#34d399\" stroke=\"#fff\" stroke-width=\"2\"/>"
)
.ok();
}
svg.push_str("</svg>");
// Legend
svg.push_str(concat!(
"<div class=\"ring-legend\">",
"<span class=\"ring-key\"><span class=\"ring-dot ring-dot-self\"></span> You</span>",
"<span class=\"ring-key\"><span class=\"ring-dot ring-dot-peer\"></span> Peer</span>",
"<span class=\"ring-key\"><span class=\"ring-dot ring-dot-gw\"></span> Gateway</span>",
"</div></div>",
));
svg
}
fn build_contracts_card(snap: &Option<network_status::NetworkStatusSnapshot>) -> String {
let Some(snap) = snap else {
return String::new();
};
if snap.contracts.is_empty() {
if snap.open_connections > 0 {
return r#"<div class="card">
<h2>Subscribed Contracts</h2>
<p class="empty">No active subscriptions</p>
</div>"#
.to_string();
}
return String::new();
}
let mut rows = String::new();
for c in &snap.contracts {
let last_update = c
.last_updated_secs
.map(format_ago)
.unwrap_or_else(|| "—".to_string());
rows.push_str(&format!(
r#"<tr><td title="{full}"><code>{short}</code></td><td>{subscribed}</td><td>{last_update}</td></tr>"#,
full = html_escape(&c.key_full),
short = html_escape(&c.key_short),
subscribed = format_ago(c.subscribed_secs),
last_update = last_update,
));
}
format!(
r#"<div class="card">
<h2>Subscribed Contracts</h2>
<div class="table-wrap">
<table>
<thead><tr><th>Contract</th><th>Subscribed</th><th>Last Update</th></tr></thead>
<tbody>{rows}</tbody>
</table>
</div>
</div>"#,
rows = rows,
)
}
fn build_ops_card(snap: &Option<network_status::NetworkStatusSnapshot>) -> String {
let Some(snap) = snap else {
return String::new();
};
let ops = &snap.op_stats;
if ops.total() == 0 && snap.open_connections == 0 {
return String::new();
}
fn op_cell(name: &str, ok: u32, fail: u32) -> String {
format!(
r#"<div class="op-cell">
<div class="op-name">{name}</div>
<div><span class="op-ok">{ok}</span> <span class="op-fail">{fail}</span></div>
</div>"#,
name = name,
ok = ok,
fail = fail,
)
}
// UPDATE cell: show received broadcast count (single number) since
// subscription-streamed updates are push-based and don't have success/failure.
// If there are also routed updates (with success/fail), show both.
let update_cell = {
let routed = ops.updates.0 + ops.updates.1;
let received = ops.updates_received;
if routed > 0 {
// Both routed and received
format!(
r#"<div class="op-cell">
<div class="op-name">UPDATE</div>
<div><span class="op-ok">{ok}</span> <span class="op-fail">{fail}</span></div>
<div class="op-received">{recv} received</div>
</div>"#,
ok = ops.updates.0,
fail = ops.updates.1,
recv = received,
)
} else {
// Only received (common for subscriber nodes)
format!(
r#"<div class="op-cell">
<div class="op-name">UPDATE</div>
<div class="op-count">{recv}</div>
</div>"#,
recv = received,
)
}
};
format!(
r#"<div class="card">
<h2>Operations</h2>
<div class="op-grid">
{get}{put}{update}{subscribe}
</div>
</div>"#,
get = op_cell("GET", ops.gets.0, ops.gets.1),
put = op_cell("PUT", ops.puts.0, ops.puts.1),
update = update_cell,
subscribe = op_cell("SUBSCRIBE", ops.subscribes.0, ops.subscribes.1),
)
}
const CSS: &str = r##"
/* ── CSS Variables (dark mode default, matching global telemetry dashboard) ── */
:root {
--bg-primary: #06080c;
--bg-secondary: #0d1117;
--bg-tertiary: #161b22;
--bg-panel: rgba(13, 17, 23, 0.8);
--border-color: rgba(48, 54, 61, 0.6);
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #484f58;
--accent-primary: #007FFF;
--accent-light: #7ecfef;
--accent-dark: #0052cc;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Light mode overrides */
[data-theme="light"] {
--bg-primary: #f0f4f8;
--bg-secondary: #e2e8f0;
--bg-tertiary: #cbd5e1;
--bg-panel: rgba(255, 255, 255, 0.85);
--border-color: rgba(148, 163, 184, 0.5);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
}
/* Atmospheric background (matching telemetry dashboard) */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(0, 127, 255, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(126, 207, 239, 0.05) 0%, transparent 40%),
radial-gradient(ellipse at 20% 80%, rgba(0, 82, 204, 0.05) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
}
[data-theme="light"] body::before {
background:
radial-gradient(ellipse at 50% 0%, rgba(0, 127, 255, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(126, 207, 239, 0.04) 0%, transparent 40%),
radial-gradient(ellipse at 20% 80%, rgba(0, 82, 204, 0.04) 0%, transparent 40%);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background: var(--bg-panel);
border-bottom: 1px solid var(--border-color);
backdrop-filter: blur(10px);
position: relative;
z-index: 1;
}
.header-left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.header-right {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.logo { width: 28px; height: 28px; }
.header-title {
font-family: var(--font-mono);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-primary) 50%, var(--accent-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-scope {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
color: var(--accent-light);
background: rgba(126, 207, 239, 0.1);
padding: 0.15rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(126, 207, 239, 0.2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge {
background: rgba(0, 127, 255, 0.15);
color: var(--accent-light);
padding: 0.15rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
font-family: var(--font-mono);
}
.uptime { font-family: var(--font-mono); font-size: 0.85rem; }
main {
max-width: 800px;
margin: 1.5rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
z-index: 1;
}
.card {
background: var(--bg-panel);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 1rem 1.25rem;
backdrop-filter: blur(10px);
}
.card-muted { background: var(--bg-secondary); }
.card h2 {
font-size: 0.85rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
font-family: var(--font-mono);
font-weight: 500;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.75rem;
}
.card-header h2 { margin-bottom: 0; }
.own-loc {
font-size: 0.8rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.status-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.dot-green { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.dot-yellow { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.spinner {
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-top-color: var(--accent-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0.5rem 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.warning {
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 6px;
padding: 0.75rem 1rem;
margin: 0.75rem 0;
font-size: 0.9rem;
color: #fbbf24;
}
[data-theme="light"] .warning { color: #92400e; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); }
.warning ul {
margin: 0.5rem 0 0 1.25rem;
font-size: 0.85rem;
}
.warning li { margin-bottom: 0.25rem; }
.external-addr {
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.external-addr.muted { opacity: 0.6; font-style: italic; }
.nat-stat {
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.nat-fail { color: #f87171; font-weight: 500; }
[data-theme="light"] .nat-fail { color: #dc2626; }
.nat-advice {
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: 6px;
padding: 0.5rem 0.75rem;
margin-top: 0.5rem;
font-size: 0.85rem;
color: #f87171;
}
[data-theme="light"] .nat-advice { color: #b91c1c; background: rgba(248, 113, 113, 0.08); }
.nat-recent { color: var(--text-muted); font-size: 0.8rem; }
.nat-verdict {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
padding: 0.1rem 0.4rem;
border-radius: 4px;
margin-left: 0.3rem;
vertical-align: middle;
}
.nat-verdict-good { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.nat-verdict-bad { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.nat-verdict-warn { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
[data-theme="light"] .nat-verdict-good { color: #059669; background: rgba(5, 150, 105, 0.1); }
[data-theme="light"] .nat-verdict-bad { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
[data-theme="light"] .nat-verdict-warn { color: #d97706; background: rgba(217, 119, 6, 0.1); }
.diagnostics {
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 6px;
padding: 0.75rem 1rem;
margin-top: 0.75rem;
}
.diagnostics h3 {
color: #fbbf24;
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
[data-theme="light"] .diagnostics h3 { color: #92400e; }
[data-theme="light"] .diagnostics { color: #78350f; background: rgba(251, 191, 36, 0.12); }
.diagnostics ul {
padding-left: 1.2rem;
margin: 0.4rem 0;
list-style: disc;
}
.diagnostics li {
color: var(--text-secondary);
margin-bottom: 0.35rem;
font-size: 0.85rem;
}
.attempts {
color: var(--text-muted);
font-size: 0.8rem;
margin-top: 0.4rem;
}
.table-wrap { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
font-family: var(--font-mono);
}
thead th {
text-align: left;
padding: 0.4rem 0.6rem;
border-bottom: 2px solid var(--border-color);
color: var(--text-secondary);
font-weight: 500;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
tbody td {
padding: 0.4rem 0.6rem;
border-bottom: 1px solid var(--border-color);
}
code {
background: var(--bg-tertiary);
color: var(--text-primary);
padding: 0.1rem 0.3rem;
border-radius: 3px;
font-size: 0.85em;
font-family: var(--font-mono);
}
.peer-row { cursor: pointer; transition: background 0.15s; }
.peer-row:hover { background: var(--bg-tertiary); }
.empty {
color: var(--text-muted);
font-size: 0.9rem;
font-style: italic;