Alfred
/
fm-rds-tx
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 6 Wiki Aktywność
Go-based FM stereo transmitter with RDS, Windows-first and cross-platform
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
124 Commity
1 Gałąź
37MB
Drzewo: 89144c453f
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z '89144c453f'
${ noResults }
fm-rds-tx/internal/control/ui.html

2670 wiersze
84KB
Czysty Wina Historia 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="utf-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>fm-rds-tx</title>

  7. <style>

  8. @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Archivo+Black&display=swap');

  9. 

  10. :root {

  11.   --bg: #0a0a0c;

  12.   --bg-2: #0f1015;

  13.   --surface: #111116;

  14.   --surface2: #18181e;

  15.   --surface3: #1f2028;

  16.   --border: #2a2a35;

  17.   --border-strong: #3a3a49;

  18.   --text: #d4d4dc;

  19.   --text-dim: #8b8b99;

  20.   --text-muted: #666674;

  21.   --accent: #ff3b30;

  22.   --accent-glow: #ff3b3044;

  23.   --green: #30d158;

  24.   --green-glow: #30d15844;

  25.   --amber: #ff9f0a;

  26.   --amber-glow: #ff9f0a44;

  27.   --blue: #0a84ff;

  28.   --blue-glow: #0a84ff33;

  29.   --mono: 'JetBrains Mono', monospace;

  30.   --display: 'Archivo Black', sans-serif;

  31.   --radius: 8px;

  32.   --shadow: 0 10px 30px rgba(0,0,0,.25);

  33. }

  34. 

  35. * { box-sizing: border-box; margin: 0; padding: 0; }

  36. html { color-scheme: dark; }

  37. body {

  38.   background:

  39.     radial-gradient(circle at top right, rgba(10,132,255,.06), transparent 28%),

  40.     radial-gradient(circle at top left, rgba(255,59,48,.06), transparent 30%),

  41.     var(--bg);

  42.   color: var(--text);

  43.   font-family: var(--mono);

  44.   font-size: 13px;

  45.   line-height: 1.5;

  46.   min-height: 100vh;

  47.   overflow-x: hidden;

  48. }

  49. 

  50. body::before {

  51.   content: '';

  52.   position: fixed; inset: 0;

  53.   background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px);

  54.   pointer-events: none;

  55.   z-index: 1000;

  56. }

  57. 

  58. button, input { font: inherit; }

  59. button { user-select: none; }

  60. 

  61. .app {

  62.   max-width: 1120px;

  63.   margin: 0 auto;

  64.   padding: 18px;

  65. }

  66. 

  67. .header {

  68.   display: flex;

  69.   align-items: flex-start;

  70.   justify-content: space-between;

  71.   gap: 18px;

  72.   padding: 8px 0 22px;

  73.   border-bottom: 1px solid var(--border);

  74.   margin-bottom: 18px;

  75. }

  76. .header-main {

  77.   display: flex;

  78.   flex-direction: column;

  79.   gap: 8px;

  80. }

  81. .header h1 {

  82.   font-family: var(--display);

  83.   font-size: 24px;

  84.   letter-spacing: 2px;

  85.   text-transform: uppercase;

  86.   color: var(--accent);

  87.   text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);

  88. }

  89. .header-sub {

  90.   display: flex;

  91.   flex-wrap: wrap;

  92.   gap: 8px;

  93. }

  94. .badge {

  95.   display: inline-flex;

  96.   align-items: center;

  97.   gap: 8px;

  98.   min-height: 28px;

  99.   padding: 0 10px;

  100.   border: 1px solid var(--border);

  101.   border-radius: 999px;

  102.   background: rgba(255,255,255,0.02);

  103.   color: var(--text-dim);

  104.   font-size: 11px;

  105.   text-transform: uppercase;

  106.   letter-spacing: .8px;

  107. }

  108. .badge strong {

  109.   color: var(--text);

  110.   font-weight: 700;

  111. }

  112. .header-status {

  113.   display: flex;

  114.   align-items: center;

  115.   gap: 10px;

  116.   padding-top: 6px;

  117. }

  118. 

  119. .led {

  120.   width: 10px;

  121.   height: 10px;

  122.   border-radius: 50%;

  123.   background: #333;

  124.   box-shadow: none;

  125.   transition: all .25s ease;

  126.   flex-shrink: 0;

  127. }

  128. .led.on-green {

  129.   background: var(--green);

  130.   box-shadow: 0 0 10px rgba(46, 125, 50, 0.45);

  131. }

  132. .led.on-red {

  133.   background: var(--accent);

  134.   box-shadow: 0 0 10px rgba(180, 35, 24, 0.45);

  135. }

  136. .led.on-amber {

  137.   background: var(--amber);

  138.   box-shadow: 0 0 10px rgba(178, 106, 0, 0.45);

  139. }

  140. .led.on-blue {

  141.   background: var(--blue);

  142.   box-shadow: 0 0 10px rgba(41, 98, 179, 0.45);

  143. }

  144. 

  145. .status-text {

  146.   font-size: 10px;

  147.   color: var(--text-dim);

  148.   text-transform: uppercase;

  149.   letter-spacing: 1.2px;

  150. }

  151. 

  152. .tab-bar {

  153.   display: flex;

  154.   gap: 10px;

  155.   border-bottom: 1px solid var(--border);

  156.   padding-bottom: 10px;

  157.   margin: 0 -24px 18px;

  158.   flex-wrap: wrap;

  159. }

  160. .tab-btn {

  161.   border: 1px solid var(--border);

  162.   border-radius: var(--radius);

  163.   background: transparent;

  164.   color: var(--text-dim);

  165.   font-size: 12px;

  166.   font-weight: 600;

  167.   padding: 8px 18px;

  168.   cursor: pointer;

  169.   transition: all .16s ease;

  170. }

  171. .tab-btn.active {

  172.   border-color: var(--accent);

  173.   background: var(--surface);

  174.   color: var(--accent);

  175. }

  176. .tab-btn:focus-visible {

  177.   outline: 2px solid var(--accent);

  178.   outline-offset: 2px;

  179. }

  180. .tab-panels {

  181.   display: flex;

  182.   flex-direction: column;

  183.   gap: 14px;

  184. }

  185. .tab-panel {

  186.   display: none;

  187. }

  188. .tab-panel.active {

  189.   display: block;

  190. }

  191. .tab-columns {

  192.   display: grid;

  193.   gap: 16px;

  194. }

  195. .tab-columns.two {

  196.   grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);

  197. }

  198. .tab-columns.one {

  199.   grid-template-columns: 1fr;

  200. }

  201. 

  202. 

  203. .stack { display: flex; flex-direction: column; gap: 12px; }

  204. 

  205. .card {

  206.   background: var(--surface);

  207.   border: 1px solid var(--border);

  208.   border-radius: var(--radius);

  209.   box-shadow: var(--shadow);

  210. }

  211. 

  212. .hero {

  213.   padding: 16px;

  214. }

  215. @keyframes blinkSoft {

  216.   0%, 100% { opacity: 1; }

  217.   50% { opacity: .55; }

  218. }

  219. 

  220. .tx-bar {

  221.   position: relative;

  222.   z-index: 1;

  223.   display: grid;

  224.   grid-template-columns: minmax(180px, 250px) 1fr auto;

  225.   gap: 14px;

  226.   align-items: center;

  227. }

  228. 

  229. .freq-display-wrap {

  230.   display: flex;

  231.   flex-direction: column;

  232.   gap: 6px;

  233. }

  234. .freq-display-label {

  235.   font-size: 10px;

  236.   text-transform: uppercase;

  237.   letter-spacing: 1.4px;

  238.   color: var(--text-dim);

  239. }

  240. .freq-display {

  241.   font-family: var(--display);

  242.   font-size: 38px;

  243.   color: var(--text);

  244.   letter-spacing: 0.6px;

  245.   line-height: 1;

  246.   font-weight: 600;

  247. }

  248. .freq-display .unit {

  249.   font-family: var(--mono);

  250.   font-size: 14px;

  251.   color: var(--text-dim);

  252.   margin-left: 5px;

  253. }

  254. 

  255. .freq-note {

  256.   display: flex;

  257.   gap: 12px;

  258.   margin-top: 6px;

  259.   font-size: 11px;

  260.   color: var(--text-muted);

  261.   text-transform: uppercase;

  262.   letter-spacing: 1px;

  263. }

  264. .freq-note-item {

  265.   display: inline-flex;

  266.   align-items: center;

  267.   gap: 4px;

  268. }

  269. .freq-note.mismatch .freq-note-item {

  270.   color: var(--amber);

  271. }

  272. 

  273. .tx-actions {

  274.   display: flex;

  275.   flex-wrap: wrap;

  276.   gap: 10px;

  277. }

  278. 

  279. .tx-btn, .ghost-btn, .apply-btn, .preset-btn, .danger-btn {

  280.   min-height: 40px;

  281.   padding: 0 18px;

  282.   border-radius: var(--radius);

  283.   border: 1px solid var(--border);

  284.   background: var(--surface2);

  285.   color: var(--text);

  286.   cursor: pointer;

  287.   font-size: 12px;

  288.   font-weight: 700;

  289.   text-transform: uppercase;

  290.   letter-spacing: 1px;

  291.   transition: all .16s ease;

  292. }

  293. .tx-btn:hover, .ghost-btn:hover, .apply-btn:hover, .preset-btn:hover, .danger-btn:hover {

  294.   transform: translateY(-1px);

  295.   border-color: var(--border-strong);

  296. }

  297. .tx-btn:disabled, .ghost-btn:disabled, .apply-btn:disabled, .preset-btn:disabled, .danger-btn:disabled {

  298.   opacity: .45;

  299.   cursor: not-allowed;

  300.   transform: none;

  301. }

  302. .tx-btn.start { border-color: var(--green); color: var(--green); }

  303. .tx-btn.start:hover:not(:disabled) { background: rgba(48,209,88,.1); }

  304. .tx-btn.stop { border-color: var(--accent); color: var(--accent); }

  305. .tx-btn.stop:hover:not(:disabled) { background: rgba(255,59,48,.1); }

  306. .ghost-btn { color: var(--text-dim); }

  307. .danger-btn {

  308.   border-color: rgba(255,59,48,.45);

  309.   color: var(--accent);

  310.   background: rgba(255,59,48,.04);

  311. }

  312. .danger-btn:hover:not(:disabled) {

  313.   background: rgba(255,59,48,.12);

  314. }

  315. 

  316. .tx-state-wrap {

  317.   display: flex;

  318.   flex-direction: column;

  319.   align-items: flex-end;

  320.   gap: 6px;

  321. }

  322. .tx-state {

  323.   font-size: 11px;

  324.   text-transform: uppercase;

  325.   letter-spacing: 2px;

  326.   color: var(--text-dim);

  327. }

  328. .tx-state.running { color: var(--green); animation: blinkSoft 2s ease-in-out infinite; }

  329. .tx-state.idle, .tx-state.stopped { color: var(--text-dim); }

  330. .tx-state.starting, .tx-state.stopping, .tx-state.working { color: var(--amber); animation: blinkSoft 1.1s ease-in-out infinite; }

  331. .tx-state.error { color: var(--accent); }

  332. .status-hint {

  333.   font-size: 10px;

  334.   color: var(--text-muted);

  335.   text-align: right;

  336. }

  337. 

  338. .quick-grid {

  339.   position: relative;

  340.   z-index: 1;

  341.   display: grid;

  342.   grid-template-columns: repeat(5, minmax(0, 1fr));

  343.   gap: 10px;

  344.   margin-top: 16px;

  345. }

  346. .quick-item {

  347.   padding: 12px;

  348.   border: 1px solid var(--border);

  349.   border-radius: var(--radius);

  350.   background: var(--bg-2);

  351. }

  352. .quick-item .label {

  353.   font-size: 9px;

  354.   text-transform: uppercase;

  355.   letter-spacing: 1.4px;

  356.   color: var(--text-dim);

  357.   margin-bottom: 6px;

  358. }

  359. .quick-item .value {

  360.   font-size: 18px;

  361.   font-weight: 700;

  362.   color: var(--text);

  363. }

  364. .quick-item .value.warn { color: var(--amber); }

  365. .quick-item .value.err { color: var(--accent); }

  366. .quick-item .value.good { color: var(--green); }

  367. 

  368. .signal-grid {

  369.   position: relative;

  370.   z-index: 1;

  371.   display: grid;

  372.   grid-template-columns: repeat(3, minmax(0, 1fr));

  373.   gap: 10px;

  374.   margin-top: 12px;

  375. }

  376. .signal-card {

  377.   padding: 12px;

  378.   border: 1px solid var(--border);

  379.   border-radius: var(--radius);

  380.   background: var(--bg-2);

  381. }

  382. .signal-head {

  383.   display: flex;

  384.   align-items: center;

  385.   justify-content: space-between;

  386.   gap: 10px;

  387.   margin-bottom: 8px;

  388. }

  389. .signal-title {

  390.   font-size: 10px;

  391.   color: var(--text-dim);

  392.   text-transform: uppercase;

  393.   letter-spacing: 1.2px;

  394. }

  395. .signal-value {

  396.   font-size: 11px;

  397.   color: var(--text);

  398.   font-weight: 700;

  399. }

  400. .meter {

  401.   width: 100%;

  402.   height: 10px;

  403.   border-radius: 999px;

  404.   background: #171821;

  405.   border: 1px solid var(--border);

  406.   overflow: hidden;

  407. }

  408. .meter-fill {

  409.   height: 100%;

  410.   width: 0%;

  411.   transition: width .25s ease, background-color .25s ease;

  412.   background: linear-gradient(90deg, var(--green), #5cff90);

  413. }

  414. .meter-fill.warn {

  415.   background: linear-gradient(90deg, var(--amber), #ffc45b);

  416. }

  417. .meter-fill.err {

  418.   background: linear-gradient(90deg, var(--accent), #ff6b63);

  419. }

  420. .spark {

  421.   width: 100%;

  422.   height: 34px;

  423.   margin-top: 10px;

  424.   border-radius: 6px;

  425.   background: rgba(255,255,255,0.01);

  426.   border: 1px solid rgba(255,255,255,0.03);

  427. }

  428. .spark path.line {

  429.   fill: none;

  430.   stroke-width: 2;

  431.   stroke-linecap: round;

  432.   stroke-linejoin: round;

  433. }

  434. .spark path.area {

  435.   opacity: .14;

  436. }

  437. .spark.good path.line { stroke: var(--green); }

  438. .spark.good path.area { fill: var(--green); }

  439. .spark.warn path.line { stroke: var(--amber); }

  440. .spark.warn path.area { fill: var(--amber); }

  441. .spark.err path.line { stroke: var(--accent); }

  442. .spark.err path.area { fill: var(--accent); }

  443. 

  444. .panel {

  445.   overflow: hidden;

  446. }

  447. .panel-head {

  448.   display: flex;

  449.   align-items: center;

  450.   gap: 8px;

  451.   padding: 12px 14px;

  452.   border-bottom: 1px solid var(--border);

  453.   background: var(--surface2);

  454.   cursor: pointer;

  455.   user-select: none;

  456. }

  457. .panel-head h2 {

  458.   font-size: 11px;

  459.   font-weight: 700;

  460.   text-transform: uppercase;

  461.   letter-spacing: 1.6px;

  462.   color: var(--text-dim);

  463. }

  464. .panel-head .meta {

  465.   margin-left: auto;

  466.   margin-right: 8px;

  467.   font-size: 10px;

  468.   color: var(--text-muted);

  469.   text-transform: uppercase;

  470.   letter-spacing: 1px;

  471. }

  472. .panel-head .chevron {

  473.   color: var(--text-dim);

  474.   transition: transform .2s ease;

  475.   font-size: 10px;

  476. }

  477. .panel-head.collapsed .chevron { transform: rotate(-90deg); }

  478. .panel-body { padding: 14px; }

  479. .panel-body.collapsed { display: none; }

  480. 

  481. .section-note {

  482.   font-size: 11px;

  483.   color: var(--text-muted);

  484.   margin-bottom: 12px;

  485. }

  486. .shortcuts-grid {

  487.   display: grid;

  488.   grid-template-columns: repeat(2, minmax(0, 1fr));

  489.   gap: 8px 12px;

  490. }

  491. .shortcut-line {

  492.   display: flex;

  493.   align-items: center;

  494.   justify-content: space-between;

  495.   gap: 12px;

  496.   padding: 7px 0;

  497.   border-bottom: 1px solid #1a1a22;

  498. }

  499. .shortcut-line:last-child { border-bottom: none; }

  500. .shortcut-line .name { font-size: 11px; color: var(--text-dim); }

  501. .shortcut-line .keys {

  502.   display: inline-flex;

  503.   gap: 6px;

  504.   flex-wrap: wrap;

  505. }

  506. .kbd {

  507.   min-width: 28px;

  508.   padding: 3px 7px;

  509.   border: 1px solid var(--border);

  510.   border-bottom-width: 2px;

  511.   border-radius: 6px;

  512.   background: var(--bg-2);

  513.   font-size: 10px;

  514.   color: var(--text);

  515.   text-align: center;

  516. }

  517. 

  518. .preset-row {

  519.   display: flex;

  520.   flex-wrap: wrap;

  521.   gap: 8px;

  522.   margin-bottom: 12px;

  523. }

  524. .preset-btn {

  525.   min-height: 34px;

  526.   padding: 0 12px;

  527.   font-size: 11px;

  528.   letter-spacing: .8px;

  529.   color: var(--text-dim);

  530. }

  531. .preset-btn.active {

  532.   border-color: var(--blue);

  533.   color: var(--blue);

  534.   background: rgba(10,132,255,.08);

  535. }

  536. .preset-btn.rds {

  537.   text-transform: none;

  538.   font-weight: 600;

  539. }

  540. 

  541. .ctrl-row {

  542.   display: flex;

  543.   align-items: center;

  544.   gap: 12px;

  545.   padding: 10px 0;

  546.   border-bottom: 1px solid #1a1a22;

  547. }

  548. .ctrl-row:last-child { border-bottom: none; }

  549. .ctrl-label-wrap {

  550.   min-width: 130px;

  551.   display: flex;

  552.   flex-direction: column;

  553.   gap: 2px;

  554. }

  555. .ctrl-label {

  556.   font-size: 11px;

  557.   color: var(--text-dim);

  558.   text-transform: uppercase;

  559.   letter-spacing: .8px;

  560. }

  561. .ctrl-sub {

  562.   font-size: 10px;

  563.   color: var(--text-muted);

  564. }

  565. .ctrl-input {

  566.   flex: 1;

  567.   display: flex;

  568.   align-items: center;

  569.   gap: 10px;

  570. }

  571. 

  572. input[type="range"] {

  573.   -webkit-appearance: none;

  574.   appearance: none;

  575.   flex: 1;

  576.   height: 6px;

  577.   background: linear-gradient(90deg, var(--border), var(--surface3));

  578.   border-radius: 999px;

  579.   outline: none;

  580. }

  581. input[type="range"]::-webkit-slider-thumb {

  582.   -webkit-appearance: none;

  583.   width: 16px;

  584.   height: 16px;

  585.   border-radius: 50%;

  586.   background: var(--text);

  587.   border: 2px solid var(--bg);

  588.   cursor: pointer;

  589.   transition: background .15s ease, transform .15s ease;

  590. }

  591. input[type="range"]::-webkit-slider-thumb:hover {

  592.   background: var(--accent);

  593.   transform: scale(1.06);

  594. }

  595. input[type="number"], input[type="text"] {

  596.   background: var(--bg);

  597.   border: 1px solid var(--border);

  598.   border-radius: 6px;

  599.   color: var(--text);

  600.   padding: 8px 10px;

  601.   outline: none;

  602.   transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;

  603. }

  604. input[type="number"] {

  605.   width: 92px;

  606.   text-align: right;

  607. }

  608. input[type="text"] { width: 100%; }

  609. input:focus {

  610.   border-color: var(--accent);

  611.   box-shadow: 0 0 0 3px rgba(255,59,48,.12);

  612. }

  613. input.input-dirty {

  614.   border-color: var(--amber);

  615.   box-shadow: 0 0 0 3px rgba(255,159,10,.08);

  616. }

  617. input.input-error {

  618.   border-color: var(--accent);

  619.   box-shadow: 0 0 0 3px rgba(255,59,48,.14);

  620.   background: rgba(255,59,48,.04);

  621. }

  622. .val-display {

  623.   min-width: 64px;

  624.   text-align: right;

  625.   font-size: 12px;

  626.   font-weight: 700;

  627.   color: var(--text);

  628. }

  629. .unit-label {

  630.   font-size: 11px;

  631.   color: var(--text-dim);

  632.   min-width: 44px;

  633. }

  634. .field-error {

  635.   display: none;

  636.   margin-top: 8px;

  637.   font-size: 11px;

  638.   color: var(--accent);

  639. }

  640. .field-error.show { display: block; }

  641. 

  642. .toggle-row {

  643.   display: flex;

  644.   align-items: center;

  645.   justify-content: space-between;

  646.   gap: 14px;

  647.   padding: 12px 0;

  648.   border-bottom: 1px solid #1a1a22;

  649. }

  650. .toggle-row:last-child { border-bottom: none; }

  651. .toggle-copy {

  652.   display: flex;

  653.   flex-direction: column;

  654.   gap: 3px;

  655. }

  656. .toggle-copy .title {

  657.   font-size: 12px;

  658.   color: var(--text);

  659.   font-weight: 700;

  660. }

  661. .toggle-copy .sub {

  662.   font-size: 10px;

  663.   color: var(--text-muted);

  664. }

  665. .toggle-ctl {

  666.   display: flex;

  667.   align-items: center;

  668.   gap: 10px;

  669. }

  670. .toggle {

  671.   position: relative;

  672.   width: 42px;

  673.   height: 24px;

  674.   background: var(--border);

  675.   border-radius: 999px;

  676.   cursor: pointer;

  677.   transition: all .2s ease;

  678.   flex-shrink: 0;

  679. }

  680. .toggle::after {

  681.   content: '';

  682.   position: absolute;

  683.   top: 3px;

  684.   left: 3px;

  685.   width: 18px;

  686.   height: 18px;

  687.   background: var(--text);

  688.   border-radius: 50%;

  689.   transition: transform .2s ease;

  690. }

  691. .toggle.on { background: var(--green); }

  692. .toggle.on::after { transform: translateX(18px); }

  693. .toggle.busy { opacity: .55; pointer-events: none; }

  694. .toggle-state {

  695.   min-width: 52px;

  696.   text-align: right;

  697.   font-size: 11px;

  698.   color: var(--text-dim);

  699.   text-transform: uppercase;

  700.   letter-spacing: 1px;

  701. }

  702. 

  703. .rds-grid {

  704.   display: grid;

  705.   gap: 12px;

  706. }

  707. .rds-field {

  708.   display: flex;

  709.   flex-direction: column;

  710.   gap: 6px;

  711. }

  712. .rds-input {

  713.   width: 100%;

  714.   background: var(--bg);

  715.   border: 1px solid var(--border);

  716.   border-radius: 6px;

  717.   color: var(--green);

  718.   font-family: var(--mono);

  719.   font-size: 15px;

  720.   font-weight: 700;

  721.   padding: 10px 12px;

  722.   outline: none;

  723.   letter-spacing: 2px;

  724.   text-transform: uppercase;

  725. }

  726. .rds-input.rt {

  727.   color: var(--text);

  728.   text-transform: none;

  729.   letter-spacing: .5px;

  730.   font-size: 12px;

  731.   font-weight: 500;

  732. }

  733. .rds-charcount {

  734.   font-size: 10px;

  735.   color: var(--text-dim);

  736.   text-align: right;

  737. }

  738. 

  739. .actions-row {

  740.   display: flex;

  741.   gap: 10px;

  742.   flex-wrap: wrap;

  743.   margin-top: 14px;

  744. }

  745. .apply-btn {

  746.   background: var(--accent);

  747.   border-color: transparent;

  748.   color: #fff;

  749. }

  750. .apply-btn.secondary {

  751.   background: var(--surface2);

  752.   color: var(--text-dim);

  753.   border-color: var(--border);

  754. }

  755. .apply-btn.ok { background: var(--green); color: var(--bg); }

  756. 

  757. .sidebar-card {

  758.   padding: 14px;

  759. }

  760. .sidebar-section + .sidebar-section {

  761.   margin-top: 14px;

  762.   padding-top: 14px;

  763.   border-top: 1px solid var(--border);

  764. }

  765. .sidebar-title {

  766.   font-size: 11px;

  767.   text-transform: uppercase;

  768.   letter-spacing: 1.4px;

  769.   color: var(--text-dim);

  770.   margin-bottom: 10px;

  771. }

  772. .kv {

  773.   display: grid;

  774.   grid-template-columns: auto 1fr;

  775.   gap: 8px 12px;

  776.   align-items: start;

  777. }

  778. .kv .k {

  779.   font-size: 10px;

  780.   color: var(--text-muted);

  781.   text-transform: uppercase;

  782.   letter-spacing: 1px;

  783. }

  784. .kv .v {

  785.   font-size: 12px;

  786.   color: var(--text);

  787.   word-break: break-word;

  788. }

  789. .health-line {

  790.   display: flex;

  791.   align-items: center;

  792.   justify-content: space-between;

  793.   gap: 10px;

  794.   padding: 8px 0;

  795.   border-bottom: 1px solid #1a1a22;

  796. }

  797. .health-line:last-child { border-bottom: none; }

  798. .health-line .name {

  799.   font-size: 11px;

  800.   color: var(--text-dim);

  801. }

  802. .health-line .val {

  803.   font-size: 11px;

  804.   color: var(--text);

  805.   text-align: right;

  806. }

  807. .health-line .val.good { color: var(--green); }

  808. .health-line .val.warn { color: var(--amber); }

  809. .health-line .val.err { color: var(--accent); }

  810. .health-trend {

  811.   margin-top: 10px;

  812. }

  813. .health-trend-label {

  814.   font-size: 10px;

  815.   text-transform: uppercase;

  816.   letter-spacing: 1px;

  817.   color: var(--text-muted);

  818.   margin-bottom: 6px;

  819. }

  820. 

  821. .fault-history {

  822.   margin-top: 12px;

  823.   padding: 10px;

  824.   border: 1px solid var(--border);

  825.   border-radius: 6px;

  826.   background: var(--surface1);

  827.   font-size: 11px;

  828.   max-height: 180px;

  829.   overflow-y: auto;

  830.   line-height: 1.3;

  831. }

  832. .fault-history-entry {

  833.   display: flex;

  834.   justify-content: space-between;

  835.   gap: 10px;

  836.   padding: 4px 0;

  837.   border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  838. }

  839. .fault-history-entry:last-child {

  840.   border-bottom: none;

  841. }

  842. .fault-history-entry .fault-history-time {

  843.   color: var(--text-dim);

  844. }

  845. .fault-history-entry.ok { color: var(--green); }

  846. .fault-history-entry.warn { color: var(--amber); }

  847. .fault-history-entry.err { color: var(--accent); }

  848. .fault-history-desc {

  849.   font-size: 10px;

  850.   flex: 1;

  851.   text-transform: uppercase;

  852.   letter-spacing: 0.5px;

  853. }

  854. .fault-history-empty {

  855.   padding: 6px 0;

  856.   color: var(--text-muted);

  857.   font-size: 11px;

  858. }

  859. .transition-history {

  860.   margin-top: 12px;

  861.   padding: 10px;

  862.   border: 1px solid var(--border);

  863.   border-radius: 6px;

  864.   background: var(--surface);

  865.   font-size: 11px;

  866.   max-height: 180px;

  867.   overflow-y: auto;

  868.   line-height: 1.3;

  869. }

  870. .transition-history-entry {

  871.   display: flex;

  872.   justify-content: space-between;

  873.   gap: 10px;

  874.   padding: 4px 0;

  875.   border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  876. }

  877. .transition-history-entry:last-child {

  878.   border-bottom: none;

  879. }

  880. .transition-history-entry .transition-history-time {

  881.   color: var(--text-dim);

  882. }

  883. .transition-history-entry.good { color: var(--green); }

  884. .transition-history-entry.warn { color: var(--amber); }

  885. .transition-history-entry.err { color: var(--accent); }

  886. .transition-history-entry.info { color: var(--text); }

  887. .transition-history-desc {

  888.   font-size: 10px;

  889.   flex: 1;

  890.   text-transform: uppercase;

  891.   letter-spacing: 0.5px;

  892. }

  893. .transition-history-empty {

  894.   padding: 6px 0;

  895.   color: var(--text-muted);

  896.   font-size: 11px;

  897. }

  898. .section-note.reset-hint {

  899.   font-size: 11px;

  900.   color: var(--text-dim);

  901.   margin-top: 10px;

  902. }

  903. 

  904. .log {

  905.   background: var(--bg);

  906.   border: 1px solid var(--border);

  907.   border-radius: 6px;

  908.   padding: 10px;

  909.   font-size: 10px;

  910.   color: var(--text-dim);

  911.   max-height: 220px;

  912.   overflow-y: auto;

  913.   white-space: pre-wrap;

  914.   word-break: break-word;

  915. }

  916. .log .entry { padding: 3px 0; }

  917. .log .entry.err { color: var(--accent); }

  918. .log .entry.ok { color: var(--green); }

  919. .log .entry.warn { color: var(--amber); }

  920. .log .entry.info { color: var(--blue); }

  921. .empty-log {

  922.   color: var(--text-muted);

  923. }

  924. 

  925. .toast {

  926.   position: fixed;

  927.   right: 16px;

  928.   bottom: 16px;

  929.   max-width: min(420px, calc(100vw - 24px));

  930.   padding: 12px 15px;

  931.   border-radius: var(--radius);

  932.   font-size: 12px;

  933.   font-weight: 700;

  934.   z-index: 2000;

  935.   transform: translateY(60px);

  936.   opacity: 0;

  937.   transition: all .25s ease;

  938.   box-shadow: var(--shadow);

  939. }

  940. .toast.show { transform: translateY(0); opacity: 1; }

  941. .toast.ok { background: var(--green); color: var(--bg); }

  942. .toast.err { background: var(--accent); color: #fff; }

  943. .toast.info { background: var(--blue); color: #fff; }

  944. .toast.warn { background: var(--amber); color: #141414; }

  945. 

  946. @media (max-width: 980px) {

  947.   .tab-columns.two {

  948.     grid-template-columns: 1fr;

  949.   }

  950.   .tab-bar {

  951.     margin: 0 -12px 18px;

  952.   }

  953.   .tx-bar {

  954.     grid-template-columns: 1fr;

  955.     align-items: stretch;

  956.   }

  957.   .tx-state-wrap {

  958.     align-items: flex-start;

  959.   }

  960.   .status-hint { text-align: left; }

  961.   .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  962.   .signal-grid { grid-template-columns: 1fr; }

  963. }

  964. 

  965. @media (max-width: 640px) {

  966.   .tab-columns.two {

  967.     grid-template-columns: 1fr;

  968.   }

  969.   .tab-bar {

  970.     margin: 0 -12px 14px;

  971.   }

  972.   .app { padding: 12px; }

  973.   .header { flex-direction: column; align-items: stretch; gap: 10px; }

  974.   .header h1 { font-size: 22px; }

  975.   .header-sub { gap: 6px; }

  976.   .badge { width: 100%; justify-content: space-between; }

  977.   .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  978.   .quick-item { padding: 10px; }

  979.   .quick-item .value { font-size: 16px; }

  980.   .ctrl-row { flex-direction: column; align-items: stretch; }

  981.   .ctrl-label-wrap { min-width: auto; }

  982.   .ctrl-input { flex-wrap: wrap; }

  983.   input[type="number"] { width: 100%; text-align: left; }

  984.   .actions-row, .tx-actions { flex-direction: column; }

  985.   .tx-btn, .ghost-btn, .apply-btn, .preset-btn, .danger-btn { width: 100%; }

  986.   .panel-head { padding: 11px 12px; }

  987.   .panel-body, .sidebar-card { padding: 12px; }

  988.   .freq-display { font-size: 31px; }

  989.   .preset-row { flex-direction: column; }

  990.   .shortcuts-grid { grid-template-columns: 1fr; }

  991. }

  992. </style>

  993. </head>

  994. <body>

  995. <div class="app">

  996.   <div class="header">

  997.     <div class="header-main">

  998.       <h1>FM-RDS-TX</h1>

  999.       <div class="header-sub">

  1000.         <div class="badge"><span>Backend</span><strong id="badge-backend">--</strong></div>

  1001.         <div class="badge"><span>Mode</span><strong id="badge-mode">Control Plane</strong></div>

  1002.         <div class="badge"><span>Live Config</span><strong id="badge-live">--</strong></div>

  1003.       </div>

  1004.     </div>

  1005.     <div class="header-status">

  1006.       <div class="led" id="led-conn"></div>

  1007.       <div class="status-text" id="conn-label">connecting</div>

  1008.     </div>

  1009.   </div>

  1010. 

  1011. 

  1012.   <div class="tab-bar">

  1013.     <button class="tab-btn active" data-tab="overview" type="button">Overview</button>

  1014.     <button class="tab-btn" data-tab="control" type="button">Control</button>

  1015.     <button class="tab-btn" data-tab="diagnostics" type="button">Diagnostics</button>

  1016.     <button class="tab-btn" data-tab="activity" type="button">Activity</button>

  1017.   </div>

  1018. 

  1019.   <div class="tab-panels">

  1020.     <section class="tab-panel active" data-tab-panel="overview">

  1021.       <div class="tab-columns two">

  1022.         <div class="stack">

  1023.       <div class="card hero" id="hero-card">

  1024.         <div class="tx-bar">

  1025.           <div class="freq-display-wrap">

  1026.             <div class="freq-display-label">Carrier</div>

  1027.             <div class="freq-display" id="freq-display">---.-<span class="unit">MHz</span></div>

  1028.             <div class="freq-note" id="freq-note">

  1029.               <span class="freq-note-item" id="freq-applied">Applied: --</span>

  1030.               <span class="freq-note-item" id="freq-desired">Desired: --</span>

  1031.             </div>

  1032.           </div>

  1033. 

  1034.           <div class="tx-actions">

  1035.             <button class="tx-btn start" id="btn-start" type="button">TX ON</button>

  1036.             <button class="tx-btn stop" id="btn-stop" type="button">TX OFF</button>

  1037.             <button class="ghost-btn" id="btn-refresh" type="button">Refresh</button>

  1038.           </div>

  1039. 

  1040.           <div class="tx-state-wrap">

  1041.             <div class="tx-state idle" id="tx-state">IDLE</div>

  1042.             <div class="status-hint" id="tx-hint">Awaiting runtime data</div>

  1043.           </div>

  1044.         </div>

  1045. 

  1046.         <div class="quick-grid">

  1047.           <div class="quick-item">

  1048.             <div class="label">Chunks</div>

  1049.             <div class="value" id="t-chunks">--</div>

  1050.           </div>

  1051.           <div class="quick-item">

  1052.             <div class="label">Samples</div>

  1053.             <div class="value" id="t-samples">--</div>

  1054.           </div>

  1055.           <div class="quick-item">

  1056.             <div class="label">Underruns</div>

  1057.             <div class="value" id="t-underruns">--</div>

  1058.           </div>

  1059.           <div class="quick-item">

  1060.             <div class="label">Uptime</div>

  1061.             <div class="value" id="t-uptime">--</div>

  1062.           </div>

  1063.           <div class="quick-item">

  1064.             <div class="label">Rate</div>

  1065.             <div class="value" id="t-rate">--</div>

  1066.           </div>

  1067.         </div>

  1068. 

  1069.         <div class="signal-grid">

  1070.           <div class="signal-card">

  1071.             <div class="signal-head">

  1072.               <div class="signal-title">Audio Buffer</div>

  1073.               <div class="signal-value" id="meter-audio-text">--</div>

  1074.             </div>

  1075.             <div class="meter"><div class="meter-fill" id="meter-audio-fill"></div></div>

  1076.             <svg class="spark good" id="spark-audio" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1077.           </div>

  1078.           <div class="signal-card">

  1079.             <div class="signal-head">

  1080.               <div class="signal-title">Stream Health</div>

  1081.               <div class="signal-value" id="meter-stream-text">--</div>

  1082.             </div>

  1083.             <div class="meter"><div class="meter-fill" id="meter-stream-fill"></div></div>

  1084.             <svg class="spark warn" id="spark-underruns" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1085.           </div>

  1086.           <div class="signal-card">

  1087.             <div class="signal-head">

  1088.               <div class="signal-title">TX Activity</div>

  1089.               <div class="signal-value" id="meter-tx-text">--</div>

  1090.             </div>

  1091.             <div class="meter"><div class="meter-fill" id="meter-tx-fill"></div></div>

  1092.             <svg class="spark good" id="spark-tx" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1093.           </div>

  1094.         </div>

  1095.       </div>

  1096. 

  1097. 

  1098.         </div>

  1099.         <div class="stack">

  1100.           <div class="card sidebar-card">

  1101.         <div class="sidebar-section">

  1102.           <div class="sidebar-title">System Snapshot</div>

  1103.           <div class="kv">

  1104.             <div class="k">Backend</div><div class="v" id="info-backend">--</div>

  1105.             <div class="k">Frequency</div><div class="v" id="info-freq">--</div>

  1106.             <div class="k">Pre-emphasis</div><div class="v" id="info-preemph">--</div>

  1107.             <div class="k">FM Mod</div><div class="v" id="info-fmmod">--</div>

  1108.             <div class="k">Live Config</div><div class="v" id="info-live">--</div>

  1109.           </div>

  1110.         </div>

  1111. 

  1112. 

  1113.           </div>

  1114.         </div>

  1115.       </div>

  1116.     </section>

  1117. 

  1118.     <section class="tab-panel" data-tab-panel="control">

  1119.       <div class="tab-columns two">

  1120.         <div class="stack">

  1121.       <div class="card panel" data-panel-key="frequency">

  1122.         <div class="panel-head" data-panel>

  1123.           <div class="led on-green" style="width:6px;height:6px"></div>

  1124.           <h2>Frequency</h2>

  1125.           <div class="meta" id="freq-meta">Live-tunable</div>

  1126.           <span class="chevron">▼</span>

  1127.         </div>

  1128.         <div class="panel-body">

  1129.           <div class="section-note">Tune the RF carrier without restarting the control plane. Draft values stay local until you apply them.</div>

  1130. 

  1131.           <div class="preset-row" id="freq-presets">

  1132.             <button class="preset-btn" type="button" data-freq-preset="87.6">87.6 MHz</button>

  1133.             <button class="preset-btn" type="button" data-freq-preset="94.5">94.5 MHz</button>

  1134.             <button class="preset-btn" type="button" data-freq-preset="99.5">99.5 MHz</button>

  1135.             <button class="preset-btn" type="button" data-freq-preset="100.0">100.0 MHz</button>

  1136.             <button class="preset-btn" type="button" data-freq-preset="107.9">107.9 MHz</button>

  1137.           </div>

  1138. 

  1139.           <div class="ctrl-row">

  1140.             <div class="ctrl-label-wrap">

  1141.               <span class="ctrl-label">TX Freq</span>

  1142.               <span class="ctrl-sub">Valid range 65–110 MHz</span>

  1143.             </div>

  1144.             <div class="ctrl-input">

  1145.               <input type="range" min="65" max="110" step="0.1" id="freq-slider">

  1146.               <input type="number" min="65" max="110" step="0.1" id="freq-num">

  1147.               <span class="unit-label">MHz</span>

  1148.             </div>

  1149.           </div>

  1150.           <div class="field-error" id="freq-error"></div>

  1151.           <div class="actions-row">

  1152.             <button class="apply-btn" id="freq-apply" type="button">Apply Frequency</button>

  1153.             <button class="apply-btn secondary" id="freq-reset" type="button">Reset</button>

  1154.           </div>

  1155.         </div>

  1156.       </div>

  1157. 

  1158. 

  1159.       <div class="card panel" data-panel-key="switches">

  1160.         <div class="panel-head" data-panel>

  1161.           <div class="led on-green" style="width:6px;height:6px"></div>

  1162.           <h2>Switches</h2>

  1163.           <div class="meta">Live</div>

  1164.           <span class="chevron">▼</span>

  1165.         </div>

  1166.         <div class="panel-body">

  1167.           <div class="section-note">These switches apply immediately and show a busy state while the request is in flight.</div>

  1168. 

  1169.           <div class="toggle-row">

  1170.             <div class="toggle-copy">

  1171.               <div class="title">Stereo</div>

  1172.               <div class="sub">19 kHz pilot + 38 kHz DSB-SC</div>

  1173.             </div>

  1174.             <div class="toggle-ctl">

  1175.               <div class="toggle" id="tog-stereo" data-toggle="stereoEnabled" role="switch" aria-checked="false" tabindex="0"></div>

  1176.               <div class="toggle-state" id="stereo-label">--</div>

  1177.             </div>

  1178.           </div>

  1179. 

  1180.           <div class="toggle-row">

  1181.             <div class="toggle-copy">

  1182.               <div class="title">RDS</div>

  1183.               <div class="sub">57 kHz subcarrier encoder</div>

  1184.             </div>

  1185.             <div class="toggle-ctl">

  1186.               <div class="toggle" id="tog-rds" data-toggle="rdsEnabled" role="switch" aria-checked="false" tabindex="0"></div>

  1187.               <div class="toggle-state" id="rds-label">--</div>

  1188.             </div>

  1189.           </div>

  1190. 

  1191.           <div class="toggle-row">

  1192.             <div class="toggle-copy">

  1193.               <div class="title">Limiter</div>

  1194.               <div class="sub">MPX peak protection</div>

  1195.             </div>

  1196.             <div class="toggle-ctl">

  1197.               <div class="toggle" id="tog-limiter" data-toggle="limiterEnabled" role="switch" aria-checked="false" tabindex="0"></div>

  1198.               <div class="toggle-state" id="limiter-label">--</div>

  1199.             </div>

  1200.           </div>

  1201.         </div>

  1202.       </div>

  1203. 

  1204. 

  1205.       <div class="card panel" data-panel-key="rds">

  1206.         <div class="panel-head" data-panel>

  1207.           <div class="led on-amber" style="width:6px;height:6px"></div>

  1208.           <h2>RDS Text</h2>

  1209.           <div class="meta" id="rds-meta">PS + RT</div>

  1210.           <span class="chevron">▼</span>

  1211.         </div>

  1212.         <div class="panel-body">

  1213.           <div class="section-note">Edit Program Service and RadioText without losing in-progress typing when the page refreshes itself.</div>

  1214. 

  1215.           <div class="preset-row" id="rds-presets">

  1216.             <button class="preset-btn rds" type="button" data-rds-ps="FMRTX" data-rds-rt="fm-rds-tx live">Station ID</button>

  1217.             <button class="preset-btn rds" type="button" data-rds-ps="ONAIR" data-rds-rt="Now broadcasting">On Air</button>

  1218.             <button class="preset-btn rds" type="button" data-rds-ps="LIVE" data-rds-rt="Live set in progress">Live Set</button>

  1219.             <button class="preset-btn rds" type="button" data-rds-ps="TEST" data-rds-rt="RDS test transmission">Test</button>

  1220.           </div>

  1221. 

  1222.           <div class="rds-grid">

  1223.             <div class="rds-field">

  1224.               <span class="ctrl-label">Program Service (PS)</span>

  1225.               <input type="text" class="rds-input" id="rds-ps" maxlength="8" placeholder="STATION" spellcheck="false">

  1226.               <div class="rds-charcount"><span id="ps-count">0</span>/8</div>

  1227.               <div class="field-error" id="ps-error"></div>

  1228.             </div>

  1229.             <div class="rds-field">

  1230.               <span class="ctrl-label">RadioText (RT)</span>

  1231.               <input type="text" class="rds-input rt" id="rds-rt" maxlength="64" placeholder="Now playing..." spellcheck="false">

  1232.               <div class="rds-charcount"><span id="rt-count">0</span>/64</div>

  1233.               <div class="field-error" id="rt-error"></div>

  1234.             </div>

  1235.           </div>

  1236.           <div class="actions-row">

  1237.             <button class="apply-btn" id="rds-apply" type="button">Apply RDS Text</button>

  1238.             <button class="apply-btn secondary" id="rds-reset" type="button">Reset</button>

  1239.           </div>

  1240.         </div>

  1241.       </div>

  1242. 

  1243.         </div>

  1244.         <div class="stack">

  1245.       <div class="card panel" data-panel-key="shortcuts">

  1246.         <div class="panel-head" data-panel>

  1247.           <h2>Shortcuts</h2>

  1248.           <div class="meta">keyboard</div>

  1249.           <span class="chevron">▼</span>

  1250.         </div>

  1251.         <div class="panel-body">

  1252.           <div class="section-note">Fast control, as long as you're not typing in an input field.</div>

  1253.           <div class="shortcuts-grid">

  1254.             <div>

  1255.               <div class="shortcut-line"><span class="name">Start TX</span><span class="keys"><span class="kbd">t</span></span></div>

  1256.               <div class="shortcut-line"><span class="name">Stop TX</span><span class="keys"><span class="kbd">Shift</span><span class="kbd">t</span></span></div>

  1257.               <div class="shortcut-line"><span class="name">Refresh</span><span class="keys"><span class="kbd">r</span></span></div>

  1258.             </div>

  1259.             <div>

  1260.               <div class="shortcut-line"><span class="name">Next Freq Preset</span><span class="keys"><span class="kbd">]</span></span></div>

  1261.               <div class="shortcut-line"><span class="name">Prev Freq Preset</span><span class="keys"><span class="kbd">[</span></span></div>

  1262.               <div class="shortcut-line"><span class="name">Apply Draft</span><span class="keys"><span class="kbd">Enter</span></span></div>

  1263.             </div>

  1264.           </div>

  1265.         </div>

  1266.       </div>

  1267. 

  1268. 

  1269.       <div class="card panel" data-panel-key="danger">

  1270.         <div class="panel-head" data-panel>

  1271.           <h2>Danger Zone</h2>

  1272.           <div class="meta">tx control</div>

  1273.           <span class="chevron">▼</span>

  1274.         </div>

  1275.         <div class="panel-body">

  1276.           <div class="section-note">Fast emergency controls. Nothing hidden here — just clearer separation from normal controls.</div>

  1277.           <div class="actions-row" style="margin-top:0">

  1278.             <button class="danger-btn" id="danger-stop" type="button">Emergency Stop TX</button>

  1279.             <button class="danger-btn" id="danger-refresh" type="button">Hard Refresh Runtime</button>

  1280.             <button class="danger-btn secondary" id="danger-reset-fault" type="button">Reset Fault</button>

  1281. 

  1282.           </div>

  1283.           <div class="section-note reset-hint" id="reset-hint">

  1284.             Reset Fault moves the runtime back to DEGRADED while the queue settles before running again.

  1285.           </div>

  1286.         </div>

  1287.       </div>

  1288. 

  1289. 

  1290.         </div>

  1291.       </div>

  1292.     </section>

  1293. 

  1294.     <section class="tab-panel" data-tab-panel="diagnostics">

  1295.       <div class="tab-columns two">

  1296.         <div class="stack">

  1297.           <div class="card sidebar-card">

  1298.         <div class="sidebar-section">

  1299.           <div class="sidebar-title">Health</div>

  1300.           <div class="health-line"><div class="name">HTTP</div><div class="val" id="health-http">--</div></div>

  1301.           <div class="health-line"><div class="name">Runtime</div><div class="val" id="health-runtime">--</div></div>

  1302.           <div class="health-line"><div class="name">State Age</div><div class="val" id="health-state-age">--</div></div>

  1303.           <div class="health-line"><div class="name">Runtime Signal</div><div class="val" id="health-indicator">--</div></div>

  1304.           <div class="health-line"><div class="name">Runtime Alert</div><div class="val" id="health-alert">--</div></div>

  1305.           <div class="health-line"><div class="name">Transitions (D/M/F)</div><div class="val" id="health-transitions">--</div></div>

  1306.           <div class="health-line"><div class="name">Fault Count</div><div class="val" id="health-fault-count">--</div></div>

  1307.           <div class="health-line"><div class="name">Last Fault</div><div class="val" id="health-last-fault">--</div></div>

  1308.           <div class="health-line"><div class="name">Audio Buffer</div><div class="val" id="health-audio">--</div></div>

  1309.           <div class="health-line"><div class="name">Buffer Duration</div><div class="val" id="health-buffer-duration">--</div></div>

  1310.           <div class="health-line"><div class="name">High Watermark</div><div class="val" id="health-buffer-highwater">--</div></div>

  1311.           <div class="health-line"><div class="name">Queue Fill</div><div class="val" id="health-queue-fill">--</div></div>

  1312.           <div class="health-line"><div class="name">Underrun Streak</div><div class="val" id="health-underrun-streak">--</div></div>

  1313.           <div class="health-line"><div class="name">Last Update</div><div class="val" id="health-last">--</div></div>

  1314.           <div class="health-trend">

  1315.             <div class="health-trend-label">High Watermark Trend</div>

  1316.             <svg class="spark warn" id="spark-high-watermark" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1317.           </div>

  1318.           <div class="health-trend">

  1319.             <div class="health-trend-label">Queue Fill Trend</div>

  1320.             <svg class="spark good" id="spark-queue-fill" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1321.           </div>

  1322.         </div>

  1323.           </div>

  1324.           <div class="card sidebar-card">

  1325.         <div class="sidebar-section">

  1326.           <div class="sidebar-title">Control Audit</div>

  1327.           <div class="section-note">Counts of 4xx rejects recorded by the control plane APIs.</div>

  1328.           <div class="kv">

  1329.             <div class="k">Rejects total</div><div class="v" id="audit-total">--</div>

  1330.             <div class="k">405 Method Not Allowed</div><div class="v" id="audit-methodNotAllowed">--</div>

  1331.             <div class="k">415 Unsupported Media Type</div><div class="v" id="audit-unsupportedMediaType">--</div>

  1332.             <div class="k">413 Request Too Large</div><div class="v" id="audit-bodyTooLarge">--</div>

  1333.             <div class="k">400 Unexpected Body</div><div class="v" id="audit-unexpectedBody">--</div>

  1334.           </div>

  1335.         </div>

  1336. 

  1337. 

  1338.           </div>

  1339.         </div>

  1340.         <div class="stack">

  1341.       <div class="card panel" data-panel-key="transition-history">

  1342.         <div class="panel-head" data-panel>

  1343.           <h2>Transition History</h2>

  1344.           <div class="meta">recent state shifts</div>

  1345.           <span class="chevron"></span>

  1346.         </div>

  1347.         <div class="panel-body">

  1348.           <div class="section-note">Keeps runtime escalations visible without scrolling the activity log.</div>

  1349.           <div class="transition-history" id="transition-history">

  1350.             <div class="transition-history-empty">No transitions yet.</div>

  1351.           </div>

  1352.         </div>

  1353.       </div>

  1354. 

  1355. 

  1356.       <div class="card panel" data-panel-key="fault-history">

  1357.         <div class="panel-head" data-panel>

  1358.           <h2>Fault History</h2>

  1359.           <div class="meta">recent faults</div>

  1360.           <span class="chevron">▼</span>

  1361.         </div>

  1362.         <div class="panel-body">

  1363.           <div class="section-note">Recent fault events for quick ops situational awareness.</div>

  1364.           <div class="fault-history" id="fault-history">

  1365.             <div class="fault-history-empty">No faults yet.</div>

  1366.           </div>

  1367.         </div>

  1368.       </div>

  1369. 

  1370. 

  1371.         </div>

  1372.       </div>

  1373.     </section>

  1374. 

  1375.     <section class="tab-panel" data-tab-panel="activity">

  1376.       <div class="tab-columns one">

  1377.         <div class="stack">

  1378.       <div class="card panel" data-panel-key="log">

  1379.         <div class="panel-head" data-panel>

  1380.           <h2>Activity Log</h2>

  1381.           <div class="meta" id="log-meta">recent events</div>

  1382.           <span class="chevron">▼</span>

  1383.         </div>

  1384.         <div class="panel-body">

  1385.           <div class="actions-row" style="margin-top:0;margin-bottom:12px">

  1386.             <button class="ghost-btn" id="btn-clear-log" type="button">Clear Log</button>

  1387.           </div>

  1388.           <div class="log" id="log"><div class="empty-log">No events yet.</div></div>

  1389.         </div>

  1390.       </div>

  1391.         </div>

  1392.       </div>

  1393.     </section>

  1394.   </div>

  1395. </div>

  1396. 

  1397. <div class="toast" id="toast"></div>

  1398. 

  1399. <script>

  1400. const $ = (id) => document.getElementById(id);

  1401. 

  1402. const runtimePollMs = 1000;

  1403. const configPollMs = 8000;

  1404. const mobileMq = window.matchMedia('(max-width: 640px)');

  1405. const freqPresetValues = [87.6, 94.5, 99.5, 100.0, 107.9];

  1406. const sparkHistoryLimit = 40;

  1407. const transitionHistoryLimit = 6;

  1408. 

  1409. const state = {

  1410.   server: {

  1411.     config: null,

  1412.     runtime: null,

  1413.     lastConfigAt: 0,

  1414.     lastRuntimeAt: 0,

  1415.     configOk: false,

  1416.     runtimeOk: false,

  1417.   },

  1418.   lastRuntimeState: '',

  1419.   draft: {

  1420.     frequencyMHz: undefined,

  1421.     ps: undefined,

  1422.     radioText: undefined,

  1423.   },

  1424.   errors: {

  1425.     frequencyMHz: '',

  1426.     ps: '',

  1427.     radioText: '',

  1428.   },

  1429.   dirty: new Set(),

  1430.   pendingRequests: 0,

  1431.   txBusy: false,

  1432.   faultResetBusy: false,

  1433.   toggleBusy: {},

  1434.   pollersStarted: false,

  1435.   mobilePanelsApplied: false,

  1436.   charts: {

  1437.     audio: [],

  1438.     underruns: [],

  1439.     tx: [],

  1440.     highWatermark: [],

  1441.     queueFill: [],

  1442.   },

  1443.   runtimeTransitions: [],

  1444.   freqPresetIndex: 0,

  1445. };

  1446. 

  1447. const fields = {

  1448.   frequencyMHz: { section: 'freq', equal: (a,b) => nearlyEqual(a,b,0.0001) },

  1449.   ps: { section: 'rds', equal: (a,b) => String(a ?? '') === String(b ?? '') },

  1450.   radioText: { section: 'rds', equal: (a,b) => String(a ?? '') === String(b ?? '') },

  1451. };

  1452. 

  1453. function nearlyEqual(a, b, eps = 1e-9) {

  1454.   if (a == null && b == null) return true;

  1455.   if (a == null || b == null) return false;

  1456.   return Math.abs(Number(a) - Number(b)) <= eps;

  1457. }

  1458. 

  1459. function nowTs() { return Date.now(); }

  1460. 

  1461. function serverValue(key) {

  1462.   const cfg = state.server.config;

  1463.   if (!cfg) return undefined;

  1464.   switch (key) {

  1465.     case 'frequencyMHz': return cfg.fm?.frequencyMHz;

  1466.     case 'ps': return cfg.rds?.ps ?? '';

  1467.     case 'radioText': return cfg.rds?.radioText ?? '';

  1468.     case 'stereoEnabled': return cfg.fm?.stereoEnabled;

  1469.     case 'rdsEnabled': return cfg.rds?.enabled;

  1470.     case 'limiterEnabled': return cfg.fm?.limiterEnabled;

  1471.     default: return undefined;

  1472.   }

  1473. }

  1474. 

  1475. function effectiveValue(key) {

  1476.   return state.dirty.has(key) ? state.draft[key] : serverValue(key);

  1477. }

  1478. 

  1479. function validateField(key, value) {

  1480.   switch (key) {

  1481.     case 'frequencyMHz': {

  1482.       if (value == null || Number.isNaN(Number(value))) return 'Enter a valid number.';

  1483.       const num = Number(value);

  1484.       if (num < 65 || num > 110) return 'Frequency must stay between 65 and 110 MHz.';

  1485.       return '';

  1486.     }

  1487.     case 'ps': {

  1488.       const text = String(value ?? '');

  1489.       if (text.length > 8) return 'PS is limited to 8 characters.';

  1490.       return '';

  1491.     }

  1492.     case 'radioText': {

  1493.       const text = String(value ?? '');

  1494.       if (text.length > 64) return 'RadioText is limited to 64 characters.';

  1495.       return '';

  1496.     }

  1497.     default:

  1498.       return '';

  1499.   }

  1500. }

  1501. 

  1502. function sectionHasErrors(section) {

  1503.   return Object.entries(fields).some(([key, meta]) => meta.section === section && state.errors[key]);

  1504. }

  1505. 

  1506. function setDirty(key, value) {

  1507.   state.draft[key] = value;

  1508.   state.errors[key] = validateField(key, value);

  1509.   const current = serverValue(key);

  1510.   const equal = !state.errors[key] && fields[key].equal(value, current);

  1511.   if (equal) {

  1512.     state.dirty.delete(key);

  1513.     state.draft[key] = undefined;

  1514.   } else {

  1515.     state.dirty.add(key);

  1516.   }

  1517.   if (key === 'frequencyMHz' && typeof value === 'number') syncFreqPresetIndex(value);

  1518.   render();

  1519. }

  1520. 

  1521. function clearDirty(keys) {

  1522.   for (const key of keys) {

  1523.     state.dirty.delete(key);

  1524.     state.draft[key] = undefined;

  1525.     state.errors[key] = '';

  1526.   }

  1527.   render();

  1528. }

  1529. 

  1530. function isDirtySection(section) {

  1531.   for (const key of state.dirty) {

  1532.     if (fields[key]?.section === section) return true;

  1533.   }

  1534.   return false;

  1535. }

  1536. 

  1537. function getSectionPatch(section) {

  1538.   const patch = {};

  1539.   for (const key of state.dirty) {

  1540.     if (fields[key]?.section === section && !state.errors[key]) patch[key] = state.draft[key];

  1541.   }

  1542.   return patch;

  1543. }

  1544. 

  1545. async function api(path, opts) {

  1546.   const response = await fetch(path, opts);

  1547.   const text = await response.text();

  1548.   if (!response.ok) {

  1549.     throw new Error(text.trim() || `HTTP ${response.status}`);

  1550.   }

  1551.   if (!text) return {};

  1552.   try {

  1553.     return JSON.parse(text);

  1554.   } catch {

  1555.     return { ok: true, raw: text };

  1556.   }

  1557. }

  1558. 

  1559. function setConnection(ok, mode) {

  1560.   const led = $('led-conn');

  1561.   const label = $('conn-label');

  1562.   if (ok) {

  1563.     led.className = 'led on-green';

  1564.     label.textContent = mode || 'connected';

  1565.   } else {

  1566.     led.className = 'led on-red';

  1567.     label.textContent = mode || 'offline';

  1568.   }

  1569. }

  1570. 

  1571. async function loadConfig({ silent = false } = {}) {

  1572.   try {

  1573.     const cfg = await api('/config');

  1574.     state.server.config = cfg;

  1575.     state.server.configOk = true;

  1576.     state.server.lastConfigAt = nowTs();

  1577.     syncFreqPresetIndex(cfg.fm?.frequencyMHz);

  1578.     setConnection(true, state.pendingRequests > 0 ? 'busy' : 'connected');

  1579.     render();

  1580.     if (!silent) log('Config synced from server', 'info');

  1581.     return cfg;

  1582.   } catch (error) {

  1583.     state.server.configOk = false;

  1584.     if (!state.server.runtimeOk) setConnection(false, 'offline');

  1585.     render();

  1586.     if (!silent) log('Config load failed: ' + error.message, 'err');

  1587.     throw error;

  1588.   }

  1589. }

  1590. 

  1591. async function loadRuntime({ silent = true } = {}) {

  1592.   try {

  1593.     const runtime = await api('/runtime');

  1594.     state.server.runtime = runtime;

  1595.     state.server.runtimeOk = true;

  1596.     state.server.lastRuntimeAt = nowTs();

  1597.     const syncedTransitions = syncTransitionHistoryFromEngine(runtime.engine);

  1598.     notifyRuntimeTransition(runtime.engine, !syncedTransitions);

  1599.     pushHistory(runtime);

  1600.     setConnection(true, state.pendingRequests > 0 ? 'busy' : 'connected');

  1601.     render();

  1602.     return runtime;

  1603.   } catch (error) {

  1604.     state.server.runtimeOk = false;

  1605.     if (!state.server.configOk) setConnection(false, 'offline');

  1606.     render();

  1607.     if (!silent) log('Runtime load failed: ' + error.message, 'err');

  1608.     throw error;

  1609.   }

  1610. }

  1611. 

  1612. function pushHistory(runtime) {

  1613.   const engine = runtime.engine || {};

  1614.   const driver = runtime.driver || {};

  1615.   const audio = runtime.audioStream || {};

  1616.   pushChart(state.charts.audio, typeof audio.buffered === 'number' ? audio.buffered : 0);

  1617.   const highWatermarkDurationSeconds = Number(audio.highWatermarkDurationSeconds);

  1618.   const normalizedHighWatermark = Number.isFinite(highWatermarkDurationSeconds) ? highWatermarkDurationSeconds : 0;

  1619.   pushChart(state.charts.highWatermark, normalizedHighWatermark);

  1620.   const queueFill = Number(engine.queue?.fillLevel ?? 0);

  1621.   pushChart(state.charts.queueFill, Number.isFinite(queueFill) ? queueFill : 0);

  1622.   pushChart(state.charts.underruns, Number(engine.underruns ?? driver.underruns ?? 0));

  1623.   const txState = String(engine.state || 'idle').toLowerCase();

  1624.   pushChart(state.charts.tx, txState === 'running' ? 1 : state.txBusy ? 0.55 : 0.05);

  1625. }

  1626. 

  1627. function pushTransitionHistory(from, to, severity) {

  1628.   if (!from || !to) return;

  1629.   const entry = {

  1630.     from: normalizeRuntimeState(from),

  1631.     to: normalizeRuntimeState(to),

  1632.     severity: severity || 'info',

  1633.     time: nowTs(),

  1634.   };

  1635.   state.runtimeTransitions.unshift(entry);

  1636.   if (state.runtimeTransitions.length > transitionHistoryLimit) {

  1637.     state.runtimeTransitions.splice(transitionHistoryLimit);

  1638.   }

  1639.   updateTransitionHistory();

  1640. }

  1641. 

  1642. function transitionEntryTime(value) {

  1643.   if (value == null) return nowTs();

  1644.   if (typeof value === 'number') return value;

  1645.   const parsed = Date.parse(String(value));

  1646.   return Number.isNaN(parsed) ? nowTs() : parsed;

  1647. }

  1648. 

  1649. function syncTransitionHistoryFromEngine(engine) {

  1650.   const entries = Array.isArray(engine?.transitionHistory) ? engine.transitionHistory : null;

  1651.   if (!entries) return false;

  1652.   const sliceStart = Math.max(0, entries.length - transitionHistoryLimit);

  1653.   const trimmed = entries.slice(sliceStart);

  1654.   const normalized = trimmed.map((entry) => ({

  1655.     from: normalizeRuntimeState(entry?.from),

  1656.     to: normalizeRuntimeState(entry?.to),

  1657.     severity: String(entry?.severity || 'info').toLowerCase(),

  1658.     time: transitionEntryTime(entry?.time),

  1659.   }));

  1660.   normalized.reverse();

  1661.   state.runtimeTransitions = normalized;

  1662.   updateTransitionHistory();

  1663.   return true;

  1664. }

  1665. 

  1666. function transitionSeverityClass(severity) {

  1667.   switch (String(severity || '').toLowerCase()) {

  1668.     case 'err':

  1669.       return 'err';

  1670.     case 'warn':

  1671.       return 'warn';

  1672.     case 'ok':

  1673.     case 'good':

  1674.       return 'good';

  1675.     default:

  1676.       return 'info';

  1677.   }

  1678. }

  1679. 

  1680. function updateTransitionHistory() {

  1681.   const container = $('transition-history');

  1682.   if (!container) return;

  1683.   if (!state.runtimeTransitions.length) {

  1684.     container.innerHTML = '<div class="transition-history-empty">No transitions yet.</div>';

  1685.     return;

  1686.   }

  1687.   const rows = state.runtimeTransitions.map((entry) => {

  1688.     const when = entry?.time ? new Date(entry.time) : null;

  1689.     const timeLabel = when && !Number.isNaN(when.getTime()) ? when.toLocaleTimeString() : '--:--';

  1690.     const desc = `${entry.from.toUpperCase()} → ${entry.to.toUpperCase()}`;

  1691.     const severityClass = transitionSeverityClass(entry.severity);

  1692.     return `<div class="transition-history-entry ${severityClass}"><span class="transition-history-time">${timeLabel}</span><span class="transition-history-desc">${desc}</span></div>`;

  1693.   });

  1694.   container.innerHTML = rows.join('');

  1695. }

  1696. 

  1697. function pushChart(arr, value) {

  1698.   arr.push(Number.isFinite(value) ? value : 0);

  1699.   if (arr.length > sparkHistoryLimit) arr.splice(0, arr.length - sparkHistoryLimit);

  1700. }

  1701. 

  1702. function setConnectionBusy() {

  1703.   setConnection(true, 'busy');

  1704. }

  1705. 

  1706. function beginRequest() {

  1707.   state.pendingRequests += 1;

  1708.   setConnectionBusy();

  1709.   render();

  1710. }

  1711. 

  1712. function endRequest() {

  1713.   state.pendingRequests = Math.max(0, state.pendingRequests - 1);

  1714.   if (state.server.configOk || state.server.runtimeOk) {

  1715.     setConnection(true, state.pendingRequests > 0 ? 'busy' : 'connected');

  1716.   }

  1717.   render();

  1718. }

  1719. 

  1720. async function sendPatch(patch, { successMessage = 'Applied', clearKeys = [] } = {}) {

  1721.   beginRequest();

  1722.   try {

  1723.     const result = await api('/config', {

  1724.       method: 'POST',

  1725.       headers: { 'Content-Type': 'application/json' },

  1726.       body: JSON.stringify(patch),

  1727.     });

  1728.     if (state.server.config) mergeLocalConfigPatch(patch);

  1729.     clearDirty(clearKeys);

  1730.     render();

  1731.     toast(successMessage + (result.live ? ' · live' : ''), 'ok');

  1732.     log('PATCH ' + JSON.stringify(patch) + (result.live ? ' [live]' : ' [saved]'), 'ok');

  1733.     await Promise.allSettled([

  1734.       loadConfig({ silent: true }),

  1735.       loadRuntime({ silent: true }),

  1736.     ]);

  1737.     return result;

  1738.   } catch (error) {

  1739.     toast(error.message, 'err');

  1740.     log('PATCH failed: ' + error.message, 'err');

  1741.     throw error;

  1742.   } finally {

  1743.     endRequest();

  1744.   }

  1745. }

  1746. 

  1747. function mergeLocalConfigPatch(patch) {

  1748.   const cfg = state.server.config || {};

  1749.   cfg.fm ||= {};

  1750.   cfg.rds ||= {};

  1751.   for (const [key, value] of Object.entries(patch)) {

  1752.     switch (key) {

  1753.       case 'frequencyMHz': cfg.fm.frequencyMHz = value; break;

  1754.       case 'stereoEnabled': cfg.fm.stereoEnabled = value; break;

  1755.       case 'limiterEnabled': cfg.fm.limiterEnabled = value; break;

  1756.       case 'rdsEnabled': cfg.rds.enabled = value; break;

  1757.       case 'ps': cfg.rds.ps = value; break;

  1758.       case 'radioText': cfg.rds.radioText = value; break;

  1759.     }

  1760.   }

  1761. }

  1762. 

  1763. async function applySection(section) {

  1764.   if (sectionHasErrors(section)) {

  1765.     toast('Fix the highlighted fields first', 'warn');

  1766.     log(section.toUpperCase() + ' apply blocked by validation errors', 'warn');

  1767.     render();

  1768.     return;

  1769.   }

  1770.   const patch = getSectionPatch(section);

  1771.   const keys = Object.keys(patch);

  1772.   if (!keys.length) {

  1773.     toast('No changes to apply', 'info');

  1774.     return;

  1775.   }

  1776.   let message = 'Applied';

  1777.   if (section === 'freq') message = 'Frequency updated';

  1778.   if (section === 'rds') message = 'RDS text updated';

  1779.   await sendPatch(patch, { successMessage: message, clearKeys: keys });

  1780. }

  1781. 

  1782. function resetSection(section) {

  1783.   const keys = Object.keys(fields).filter((key) => fields[key].section === section);

  1784.   clearDirty(keys);

  1785.   log(section.toUpperCase() + ' draft reset', 'warn');

  1786.   toast('Draft reset', 'info');

  1787. }

  1788. 

  1789. async function setToggle(key, nextValue) {

  1790.   if (state.toggleBusy[key]) return;

  1791.   state.toggleBusy[key] = true;

  1792.   render();

  1793.   try {

  1794.     await sendPatch({ [key]: nextValue }, {

  1795.       successMessage: key.replace(/Enabled$/, '') + ' ' + (nextValue ? 'enabled' : 'disabled'),

  1796.       clearKeys: [],

  1797.     });

  1798.   } finally {

  1799.     state.toggleBusy[key] = false;

  1800.     render();

  1801.   }

  1802. }

  1803. 

  1804. async function txAction(action) {

  1805.   if (state.txBusy) return;

  1806.   state.txBusy = true;

  1807.   render();

  1808.   beginRequest();

  1809.   try {

  1810.     await api(`/tx/${action}`, { method: 'POST' });

  1811.     toast(action === 'start' ? 'TX started' : 'TX stopped', 'ok');

  1812.     log('TX ' + action + ' request accepted', 'ok');

  1813.     await Promise.allSettled([

  1814.       loadRuntime({ silent: true }),

  1815.       loadConfig({ silent: true }),

  1816.     ]);

  1817.   } catch (error) {

  1818.     toast(error.message, 'err');

  1819.     log('TX ' + action + ' failed: ' + error.message, 'err');

  1820.   } finally {

  1821.     state.txBusy = false;

  1822.     endRequest();

  1823.     render();

  1824.   }

  1825. }

  1826. 

  1827. async function resetFaultAction() {

  1828.   if (state.faultResetBusy) return;

  1829.   state.faultResetBusy = true;

  1830.   render();

  1831.   beginRequest();

  1832.   try {

  1833.     await api('/runtime/fault/reset', { method: 'POST' });

  1834.     toast('Fault reset', 'ok');

  1835.     log('Fault reset request accepted', 'ok');

  1836.     await loadRuntime({ silent: true });

  1837.   } catch (error) {

  1838.     toast(error.message, 'err');

  1839.     log('Fault reset failed: ' + error.message, 'err');

  1840.   } finally {

  1841.     state.faultResetBusy = false;

  1842.     endRequest();

  1843.     render();

  1844.   }

  1845. }

  1846. 

  1847. function fmt(n) {

  1848.   if (n == null) return '--';

  1849.   if (n >= 1e9) return (n / 1e9).toFixed(2) + 'G';

  1850.   if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';

  1851.   if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';

  1852.   return String(n);

  1853. }

  1854. 

  1855. function fmtTime(seconds) {

  1856.   if (!seconds || seconds <= 0) return '--';

  1857.   const h = Math.floor(seconds / 3600);

  1858.   const m = Math.floor((seconds % 3600) / 60);

  1859.   const s = Math.floor(seconds % 60);

  1860.   if (h > 0) return `${h}h ${m}m`;

  1861.   if (m > 0) return `${m}m ${s}s`;

  1862.   return `${s}s`;

  1863. }

  1864. 

  1865. function fmtDurationSeconds(value) {

  1866.   if (!Number.isFinite(value) || value < 0) return '--';

  1867.   if (value >= 1) return `${value.toFixed(2)} s`;

  1868.   return `${(value * 1000).toFixed(0)} ms`;

  1869. }

  1870. 

  1871. function fmtBool(v) {

  1872.   return v == null ? '--' : (v ? 'ON' : 'OFF');

  1873. }

  1874. 

  1875. function fmtFreq(v) {

  1876.   return typeof v === 'number' ? v.toFixed(1) + ' MHz' : '--';

  1877. }

  1878. 

  1879. function fmtPercent(v) {

  1880.   if (typeof v !== 'number') return '--';

  1881.   return (v * 100).toFixed(0) + '%';

  1882. }

  1883. 

  1884. function ageString(ts) {

  1885.   if (!ts) return '--';

  1886.   const diff = Math.max(0, Math.floor((nowTs() - ts) / 1000));

  1887.   if (diff < 2) return 'just now';

  1888.   if (diff < 60) return diff + 's ago';

  1889.   const m = Math.floor(diff / 60);

  1890.   if (m < 60) return m + 'm ago';

  1891.   const h = Math.floor(m / 60);

  1892.   return h + 'h ago';

  1893. }

  1894. 

  1895. function updateText(id, text) {

  1896.   const el = $(id);

  1897.   if (el && el.textContent !== String(text)) el.textContent = text;

  1898. }

  1899. 

  1900. function updateHTML(id, html) {

  1901.   const el = $(id);

  1902.   if (el && el.innerHTML !== html) el.innerHTML = html;

  1903. }

  1904. 

  1905. function syncDirtyInput(id, key, transform = (v) => v) {

  1906.   const el = $(id);

  1907.   if (!el) return;

  1908.   const dirty = state.dirty.has(key);

  1909.   const desired = dirty ? transform(state.draft[key]) : transform(serverValue(key));

  1910.   const asString = desired == null ? '' : String(desired);

  1911.   const isFocused = document.activeElement === el;

  1912.   if (!isFocused || !dirty) {

  1913.     if (el.value !== asString) el.value = asString;

  1914.   }

  1915.   el.classList.toggle('input-dirty', dirty && !state.errors[key]);

  1916.   el.classList.toggle('input-error', !!state.errors[key]);

  1917. }

  1918. 

  1919. function renderFieldErrors() {

  1920.   renderFieldError('freq-error', state.errors.frequencyMHz);

  1921.   renderFieldError('ps-error', state.errors.ps);

  1922.   renderFieldError('rt-error', state.errors.radioText);

  1923. }

  1924. 

  1925. function renderFieldError(id, message) {

  1926.   const el = $(id);

  1927.   el.textContent = message || '';

  1928.   el.classList.toggle('show', !!message);

  1929. }

  1930. 

  1931. function setMeter(fillId, textId, ratio, text, mode = 'good') {

  1932.   const fill = $(fillId);

  1933.   const pct = Math.max(0, Math.min(100, Math.round((ratio ?? 0) * 100)));

  1934.   fill.style.width = pct + '%';

  1935.   fill.className = 'meter-fill' + (mode === 'warn' ? ' warn' : mode === 'err' ? ' err' : '');

  1936.   updateText(textId, text);

  1937. }

  1938. 

  1939. function applyMobilePanelDefaults() {

  1940.   if (!mobileMq.matches || state.mobilePanelsApplied) return;

  1941.   state.mobilePanelsApplied = true;

  1942.   document.querySelectorAll('.panel[data-panel-key]').forEach((panel) => {

  1943.     const key = panel.dataset.panelKey;

  1944.     const head = panel.querySelector('.panel-head');

  1945.     const body = panel.querySelector('.panel-body');

  1946.     const keepOpen = key === 'frequency' || key === 'danger';

  1947.     head.classList.toggle('collapsed', !keepOpen);

  1948.     body.classList.toggle('collapsed', !keepOpen);

  1949.   });

  1950. }

  1951. 

  1952. function syncFreqPresetIndex(value) {

  1953.   if (typeof value !== 'number') return;

  1954.   let closestIndex = 0;

  1955.   let closestDistance = Infinity;

  1956.   freqPresetValues.forEach((freq, idx) => {

  1957.     const dist = Math.abs(freq - value);

  1958.     if (dist < closestDistance) {

  1959.       closestDistance = dist;

  1960.       closestIndex = idx;

  1961.     }

  1962.   });

  1963.   state.freqPresetIndex = closestIndex;

  1964. }

  1965. 

  1966. function cycleFreqPreset(direction) {

  1967.   state.freqPresetIndex = (state.freqPresetIndex + direction + freqPresetValues.length) % freqPresetValues.length;

  1968.   const next = freqPresetValues[state.freqPresetIndex];

  1969.   setDirty('frequencyMHz', next);

  1970.   toast(`Preset ${next.toFixed(1)} MHz loaded`, 'info');

  1971. }

  1972. 

  1973. function refreshPresetButtons() {

  1974.   const effectiveFreq = effectiveValue('frequencyMHz');

  1975.   document.querySelectorAll('[data-freq-preset]').forEach((btn) => {

  1976.     const value = Number(btn.dataset.freqPreset);

  1977.     btn.classList.toggle('active', typeof effectiveFreq === 'number' && nearlyEqual(value, effectiveFreq, 0.05));

  1978.   });

  1979. }

  1980. 

  1981. function updateHeroState(engineState) {

  1982.   const hero = $('hero-card');

  1983.   hero.classList.remove('tx-live', 'tx-busy');

  1984.   if (state.txBusy || ['starting', 'stopping'].includes(engineState)) {

  1985.     hero.classList.add('tx-busy');

  1986.   } else if (engineState === 'running') {

  1987.     hero.classList.add('tx-live');

  1988.   }

  1989. }

  1990. 

  1991. function drawSparkline(svgId, values, mode = 'good', maxOverride = null) {

  1992.   const svg = $(svgId);

  1993.   if (!svg) return;

  1994.   svg.className = `spark ${mode}`;

  1995.   const width = 160;

  1996.   const height = 34;

  1997.   const points = values.length ? values : [0, 0];

  1998.   const max = maxOverride != null ? maxOverride : Math.max(...points, 1);

  1999.   const min = 0;

  2000.   const step = points.length <= 1 ? width : width / (points.length - 1);

  2001.   const coords = points.map((value, i) => {

  2002.     const x = i * step;

  2003.     const norm = max === min ? 0 : (value - min) / (max - min || 1);

  2004.     const y = height - 4 - norm * (height - 8);

  2005.     return [x, y];

  2006.   });

  2007.   const line = coords.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');

  2008.   const area = `${line} L ${width},${height} L 0,${height} Z`;

  2009.   svg.innerHTML = `<path class="area" d="${area}"></path><path class="line" d="${line}"></path>`;

  2010. }

  2011. 

  2012. function render() {

  2013.   const cfg = state.server.config || {};

  2014.   const runtime = state.server.runtime || {};

  2015.   const engine = runtime.engine || {};

  2016.   const driver = runtime.driver || {};

  2017.   const audioStream = runtime.audioStream || null;

  2018. 

  2019.   const appliedRaw = engine.appliedFrequencyMHz;

  2020.   const appliedFreq = Number.isFinite(Number(appliedRaw)) ? Number(appliedRaw) : null;

  2021.   const desiredRaw = cfg.fm?.frequencyMHz;

  2022.   const desiredFreq = Number.isFinite(Number(desiredRaw)) ? Number(desiredRaw) : null;

  2023.   const displayFreq = appliedFreq ?? effectiveValue('frequencyMHz') ?? desiredFreq;

  2024.   updateHTML('freq-display', `${typeof displayFreq === 'number' ? displayFreq.toFixed(1) : '---.-'}<span class="unit">MHz</span>`);

  2025.   const appliedLabel = appliedFreq != null ? `Applied ${appliedFreq.toFixed(1)} MHz` : 'Applied --';

  2026.   const desiredLabel = desiredFreq != null ? `Desired ${desiredFreq.toFixed(1)} MHz` : 'Desired --';

  2027.   updateText('freq-applied', appliedLabel);

  2028.   updateText('freq-desired', desiredLabel);

  2029.   const noteEl = $('freq-note');

  2030.   if (noteEl) {

  2031.     const mismatch = appliedFreq != null && desiredFreq != null && !nearlyEqual(appliedFreq, desiredFreq, 0.001);

  2032.     noteEl.classList.toggle('mismatch', mismatch);

  2033.   }

  2034. 

  2035.   updateText('badge-backend', cfg.backend?.kind || cfg.backend || '--');

  2036.   updateText('badge-mode', engine.state && engine.state !== 'idle' ? 'TX Active' : 'Control Plane');

  2037.   updateText('badge-live', state.server.runtimeOk ? 'Connected' : 'Waiting');

  2038. 

  2039.   updateText('t-chunks', fmt(engine.chunksProduced));

  2040.   updateText('t-samples', fmt(engine.totalSamples));

  2041.   updateText('t-uptime', fmtTime(engine.uptimeSeconds));

  2042.   updateText('t-rate', driver.effectiveSampleRateHz ? (driver.effectiveSampleRateHz / 1000).toFixed(0) + 'k' : '--');

  2043.   const underruns = engine.underruns ?? driver.underruns;

  2044.   const underrunEl = $('t-underruns');

  2045.   underrunEl.textContent = underruns == null ? '--' : String(underruns);

  2046.   underrunEl.className = 'value' + (underruns > 0 ? ' err' : underruns === 0 ? ' good' : '');

  2047. 

  2048.   const txStateValue = String(engine.state || 'idle').toLowerCase();

  2049.   const txState = state.txBusy ? 'WORKING…' : txStateValue.toUpperCase();

  2050.   const txClass = state.txBusy ? 'working' : txStateValue;

  2051.   $('tx-state').textContent = txState;

  2052.   $('tx-state').className = 'tx-state ' + txClass;

  2053.   updateText('tx-hint', engine.lastError ? `Last error: ${engine.lastError}` : (state.txBusy ? 'Command in progress' : 'Runtime polled every 1s'));

  2054.   updateHeroState(txStateValue);

  2055. 

  2056.   const startDisabled = state.txBusy || txStateValue === 'running';

  2057.   const stopDisabled = state.txBusy || ['idle', 'stopped', ''].includes(txStateValue);

  2058.   $('btn-start').disabled = startDisabled;

  2059.   $('btn-stop').disabled = stopDisabled;

  2060.   $('btn-refresh').disabled = state.pendingRequests > 0;

  2061.   $('danger-stop').disabled = stopDisabled;

  2062.   $('danger-refresh').disabled = state.pendingRequests > 0;

  2063.   const resetFaultBtn = $('danger-reset-fault');

  2064.   if (resetFaultBtn) {

  2065.     const resetDisabled = state.faultResetBusy || !state.server.runtimeOk;

  2066.     resetFaultBtn.disabled = resetDisabled;

  2067.     resetFaultBtn.textContent = state.faultResetBusy ? 'Resetting…' : 'Reset Fault';

  2068.   }

  2069. 

  2070.   syncDirtyInput('freq-slider', 'frequencyMHz', (v) => typeof v === 'number' ? v.toFixed(1) : '100.0');

  2071.   syncDirtyInput('freq-num', 'frequencyMHz', (v) => typeof v === 'number' ? v.toFixed(1) : '100.0');

  2072.   syncDirtyInput('rds-ps', 'ps', (v) => String(v ?? ''));

  2073.   syncDirtyInput('rds-rt', 'radioText', (v) => String(v ?? ''));

  2074. 

  2075.   const psValue = String(effectiveValue('ps') ?? cfg.rds?.ps ?? '');

  2076.   const rtValue = String(effectiveValue('radioText') ?? cfg.rds?.radioText ?? '');

  2077.   updateText('ps-count', psValue.length);

  2078.   updateText('rt-count', rtValue.length);

  2079.   renderFieldErrors();

  2080.   refreshPresetButtons();

  2081. 

  2082.   renderToggle('stereoEnabled', 'tog-stereo', 'stereo-label');

  2083.   renderToggle('rdsEnabled', 'tog-rds', 'rds-label');

  2084.   renderToggle('limiterEnabled', 'tog-limiter', 'limiter-label');

  2085. 

  2086.   const freqDirty = isDirtySection('freq');

  2087.   $('freq-apply').disabled = !freqDirty || sectionHasErrors('freq');

  2088.   $('freq-reset').disabled = !freqDirty;

  2089.   const rdsDirty = isDirtySection('rds');

  2090.   $('rds-apply').disabled = !rdsDirty || sectionHasErrors('rds');

  2091.   $('rds-reset').disabled = !rdsDirty;

  2092. 

  2093.   updateText('freq-meta', sectionHasErrors('freq') ? 'Validation error' : (freqDirty ? 'Unsaved changes' : 'Live-tunable'));

  2094.   updateText('rds-meta', sectionHasErrors('rds') ? 'Validation error' : (rdsDirty ? `${Object.keys(getSectionPatch('rds')).length} unsaved` : 'PS + RT'));

  2095. 

  2096.   updateText('info-backend', cfg.backend?.kind || cfg.backend || '--');

  2097.   updateText('info-freq', fmtFreq(cfg.fm?.frequencyMHz));

  2098.   updateText('info-preemph', cfg.fm?.preEmphasisTauUS ? `${cfg.fm.preEmphasisTauUS} µs` : 'Off');

  2099.   updateText('info-fmmod', fmtBool(cfg.fm?.fmModulationEnabled));

  2100.   updateText('info-live', engine.state ? `${String(engine.state).toUpperCase()} / ${state.server.runtimeOk ? 'runtime ok' : 'runtime pending'}` : (state.server.configOk ? 'config only' : '--'));

  2101. 

  2102.   updateHealth(engine, driver, audioStream);

  2103.   updateControlAudit(runtime.controlAudit);

  2104.   updateFaultHistory(engine);

  2105.   updateTransitionHistory();

  2106.   updateResetHint(engine);

  2107.   updateMeters(engine, driver, audioStream);

  2108.   const highWatermarkDurationSecondsRaw = audioStream?.highWatermarkDurationSeconds;

  2109.   const highWatermarkDurationSeconds = Number(highWatermarkDurationSecondsRaw);

  2110.   const highWatermarkFramesRaw = audioStream?.highWatermark;

  2111.   const highWatermarkFrames = Number.isFinite(Number(highWatermarkFramesRaw)) ? Number(highWatermarkFramesRaw) : 0;

  2112.   const capacityRaw = audioStream?.capacity;

  2113.   const capacity = Number.isFinite(Number(capacityRaw)) ? Number(capacityRaw) : 0;

  2114.   const bufferedDurationSecondsRaw = audioStream?.bufferedDurationSeconds;

  2115.   const bufferedDurationSeconds = Number(bufferedDurationSecondsRaw);

  2116.   const hasBufferedDuration = Number.isFinite(bufferedDurationSeconds);

  2117.   const hasHighWatermarkDuration = Number.isFinite(highWatermarkDurationSeconds);

  2118.   const highWatermarkRatio = capacity > 0 ? Math.min(1, highWatermarkFrames / capacity) : 0;

  2119.   let highWatermarkMode = 'good';

  2120.   if (highWatermarkRatio >= 0.95) highWatermarkMode = 'err';

  2121.   else if (highWatermarkRatio >= 0.65) highWatermarkMode = 'warn';

  2122.   const sparkHighWatermarkMax = Math.max(

  2123.     1,

  2124.     hasHighWatermarkDuration ? highWatermarkDurationSeconds : 0,

  2125.     hasBufferedDuration ? bufferedDurationSeconds : 0

  2126.   );

  2127.   const queueHealthRaw = String(engine.queue?.health || '').toLowerCase();

  2128.   let queueSparkMode = 'good';

  2129.   if (queueHealthRaw === 'critical') queueSparkMode = 'err';

  2130.   else if (queueHealthRaw === 'low') queueSparkMode = 'warn';

  2131.   drawSparkline('spark-audio', state.charts.audio, 'good', 1);

  2132.   drawSparkline('spark-high-watermark', state.charts.highWatermark, highWatermarkMode, sparkHighWatermarkMax);

  2133.   drawSparkline('spark-queue-fill', state.charts.queueFill, queueSparkMode, 1);

  2134.   drawSparkline('spark-underruns', state.charts.underruns, underruns > 0 ? 'err' : 'warn');

  2135.   drawSparkline('spark-tx', state.charts.tx, txStateValue === 'running' ? 'good' : 'warn', 1);

  2136.   applyMobilePanelDefaults();

  2137. }

  2138. 

  2139. function renderToggle(key, toggleId, labelId) {

  2140.   const on = !!serverValue(key);

  2141.   const busy = !!state.toggleBusy[key];

  2142.   const el = $(toggleId);

  2143.   el.className = 'toggle' + (on ? ' on' : '') + (busy ? ' busy' : '');

  2144.   el.setAttribute('aria-checked', on ? 'true' : 'false');

  2145.   updateText(labelId, busy ? '...' : (on ? 'ON' : 'OFF'));

  2146. }

  2147. 

  2148. function runtimeStateClass(engineState) {

  2149.   const normalized = String(engineState || '').toLowerCase();

  2150.   if (!normalized) {

  2151.     return 'warn';

  2152.   }

  2153.   switch (normalized) {

  2154.     case 'faulted':

  2155.       return 'err';

  2156.     case 'muted':

  2157.     case 'degraded':

  2158.     case 'prebuffering':

  2159.     case 'arming':

  2160.     case 'stopping':

  2161.     case 'idle':

  2162.     case 'unknown':

  2163.       return 'warn';

  2164.     default:

  2165.       return 'good';

  2166.   }

  2167. }

  2168. 

  2169. 

  2170. 

  2171. function normalizeRuntimeState(stateName) {

  2172.   const normalized = (typeof stateName === 'string' ? stateName.trim().toLowerCase() : '');

  2173.   return normalized || 'idle';

  2174. }

  2175. 

  2176. function runtimeStateSeverity(stateName) {

  2177.   const normalized = normalizeRuntimeState(stateName);

  2178.   switch (normalized) {

  2179.     case 'running':

  2180.       return 'ok';

  2181.     case 'degraded':

  2182.     case 'muted':

  2183.       return 'warn';

  2184.     case 'faulted':

  2185.       return 'err';

  2186.     default:

  2187.       return 'info';

  2188.   }

  2189. }

  2190. 

  2191. function notifyRuntimeTransition(engine, pushHistory = true) {

  2192.   if (!engine) return;

  2193.   const next = normalizeRuntimeState(engine.state);

  2194.   const prev = state.lastRuntimeState;

  2195.   state.lastRuntimeState = next;

  2196.   if (!prev || prev === next) return;

  2197.   const severity = runtimeStateSeverity(next);

  2198.   if (pushHistory) {

  2199.     pushTransitionHistory(prev, next, severity);

  2200.   }

  2201.   const message = `Runtime ${prev.toUpperCase()} → ${next.toUpperCase()}`;

  2202.   const logLevel = severity === 'err' ? 'err' : (severity === 'warn' ? 'warn' : 'info');

  2203.   toast(message, severity);

  2204.   log(message, logLevel);

  2205. }

  2206. 

  2207. 

  2208. function updateHealth(engine, driver, audioStream) {

  2209.   engine = engine || {};

  2210.   driver = driver || {};

  2211.   updateText('health-http', state.server.configOk ? 'OK' : 'OFFLINE');

  2212.   $('health-http').className = 'val ' + (state.server.configOk ? 'good' : 'err');

  2213. 

  2214.   let runtimeLabel = 'WAITING';

  2215.   let runtimeClass = 'warn';

  2216.   if (state.server.runtimeOk) {

  2217.     const engineStateName = String(engine.state || 'unknown');

  2218.     runtimeLabel = engineStateName.toUpperCase();

  2219.     runtimeClass = runtimeStateClass(engineStateName);

  2220.   }

  2221.   updateText('health-runtime', runtimeLabel);

  2222.   $('health-runtime').className = 'val ' + runtimeClass;

  2223. 

  2224.   const durationSeconds = Number(engine.runtimeStateDurationSeconds);

  2225.   const durationLabel = Number.isFinite(durationSeconds) && durationSeconds > 0 ? fmtTime(durationSeconds) : '--';

  2226.   updateText('health-state-age', durationLabel);

  2227.   const stateAgeEl = $('health-state-age');

  2228.   if (stateAgeEl) {

  2229.     stateAgeEl.className = 'val ' + runtimeClass;

  2230.   }

  2231. 

  2232.   const runtimeIndicator = engine.runtimeIndicator;

  2233.   const indicatorLabels = {

  2234.     normal: 'Normal',

  2235.     degraded: 'Degraded',

  2236.     queueCritical: 'Queue critical',

  2237.   };

  2238.   const indicatorText = indicatorLabels[runtimeIndicator] || (runtimeIndicator ? runtimeIndicator : '--');

  2239.   let indicatorSeverity = '';

  2240.   if (runtimeIndicator === 'queueCritical') indicatorSeverity = 'err';

  2241.   else if (runtimeIndicator === 'degraded') indicatorSeverity = 'warn';

  2242.   else if (runtimeIndicator === 'normal') indicatorSeverity = 'good';

  2243.   const indicatorEl = $('health-indicator');

  2244.   if (indicatorEl) {

  2245.     indicatorEl.className = 'val' + (indicatorSeverity ? ' ' + indicatorSeverity : '');

  2246.   }

  2247.   updateText('health-indicator', indicatorText);

  2248. 

  2249.   const runtimeAlertRaw = (engine.runtimeAlert || '').trim();

  2250.   const hasAlert = !!runtimeAlertRaw;

  2251.   const alertEl = $('health-alert');

  2252.   if (alertEl) {

  2253.     alertEl.className = 'val ' + (hasAlert ? 'warn' : 'good');

  2254.   }

  2255.   updateText('health-alert', hasAlert ? runtimeAlertRaw : 'None');

  2256. 

  2257.   let audioLabel = 'N/A';

  2258.   let audioClass = 'val';

  2259.   if (audioStream) {

  2260.     const fill = typeof audioStream.buffered === 'number' ? audioStream.buffered : null;

  2261.     audioLabel = fill == null ? 'Unknown' : fmtPercent(fill);

  2262.     if (fill == null) audioClass = 'val';

  2263.     else if (fill < 0.05) audioClass = 'val err';

  2264.     else if (fill < 0.2) audioClass = 'val warn';

  2265.     else audioClass = 'val good';

  2266.   }

  2267.   updateText('health-audio', audioLabel);

  2268.   $('health-audio').className = audioClass;

  2269. 

  2270.   const bufferedDurationSeconds = Number(audioStream?.bufferedDurationSeconds);

  2271.   updateText('health-buffer-duration', fmtDurationSeconds(bufferedDurationSeconds));

  2272. 

  2273.   const highWatermarkRaw = audioStream?.highWatermark;

  2274.   const highWatermarkFrames = Number.isFinite(Number(highWatermarkRaw)) ? Number(highWatermarkRaw) : null;

  2275.   const highWatermarkDurationRaw = audioStream?.highWatermarkDurationSeconds;

  2276.   const highWatermarkDuration = Number.isFinite(Number(highWatermarkDurationRaw)) ? Number(highWatermarkDurationRaw) : null;

  2277.   let highWatermarkLabel = '--';

  2278.   if (highWatermarkDuration !== null) {

  2279.     highWatermarkLabel = fmtDurationSeconds(highWatermarkDuration);

  2280.     if (highWatermarkFrames !== null) {

  2281.       highWatermarkLabel += ` (${highWatermarkFrames} frames)`;

  2282.     }

  2283.   } else if (highWatermarkFrames !== null) {

  2284.     highWatermarkLabel = `${highWatermarkFrames} frames`;

  2285.   }

  2286.   updateText('health-buffer-highwater', highWatermarkLabel);

  2287. 

  2288.   const queueFill = Number(engine.queue?.fillLevel);

  2289.   const queueHealthRaw = String(engine.queue?.health || '').toLowerCase();

  2290.   const queueHealthLabel = queueHealthRaw ? queueHealthRaw[0].toUpperCase() + queueHealthRaw.slice(1) : '';

  2291.   let queueFillLabel = '--';

  2292.   if (Number.isFinite(queueFill)) {

  2293.     queueFillLabel = fmtPercent(queueFill);

  2294.     if (queueHealthLabel) queueFillLabel += ` · ${queueHealthLabel}`;

  2295.   } else if (queueHealthLabel) {

  2296.     queueFillLabel = queueHealthLabel;

  2297.   }

  2298.   updateText('health-queue-fill', queueFillLabel);

  2299.   const queueFillEl = $('health-queue-fill');

  2300.   if (queueFillEl) {

  2301.     let queueFillClass = 'good';

  2302.     if (queueHealthRaw === 'critical') queueFillClass = 'err';

  2303.     else if (queueHealthRaw === 'low') queueFillClass = 'warn';

  2304.     queueFillEl.className = 'val ' + queueFillClass;

  2305.   }

  2306. 

  2307.   const streakEl = $('health-underrun-streak');

  2308.   if (streakEl) {

  2309.     const streakRaw = driver?.underrunStreak;

  2310.     const streakMaxRaw = driver?.maxUnderrunStreak;

  2311.     const streakCurrent = Number.isFinite(Number(streakRaw)) ? Number(streakRaw) : null;

  2312.     const streakMax = Number.isFinite(Number(streakMaxRaw)) ? Number(streakMaxRaw) : null;

  2313.     let streakLabel = '--';

  2314.     if (streakCurrent != null) {

  2315.       streakLabel = String(streakCurrent);

  2316.       if (streakMax != null) {

  2317.         streakLabel += ` (max ${streakMax})`;

  2318.       }

  2319.     } else if (streakMax != null) {

  2320.       streakLabel = `Max ${streakMax}`;

  2321.     }

  2322.     let streakSeverity = '';

  2323.     if (streakCurrent != null || streakMax != null) {

  2324.       const highestStreak = Math.max(

  2325.         streakCurrent != null ? streakCurrent : 0,

  2326.         streakMax != null ? streakMax : 0

  2327.       );

  2328.       if (highestStreak >= 6) streakSeverity = ' err';

  2329.       else if (highestStreak > 0) streakSeverity = ' warn';

  2330.       else streakSeverity = ' good';

  2331.     }

  2332.     streakEl.textContent = streakLabel;

  2333.     streakEl.className = 'val' + streakSeverity;

  2334.   }

  2335. 

  2336.   const last = Math.max(state.server.lastConfigAt || 0, state.server.lastRuntimeAt || 0);

  2337.   updateText('health-last', ageString(last));

  2338. 

  2339.   const transitionsAvailable = engine.degradedTransitions != null || engine.mutedTransitions != null || engine.faultedTransitions != null;

  2340.   const transitionsText = transitionsAvailable ? `${Number(engine.degradedTransitions ?? 0)} / ${Number(engine.mutedTransitions ?? 0)} / ${Number(engine.faultedTransitions ?? 0)}` : '--';

  2341.   updateText('health-transitions', transitionsText);

  2342. 

  2343.   const faultCountValue = engine.faultCount != null ? Number(engine.faultCount) : 0;

  2344.   const hasFaultCount = engine.faultCount != null;

  2345.   updateText('health-fault-count', hasFaultCount ? String(faultCountValue) : '--');

  2346.   const faultCountEl = $('health-fault-count');

  2347.   if (faultCountEl) {

  2348.     faultCountEl.className = 'val' + (hasFaultCount ? (faultCountValue > 0 ? ' warn' : ' good') : '');

  2349.   }

  2350. 

  2351.   const lastFaultEl = $('health-last-fault');

  2352.   const lastFault = engine.lastFault;

  2353.   if (lastFaultEl) {

  2354.     if (lastFault) {

  2355.       const severity = String(lastFault.severity || '').toLowerCase();

  2356.       const severityClass = severity === 'faulted' ? 'err' : 'warn';

  2357.       const severityLabel = (lastFault.severity || 'Fault').toUpperCase();

  2358.       const reasonLabel = lastFault.reason ? ` ${lastFault.reason}` : '';

  2359.       const messageLabel = lastFault.message ? ` - ${lastFault.message}` : '';

  2360.       let whenLabel = '';

  2361.       if (lastFault.time) {

  2362.         const parsed = new Date(lastFault.time);

  2363.         if (!Number.isNaN(parsed.getTime())) {

  2364.           whenLabel = ` @ ${parsed.toLocaleTimeString()}`;

  2365.         }

  2366.       }

  2367.       const title = `${severityLabel}${reasonLabel}`;

  2368.       updateText('health-last-fault', `${title}${messageLabel}${whenLabel}`);

  2369.       lastFaultEl.className = 'val ' + severityClass;

  2370.     } else {

  2371.       lastFaultEl.className = 'val good';

  2372.       updateText('health-last-fault', 'None');

  2373.     }

  2374.   }

  2375. }

  2376. 

  2377. 

  2378. 

  2379. function updateControlAudit(audit) {

  2380.   const entries = [

  2381.     { key: 'methodNotAllowed', id: 'audit-methodNotAllowed' },

  2382.     { key: 'unsupportedMediaType', id: 'audit-unsupportedMediaType' },

  2383.     { key: 'bodyTooLarge', id: 'audit-bodyTooLarge' },

  2384.     { key: 'unexpectedBody', id: 'audit-unexpectedBody' },

  2385.   ];

  2386.   let total = 0;

  2387.   let hasData = false;

  2388.   entries.forEach(({ key, id }) => {

  2389.     const raw = audit && typeof audit[key] !== 'undefined' ? Number(audit[key]) : NaN;

  2390.     const value = Number.isFinite(raw) ? raw : null;

  2391.     if (value != null) {

  2392.       hasData = true;

  2393.       total += value;

  2394.     }

  2395.     setAuditValue(id, value);

  2396.   });

  2397.   setAuditValue('audit-total', hasData ? total : null);

  2398. }

  2399. 

  2400. function setAuditValue(id, count) {

  2401.   const el = $(id);

  2402.   if (!el) return;

  2403.   if (count == null) {

  2404.     el.textContent = '--';

  2405.     el.className = 'val';

  2406.     return;

  2407.   }

  2408.   el.textContent = String(count);

  2409.   el.className = 'val ' + (count > 0 ? 'warn' : 'good');

  2410. }

  2411. 

  2412. function updateFaultHistory(engine) {

  2413.   const container = $('fault-history');

  2414.   if (!container) return;

  2415.   const history = Array.isArray(engine?.faultHistory) ? engine.faultHistory : [];

  2416.   if (!history.length) {

  2417.     container.innerHTML = '<div class="fault-history-empty">No faults recorded yet.</div>';

  2418.     return;

  2419.   }

  2420.   const rows = history.slice().reverse().map((entry) => {

  2421.     const when = entry?.time ? new Date(entry.time) : null;

  2422.     const timeLabel = when && !Number.isNaN(when.getTime()) ? when.toLocaleTimeString() : '--:--';

  2423.     const severity = String(entry?.severity || 'warn').toLowerCase();

  2424.     const severityLabel = String(entry?.severity || 'Fault').toUpperCase();

  2425.     const reasonLabel = entry?.reason ? ` ${entry.reason}` : '';

  2426.     const messageLabel = entry?.message ? ` · ${entry.message}` : '';

  2427.     return `<div class="fault-history-entry ${severity}"><span class="fault-history-time">${timeLabel}</span><span class="fault-history-desc">${severityLabel}${reasonLabel}${messageLabel}</span></div>`;

  2428.   });

  2429.   container.innerHTML = rows.join('');

  2430. }

  2431. 

  2432. function updateResetHint(engine) {

  2433.   const hint = $('reset-hint');

  2434.   if (!hint) return;

  2435.   const stateName = String(engine?.state || '').toLowerCase();

  2436.   let text = 'Manual fault reset drops runtime to DEGRADED while the queue recovers.';

  2437.   if (stateName === 'faulted') {

  2438.     text = 'Faulted: reset moves runtime back to DEGRADED until the queue settles.';

  2439.   } else if (stateName === 'muted' || stateName === 'degraded') {

  2440.     text = 'Reset Fault keeps the runtime in DEGRADED so the queue can recover before running again.';

  2441.   }

  2442.   const durationSeconds = Number(engine?.runtimeStateDurationSeconds);

  2443.   const durationLabel = Number.isFinite(durationSeconds) && durationSeconds > 0 ? fmtTime(durationSeconds) : null;

  2444.   const ageHint = durationLabel ? ` State age ${durationLabel}.` : '';

  2445.   hint.textContent = text + ageHint;

  2446. }

  2447. 

  2448. function updateMeters(engine, driver, audioStream) {

  2449.   if (audioStream && typeof audioStream.buffered === 'number') {

  2450.     const ratio = Math.max(0, Math.min(1, audioStream.buffered));

  2451.     const mode = ratio < 0.05 ? 'err' : ratio < 0.2 ? 'warn' : 'good';

  2452.     setMeter('meter-audio-fill', 'meter-audio-text', ratio, fmtPercent(ratio), mode);

  2453.   } else {

  2454.     setMeter('meter-audio-fill', 'meter-audio-text', 0, 'N/A', 'warn');

  2455.   }

  2456. 

  2457.   const underruns = Number(engine.underruns ?? driver.underruns ?? 0);

  2458.   const healthRatio = underruns <= 0 ? 1 : Math.max(0, 1 - Math.min(underruns, 10) / 10);

  2459.   const healthMode = underruns === 0 ? 'good' : underruns < 3 ? 'warn' : 'err';

  2460.   setMeter('meter-stream-fill', 'meter-stream-text', healthRatio, underruns === 0 ? 'Clean' : `${underruns} underrun${underruns === 1 ? '' : 's'}`, healthMode);

  2461. 

  2462.   const txState = String(engine.state || 'idle').toLowerCase();

  2463.   const activeRatio = txState === 'running' ? 1 : state.txBusy ? 0.55 : 0.08;

  2464.   const activeMode = txState === 'running' ? 'good' : state.txBusy ? 'warn' : 'err';

  2465.   const activeText = txState === 'running' ? 'Live' : state.txBusy ? 'Working' : 'Idle';

  2466.   setMeter('meter-tx-fill', 'meter-tx-text', activeRatio, activeText, activeMode);

  2467. }

  2468. 

  2469. function toast(msg, type = 'info') {

  2470.   const t = $('toast');

  2471.   t.textContent = msg;

  2472.   t.className = 'toast ' + type + ' show';

  2473.   clearTimeout(t._timer);

  2474.   t._timer = setTimeout(() => t.classList.remove('show'), 2600);

  2475. }

  2476. 

  2477. function log(message, type = '') {

  2478.   const logEl = $('log');

  2479.   const empty = logEl.querySelector('.empty-log');

  2480.   if (empty) empty.remove();

  2481.   const row = document.createElement('div');

  2482.   row.className = 'entry ' + type;

  2483.   row.textContent = `${new Date().toLocaleTimeString()}  ${message}`;

  2484.   logEl.appendChild(row);

  2485.   while (logEl.children.length > 250) logEl.removeChild(logEl.firstChild);

  2486.   logEl.scrollTop = logEl.scrollHeight;

  2487. }

  2488. 

  2489. function bindPanels() {

  2490.   document.querySelectorAll('[data-panel]').forEach((head) => {

  2491.     head.addEventListener('click', () => {

  2492.       head.classList.toggle('collapsed');

  2493.       head.nextElementSibling.classList.toggle('collapsed');

  2494.     });

  2495.   });

  2496. }

  2497. 

  2498. function bindInputs() {

  2499.   $('freq-slider').addEventListener('input', (e) => {

  2500.     const value = Number(e.target.value);

  2501.     setDirty('frequencyMHz', value);

  2502.   });

  2503.   $('freq-num').addEventListener('input', (e) => {

  2504.     const value = Number(e.target.value);

  2505.     if (!Number.isNaN(value)) setDirty('frequencyMHz', value);

  2506.     else {

  2507.       state.errors.frequencyMHz = 'Enter a valid number.';

  2508.       render();

  2509.     }

  2510.   });

  2511. 

  2512.   $('rds-ps').addEventListener('input', (e) => setDirty('ps', e.target.value.toUpperCase().slice(0, 8)));

  2513.   $('rds-rt').addEventListener('input', (e) => setDirty('radioText', e.target.value.slice(0, 64)));

  2514. 

  2515.   $('freq-apply').addEventListener('click', () => applySection('freq'));

  2516.   $('rds-apply').addEventListener('click', () => applySection('rds'));

  2517.   $('freq-reset').addEventListener('click', () => resetSection('freq'));

  2518.   $('rds-reset').addEventListener('click', () => resetSection('rds'));

  2519. 

  2520.   $('btn-start').addEventListener('click', () => txAction('start'));

  2521.   $('btn-stop').addEventListener('click', () => txAction('stop'));

  2522.   $('danger-stop').addEventListener('click', () => txAction('stop'));

  2523.   $('btn-refresh').addEventListener('click', manualRefresh);

  2524.   $('danger-refresh').addEventListener('click', manualRefresh);

  2525.   $('danger-reset-fault').addEventListener('click', () => resetFaultAction());

  2526. 

  2527.   document.querySelectorAll('.toggle[data-toggle]').forEach((toggle) => {

  2528.     const key = toggle.dataset.toggle;

  2529.     const handler = () => setToggle(key, !serverValue(key));

  2530.     toggle.addEventListener('click', handler);

  2531.     toggle.addEventListener('keydown', (e) => {

  2532.       if (e.key === 'Enter' || e.key === ' ') {

  2533.         e.preventDefault();

  2534.         handler();

  2535.       }

  2536.     });

  2537.   });

  2538. 

  2539.   document.querySelectorAll('[data-freq-preset]').forEach((btn) => {

  2540.     btn.addEventListener('click', () => {

  2541.       const value = Number(btn.dataset.freqPreset);

  2542.       setDirty('frequencyMHz', value);

  2543.       toast(`Frequency preset ${value.toFixed(1)} MHz loaded`, 'info');

  2544.     });

  2545.   });

  2546. 

  2547.   document.querySelectorAll('[data-rds-ps]').forEach((btn) => {

  2548.     btn.addEventListener('click', () => {

  2549.       setDirty('ps', btn.dataset.rdsPs || '');

  2550.       setDirty('radioText', btn.dataset.rdsRt || '');

  2551.       toast('RDS preset loaded', 'info');

  2552.     });

  2553.   });

  2554. 

  2555.   $('btn-clear-log').addEventListener('click', () => {

  2556.     $('log').innerHTML = '<div class="empty-log">No events yet.</div>';

  2557.     toast('Log cleared', 'info');

  2558.   });

  2559. }

  2560. 

  2561. async function manualRefresh() {

  2562.   beginRequest();

  2563.   try {

  2564.     await Promise.allSettled([

  2565.       loadConfig({ silent: true }),

  2566.       loadRuntime({ silent: true }),

  2567.     ]);

  2568.     toast('Refreshed', 'info');

  2569.     log('Manual refresh completed', 'info');

  2570.   } finally {

  2571.     endRequest();

  2572.   }

  2573. }

  2574. 

  2575. function startPollers() {

  2576.   if (state.pollersStarted) return;

  2577.   state.pollersStarted = true;

  2578.   setInterval(() => { loadRuntime({ silent: true }); }, runtimePollMs);

  2579.   setInterval(() => { loadConfig({ silent: true }); }, configPollMs);

  2580. }

  2581. 

  2582. function bindResponsiveBehavior() {

  2583.   const listener = () => {

  2584.     if (!mobileMq.matches) {

  2585.       state.mobilePanelsApplied = false;

  2586.       return;

  2587.     }

  2588.     applyMobilePanelDefaults();

  2589.   };

  2590.   if (mobileMq.addEventListener) mobileMq.addEventListener('change', listener);

  2591.   else mobileMq.addListener(listener);

  2592. }

  2593. 

  2594. function isTypingContext(target) {

  2595.   if (!target) return false;

  2596.   const tag = (target.tagName || '').toLowerCase();

  2597.   return tag === 'input' || tag === 'textarea' || target.isContentEditable;

  2598. }

  2599. 

  2600. function bindKeyboardShortcuts() {

  2601.   window.addEventListener('keydown', (e) => {

  2602.     if (isTypingContext(e.target)) {

  2603.       if (e.key !== 'Enter') return;

  2604.       if (state.dirty.has('frequencyMHz')) {

  2605.         e.preventDefault();

  2606.         applySection('freq');

  2607.       } else if (isDirtySection('rds')) {

  2608.         e.preventDefault();

  2609.         applySection('rds');

  2610.       }

  2611.       return;

  2612.     }

  2613. 

  2614.     if (e.key === 't' && !e.shiftKey) {

  2615.       e.preventDefault();

  2616.       txAction('start');

  2617.       return;

  2618.     }

  2619.     if ((e.key === 'T') || (e.key === 't' && e.shiftKey)) {

  2620.       e.preventDefault();

  2621.       txAction('stop');

  2622.       return;

  2623.     }

  2624.     if (e.key.toLowerCase() === 'r') {

  2625.       e.preventDefault();

  2626.       manualRefresh();

  2627.       return;

  2628.     }

  2629.     if (e.key === '[') {

  2630.       e.preventDefault();

  2631.       cycleFreqPreset(-1);

  2632.       return;

  2633.     }

  2634.     if (e.key === ']') {

  2635.       e.preventDefault();

  2636.       cycleFreqPreset(1);

  2637.       return;

  2638.     }

  2639.     if (e.key === 'Enter') {

  2640.       e.preventDefault();

  2641.       if (state.dirty.has('frequencyMHz')) applySection('freq');

  2642.       else if (isDirtySection('rds')) applySection('rds');

  2643.     }

  2644.   });

  2645. }

  2646. 

  2647. async function init() {

  2648.   bindPanels();

  2649.   bindInputs();

  2650.   bindResponsiveBehavior();

  2651.   bindKeyboardShortcuts();

  2652.   render();

  2653.   log('fm-rds-tx control UI booting', 'info');

  2654. 

  2655.   await Promise.allSettled([

  2656.     loadConfig({ silent: false }),

  2657.     loadRuntime({ silent: true }),

  2658.   ]);

  2659. 

  2660.   render();

  2661.   startPollers();

  2662.   log('Polling active: runtime 1s, config 8s', 'ok');

  2663.   log('Keyboard shortcuts armed', 'info');

  2664. }

  2665. 

  2666. init();

  2667. </script>

  2668. </body>

  2669. </html>